├── .gitignore ├── .jshintrc ├── LICENSE ├── package.json ├── CHANGELOG.md ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | .DS_Store -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "strict": false 4 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Emre Unal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-compass-compiler", 3 | "version": "0.5.0", 4 | "description": "Ember CLI Compass Compiler", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "ember-addon", 11 | "ember-cli", 12 | "ember", 13 | "compass", 14 | "scss", 15 | "sass", 16 | "css", 17 | "compile", 18 | "preprocessor", 19 | "style" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/quaertym/ember-cli-compass-compiler.git" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/quaertym/ember-cli-compass-compiler/issues" 27 | }, 28 | "author": "Emre Unal", 29 | "contributors": [ 30 | "Andrew Jo (https://github.com/AndrewJo)" 31 | ], 32 | "license": "MIT", 33 | "readmeFile": "README.md", 34 | "dependencies": { 35 | "broccoli-compass-compiler": "0.0.6", 36 | "broccoli-funnel": "1.0.1", 37 | "broccoli-merge-trees": "1.1.1", 38 | "ember-cli-version-checker": "^1.1.4", 39 | "glob": "^6.0.4", 40 | "merge": "^1.2.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v0.3.0 2 | 3 | * Update broccoli-compass-compiler to `v0.0.5` 4 | * `importPath` directories are now added to watch by `broccoli-compass-compiler` 5 | 6 | ## v0.2.0 7 | 8 | * Add support for `outputPaths` 9 | * **[BREAKING CHANGE]** Main `.scss` file should be named `app.scss` instead of `appname.scss` 10 | 11 | ## v0.1.2 12 | 13 | * Use `setupPreprocessorRegistry` hook 14 | * Watch `importPath` directories 15 | * Move dependencies into separate modules: [broccoli-compass-compiler](https://github.com/quaertym/broccoli-compass-compiler) & [compass-compile](https://github.com/quaertym/compass-compile) 16 | 17 | ## v0.0.18 18 | 19 | * Allow paths with whitespace 20 | 21 | ## v0.0.17 22 | 23 | * Avoid unnecessary compilation by compiling only when app/styles contents change 24 | 25 | ## v0.0.16 26 | 27 | * Cleanup code 28 | 29 | ## v0.0.15 30 | 31 | * Display compass errors if present [#19](https://github.com/quaertym/ember-cli-compass-compiler/pull/19) 32 | 33 | ## v0.0.14 34 | 35 | * Fixed EMFILE error. See below. 36 | * Great speed improvements. See below. 37 | * Dropped `broccoli-compass` dependency. Some of the things may not work because of this. Please 38 | open an issue if that is the case. If you prefer `broccoli-compass` dependency please continue 39 | using `ember-cli-compass-compiler` v0.0.13. 40 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var merge = require('merge'); 3 | var compileCompass = require('broccoli-compass-compiler'); 4 | var checker = require('ember-cli-version-checker'); 5 | var mergeTrees = require('broccoli-merge-trees'); 6 | var Funnel = require('broccoli-funnel'); 7 | var glob = require('glob'); 8 | 9 | function CompassCompilerPlugin(optionsFn) { 10 | this.name = 'ember-cli-compass-compiler'; 11 | this.ext = ['scss', 'sass']; 12 | this.optionsFn = optionsFn; 13 | } 14 | 15 | CompassCompilerPlugin.prototype.toTree = function(tree, inputPath, outputPath, inputOptions) { 16 | 17 | var removeLeadingSlash = function(string) { 18 | return (string.length > 0 && string[0] === '/') ? string.slice(1) : string; 19 | }; 20 | 21 | // Normalize paths 22 | inputPath = removeLeadingSlash(inputPath); 23 | outputPath = removeLeadingSlash(outputPath); 24 | 25 | // Merge default options with supplied options 26 | var defaultOptions = { 27 | outputStyle: 'compressed', 28 | compassCommand: 'compass', 29 | importPath: [], 30 | getCssDir: function(outputDir) { 31 | return '"' + path.join(outputDir, outputPath) + '"'; 32 | } 33 | }; 34 | var compassOptions = merge({}, defaultOptions, this.optionsFn(), inputOptions); 35 | 36 | 37 | var outputPaths = compassOptions.outputPaths; 38 | var trees = Object.keys(outputPaths).map(function(file) { 39 | 40 | // Watch inputTrees and compassOptions.importPath directories 41 | var inputTrees = [tree]; 42 | 43 | // Define getSassDir function if not overridden by user 44 | if (!compassOptions.getSassDir) { 45 | compassOptions.getSassDir = function(inputTrees, inputPaths) { 46 | return inputPaths.reduce(function(pathFound, currentPath) { 47 | // Return early if input path is already found 48 | if (pathFound !== '') { 49 | return pathFound; 50 | } 51 | 52 | // Filter pattern for .sass or .scss files 53 | var pattern = path.join(currentPath, inputPath, file + '.s@(a|c)ss'); 54 | var result = glob.sync(pattern); 55 | 56 | // Found the file we're looking for 57 | if (result.length > 0) { 58 | return path.dirname(result[0]); 59 | } 60 | 61 | return ''; 62 | }, ''); 63 | }; 64 | } 65 | 66 | // Compile 67 | var compassTree = compileCompass(inputTrees, compassOptions); 68 | 69 | // Rename and move files 70 | var extension = path.extname(outputPaths[file]); // compiled asset extension 71 | var fileName = file + extension; // current file name 72 | var outputFileName = path.basename(outputPaths[file], extension) + extension; // new name for asset 73 | var outputDir = removeLeadingSlash(path.dirname(outputPaths[file])); // new directory for asset 74 | var node = new Funnel(compassTree, { 75 | srcDir: outputPath, 76 | destDir: outputDir, 77 | files: [fileName], 78 | getDestinationPath: function(relativePath) { 79 | if (relativePath === fileName) { 80 | return outputFileName; 81 | } 82 | 83 | return relativePath; 84 | } 85 | }); 86 | return node; 87 | }); 88 | 89 | return mergeTrees(trees); 90 | }; 91 | 92 | module.exports = { 93 | name: 'Ember CLI Compass Compiler', 94 | 95 | shouldSetupRegistryInIncluded: function() { 96 | return !checker.isAbove(this, '0.2.0'); 97 | }, 98 | 99 | setupPreprocessorRegistry: function(type, registry) { 100 | registry.add('css', new CompassCompilerPlugin(this.compassOptions.bind(this))); 101 | 102 | // prevent conflict with broccoli-sass if it's installed 103 | if (registry.remove) registry.remove('css', 'broccoli-sass'); 104 | }, 105 | 106 | included: function(app) { 107 | this.app = app; 108 | this._super.included.apply(this, arguments); 109 | 110 | if (this.shouldSetupRegistryInIncluded()) { 111 | this.setupPreprocessorRegistry('parent', app.registry); 112 | } 113 | }, 114 | 115 | compassOptions: function () { 116 | var app = this.app; 117 | 118 | if (app && !app.options && app.app) { 119 | app = app.app; 120 | } 121 | 122 | return (app && app.options && app.options.compassOptions) || {}; 123 | } 124 | }; 125 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ember-cli-compass-compiler 2 | 3 | This addon adds [Compass](http://compass-style.org/) compiler for [Ember CLI](http://www.ember-cli.com/). 4 | 5 | ### Installation 6 | 7 | In your Ember CLI app, run the following: 8 | 9 | ```bash 10 | ember install ember-cli-compass-compiler 11 | ``` 12 | 13 | > **Note:** This addon will compile your `.scss` files, in addition to making Compass's 14 | libraries available to your project. This means you **do not** need additional broccoli libraries 15 | for compiling sass, such as `broccoli-sass`. 16 | 17 | > Be sure to remove all such libraries from your project when using `ember-cli-compass-compiler`. 18 | 19 | ### Requirements 20 | 21 | `compass` should be installed on your machine in order for this addon to work. 22 | 23 | To install `compass`, run: 24 | 25 | ```bash 26 | gem install compass 27 | ``` 28 | 29 | ### Usage 30 | 31 | After installation everything should work automatically. 32 | 33 | `app.scss` in your `app/styles` directory is compiled into `assets/appname.css` 34 | with `ember build` or `ember serve` commands. Other `.scss` files in `app/styles` 35 | are compiled as well. 36 | 37 | > **Note:** Previous versions of this addon(< 0.1.0) was requiring the main `.scss` file to be named as `appname.scss`. 38 | 39 | To override default options of compass compiler, do the following in your Brocfile: 40 | 41 | ```javascript 42 | var app = new EmberApp({ 43 | compassOptions: { 44 | outputStyle: 'expanded', 45 | require: ['sass-css-importer', 'susy'] 46 | } 47 | }); 48 | ``` 49 | 50 | To use compass, import it in your `app.scss`: 51 | 52 | ```scss 53 | @import "compass"; 54 | 55 | .round-rect-button { 56 | @include border-radius(4px, 4px); 57 | } 58 | ``` 59 | 60 | To include other files, import them using the relative path: 61 | 62 | ```scss 63 | @import "compass"; 64 | @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap"; 65 | 66 | .badge-success { 67 | @extend .badge; 68 | background-color: $brand-success !important; 69 | } 70 | ``` 71 | 72 | or use `importPath` option: 73 | 74 | ```javascript 75 | var app = new EmberApp({ 76 | compassOptions: { 77 | importPath: ['bower_components/bootstrap-sass-official/assets/stylesheets'] 78 | } 79 | }); 80 | ``` 81 | ```scss 82 | @import "compass"; 83 | @import "bootstrap"; 84 | 85 | .badge-success { 86 | @extend .badge; 87 | background-color: $brand-success !important; 88 | } 89 | ``` 90 | 91 | ### Import paths 92 | 93 | You can add additional scss import paths in your `compassOptions`. These paths will also be watched by broccoli and reload live. 94 | 95 | ```javascript 96 | var app = new EmberApp({ 97 | compassOptions: { 98 | importPath: ['/relative/path/to/vendor/scss/dir', '/other/full/path/to/css/dir'] 99 | } 100 | }); 101 | ``` 102 | 103 | ### Ember CLI Addon Usage 104 | 105 | If you are developing an Ember CLI Addon, you must follow these additional 106 | steps: 107 | 108 | 1. Include your styles in `addon/styles/addon.scss` (`.sass` works as well) 109 | 110 | 2. You can either install `ember-cli-compass-compiler` via NPM: 111 | 112 | ```bash 113 | $ npm install --save ember-cli-compass-compiler 114 | ``` 115 | 116 | or make sure to move it to `dependencies` from `devDependencies` in your 117 | `package.json` if already installed via 118 | `ember install ember-cli-compass-compiler` command: 119 | 120 | ```javascript 121 | "dependencies": { 122 | ... 123 | "ember-cli-compass-compiler": "^0.4.0", 124 | ... 125 | } 126 | ``` 127 | 128 | > **Important:** If you omit this step, Ember CLI will compile 129 | `tests/dummy/app/styles/app.scss` for your dummy test application but not 130 | your primary stylesheet at `addon/styles/addon.css`. 131 | 132 | 3. In `./index.js` of your project, make sure an `included` function is defined: 133 | 134 | ```javascript 135 | 'use strict' 136 | 137 | module.exports = { 138 | name: 'my-addon', 139 | included: function(app) { 140 | this._super.included(app); 141 | 142 | // OPTIONAL: import your addon dependencies from bower_components 143 | // app.import(`${app.bowerDirectory}/bootstrap/dist/js/bootstrap.js`); 144 | } 145 | }; 146 | ``` 147 | 148 | Without this, Ember CLI will throw an error when trying to serve the dummy 149 | test application or building distributables: 150 | 151 | ``` 152 | Cannot read property 'compassOptions' of undefined 153 | TypeError: Cannot read property 'compassOptions' of undefined 154 | ``` 155 | 156 | 4. Ensure your dummy test application contains `app.scss`. 157 | 158 | 5. Run `ember build`. Your stylesheet at `addon/styles/addon.scss` will be 159 | compiled to `dist/assets/vendor.css` and your test app's stylesheet at 160 | `tests/dummy/app/styles/app.scss` will be compiled to `dist/assets/dummy.css`. 161 | 162 | For more information, refer to [Developing Addons and Blueprints](http://ember-cli.com/extending/#developing-addons-and-blueprints) 163 | section on the [Ember CLI website](http://ember-cli.com). 164 | 165 | ### References 166 | 167 | * [compass](http://compass-style.org/) 168 | * [broccoli](https://github.com/broccolijs/broccoli) 169 | 170 | This work is built based on the [gist](https://gist.github.com/wagenet/79b804eb943b9f3d7594) by [@wagenet](https://github.com/wagenet). 171 | 172 | ### Other 173 | 174 | Still a work in progress, use at your own risk. 175 | 176 | ### LICENSE 177 | 178 | The MIT License (MIT) 179 | 180 | Copyright (c) 2015 Emre Unal 181 | 182 | Permission is hereby granted, free of charge, to any person obtaining a copy 183 | of this software and associated documentation files (the "Software"), to deal 184 | in the Software without restriction, including without limitation the rights 185 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 186 | copies of the Software, and to permit persons to whom the Software is 187 | furnished to do so, subject to the following conditions: 188 | 189 | The above copyright notice and this permission notice shall be included in all 190 | copies or substantial portions of the Software. 191 | 192 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 193 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 194 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 195 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 196 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 197 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 198 | SOFTWARE. 199 | --------------------------------------------------------------------------------