├── .gitignore
├── tests
    ├── util
    │   ├── _vars.scss
    │   ├── indented.sass
    │   ├── basic.scss
    │   ├── imports-old.scss
    │   ├── imports.scss
    │   ├── mock-importer-factory.js
    │   ├── mock-importer.js
    │   └── integration.js
    ├── settings.js
    ├── indented.js
    ├── import-events.js
    ├── style-tag.js
    └── custom-importers.js
├── .travis.yml
├── .github
    ├── ISSUE_TEMPLATE.md
    └── workflows
    │   └── run-test.yml
├── LICENSE
├── lib
    ├── browser.js
    └── index.js
├── package.json
├── README.md
└── history.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/tests/util/_vars.scss:
--------------------------------------------------------------------------------
1 | $color: red;
2 | $background: blue;
3 | 


--------------------------------------------------------------------------------
/tests/util/indented.sass:
--------------------------------------------------------------------------------
1 | body
2 |   color: red
3 |   background: blue
4 | 


--------------------------------------------------------------------------------
/tests/util/basic.scss:
--------------------------------------------------------------------------------
1 | body {
2 |   color: red;
3 |   background: blue;
4 |   columns: 300px 2;
5 | }
6 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6"
4 |   - "7"
5 |   - "8"
6 | notifications:
7 |   email: false
8 | 


--------------------------------------------------------------------------------
/tests/util/imports-old.scss:
--------------------------------------------------------------------------------
1 | @import 'vars';
2 | 
3 | body {
4 |   color: $color;
5 |   background: $background;
6 | }
7 | 


--------------------------------------------------------------------------------
/tests/util/imports.scss:
--------------------------------------------------------------------------------
1 | @import 'resolve-to-vars';
2 | 
3 | body {
4 |   color: $color;
5 |   background: $background;
6 | }
7 | 


--------------------------------------------------------------------------------
/tests/util/mock-importer-factory.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const mockImporter = require('./mock-importer')
 3 | module.exports = function () {
 4 |   module.exports.count++
 5 |   return mockImporter
 6 | }
 7 | 
 8 | module.exports.count = 0
 9 | 
10 | 


--------------------------------------------------------------------------------
/tests/util/mock-importer.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const importedFiles = new Set()
 3 | module.exports = function (file) {
 4 |   importedFiles.add(file)
 5 |   if (file === 'resolve-to-vars')
 6 |     return {file: 'tests/util/_vars.scss'}
 7 |   return null
 8 | }
 9 | 
10 | // Expose for assertions
11 | module.exports.importedFiles = importedFiles
12 | 


--------------------------------------------------------------------------------
/tests/settings.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | /* eslint-env mocha */
 3 | const assert = require('assert')
 4 | const integration = require('./util/integration')
 5 | 
 6 | it('settings', integration(__dirname + '/util/basic.scss', {
 7 |   autoInject: false,
 8 |   sass: {
 9 |     outputStyle: 'expanded'
10 |   },
11 |   postcss: {
12 |     autoprefixer: {}
13 |   }
14 | }, function (context, done) {
15 |   let css = context.exports
16 |   assert.equal(typeof css, 'string', 'exported raw css')
17 |   assert.notEqual(css.indexOf('-moz'), -1, 'postcss plugins ran')
18 |   done()
19 | }))
20 | 


--------------------------------------------------------------------------------
/tests/indented.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | /* eslint-env mocha */
 3 | const assert = require('assert')
 4 | const integration = require('./util/integration')
 5 | 
 6 | it('supports indented syntax (.sass)', integration(__dirname + '/util/indented.sass', {
 7 |   // empty
 8 | }, function (context, done) {
 9 |   let applied = context.window.getComputedStyle(context.document.body)
10 |   assert.equal(context.exports.tagName, 'STYLE', 'created <style> element')
11 |   assert.equal(applied.backgroundColor, 'blue', 'background-color changed')
12 |   assert.equal(applied.color, 'red', 'text color changed')
13 |   done()
14 | }))
15 | 


--------------------------------------------------------------------------------
/tests/import-events.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | /* eslint-env mocha */
 3 | const assert = require('assert')
 4 | const fs = require('fs')
 5 | const scssify = require('../lib')
 6 | 
 7 | it('emits "file" events for @imports', function (done) {
 8 |   const entry = __dirname + '/util/imports-old.scss'
 9 |   const expectedImport = [
10 |     __dirname + '/util/imports-old.scss',
11 |     __dirname + '/util/_vars.scss',
12 |   ]
13 |   let index = 0
14 |   fs.createReadStream(entry)
15 |   .on('error', done)
16 |   .pipe(scssify(entry, {_flags: {}}))
17 |   .on('error', done)
18 |   .on('file', function (imported) {
19 |     assert.equal(imported, expectedImport[index++])
20 |   })
21 |   .on('end', done)
22 |   .resume()
23 | })
24 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | Before opening an issue:
 2 | - If you're getting a build error, make sure your stylesheet works with `node-sass` directly: `node_modules/.bin/node-sass entry-file.scss >outfile.css` maybe it's a syntax problem!
 3 | - If possible, provide a _minimal_ and _complete_ project that reproduces your issue. Perhaps by stripping down your project you'll find out what the problem is!
 4 | 
 5 | ```
 6 | // package.json
 7 | {
 8 |   "name": "scssify-issue",
 9 |   "private": true,
10 |   "scripts": {
11 |     "start": "browserify -t scssify app.js >bundle.js"
12 |   },
13 |   "dependencies": {
14 |     "scssify": "latest",
15 |     "browserify": "latest"
16 |   }
17 | }
18 | 
19 | // app.js
20 | require('./styles.scss')
21 | 
22 | // styles.scss
23 | .foo{ color: red }
24 | 
25 | // $ npm install
26 | // $ npm start
27 | ... example output or an error message ...
28 | ```
29 | 
30 | What version of node/npm are you running?
31 | ```
32 | $ node -v
33 | $ npm -v
34 | ```
35 | 


--------------------------------------------------------------------------------
/.github/workflows/run-test.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean installation of node dependencies,
 2 | # cache/restore them, build the source code and run tests across different
 3 | # versions of node For more information see:
 4 | # https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 5 | 
 6 | name: Node.js CI
 7 | 
 8 | on:
 9 |   push:
10 |     branches: ["master", "dev"]
11 |   pull_request:
12 |     branches: ["master"]
13 | 
14 | jobs:
15 |   test:
16 |     runs-on: ubuntu-latest
17 |     timeout-minutes: 10
18 |     strategy:
19 |       matrix:
20 |         node-version: [14.x, 16.x, 18.x]
21 |         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
22 |     steps:
23 |     - uses: actions/checkout@v3
24 |     - name: Use Node.js ${{matrix.node-version}}
25 |       uses: actions/setup-node@v3
26 |       with:
27 |         node-version: ${{matrix.node-version}}
28 |         cache: 'npm'
29 |     - run: npm ci
30 |     - run: npm test
31 |       timeout-minutes: 5
32 | 


--------------------------------------------------------------------------------
/tests/style-tag.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | /* eslint-env mocha */
 3 | const assert = require('assert')
 4 | const integration = require('./util/integration')
 5 | 
 6 | it('supports <style> tags', integration(__dirname + '/util/basic.scss', {
 7 |   autoInject: true
 8 | }, function (context, done) {
 9 |   let applied = context.window.getComputedStyle(context.document.body)
10 |   assert.equal(context.exports.tagName, 'STYLE', 'created <style> element')
11 |   assert.equal(applied.backgroundColor, 'blue', 'background-color changed')
12 |   assert.equal(applied.color, 'red', 'text color changed')
13 |   done()
14 | }))
15 | 
16 | it('can prepend to the <head>', integration(__dirname + '/util/basic.scss', {
17 |   autoInject: {prepend: true}
18 | }, function (ctx, done) {
19 |   let children = ctx.document.head.childNodes
20 |   let dummy = children[1]
21 |   assert.equal(children.length, 2)
22 |   assert.equal(dummy.id, 'foo')
23 |   done()
24 | }, function (ctx) {
25 |   let dummy = ctx.document.createElement('style')
26 |   dummy.id = 'foo'
27 |   ctx.document.head.appendChild(dummy)
28 | }))
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Chris Hoage
 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 | 
23 | 


--------------------------------------------------------------------------------
/lib/browser.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | /*eslint-env browser */
 3 | 
 4 | module.exports = {
 5 |   /**
 6 |    * Create a <style>...</style> tag and add it to the document head
 7 |    * @param {string} cssText
 8 |    * @param {object?} options
 9 |    * @return {Element}
10 |    */
11 |   createStyle: function (cssText, options) {
12 |     var container = document.head || document.getElementsByTagName('head')[0]
13 |     var style = document.createElement('style')
14 |     options = options || {}
15 |     style.type = 'text/css'
16 |     if (options.href) {
17 |       style.setAttribute('data-href', options.href)
18 |     }
19 |     if (style.sheet) { // for jsdom and IE9+
20 |       style.innerHTML = cssText
21 |       style.sheet.cssText = cssText
22 |     }
23 |     else if (style.styleSheet) { // for IE8 and below
24 |       style.styleSheet.cssText = cssText
25 |     }
26 |     else { // for Chrome, Firefox, and Safari
27 |       style.appendChild(document.createTextNode(cssText))
28 |     }
29 |     if (options.prepend) {
30 |       container.insertBefore(style, container.childNodes[0]);
31 |     } else {
32 |       container.appendChild(style);
33 |     }
34 |     return style
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scssify",
 3 |   "version": "4.0.0",
 4 |   "description": "Sass browserify transformer",
 5 |   "repository": "cody-greene/scssify",
 6 |   "main": "./lib/index.js",
 7 |   "browser": "./lib/browser.js",
 8 |   "files": [
 9 |     "lib/"
10 |   ],
11 |   "scripts": {
12 |     "watch": "mocha tests/*.js -bwR min",
13 |     "test": "mocha tests/*.js -bR tap"
14 |   },
15 |   "keywords": [
16 |     "browserify",
17 |     "browserify-transform",
18 |     "css",
19 |     "postcss-runner",
20 |     "sass",
21 |     "scss",
22 |     "transform"
23 |   ],
24 |   "author": "Chris Hoage",
25 |   "license": "MIT",
26 |   "engines": {
27 |     "node": ">=14"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "extends": "./node_modules/@cody-greene/eslint-config/strict.yml",
32 |     "env": {
33 |       "node": true,
34 |       "es6": true
35 |     }
36 |   },
37 |   "devDependencies": {
38 |     "@cody-greene/eslint-config": "3.3.3",
39 |     "autoprefixer": "^10.4.0",
40 |     "jsdom": "^21.1.0",
41 |     "mocha": "^10.2.0",
42 |     "postcss": "^8.4.0"
43 |   },
44 |   "dependencies": {
45 |     "resolve": "^1.1.6",
46 |     "sass": "^1.59.2"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/tests/custom-importers.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | /* eslint-env mocha */
 3 | const assert = require('assert')
 4 | const integration = require('./util/integration')
 5 | const importSpy = require('./util/mock-importer').importedFiles
 6 | const factory = require('./util/mock-importer-factory')
 7 | 
 8 | before(function setup() {
 9 |   importSpy.clear()
10 | })
11 | 
12 | it('loads custom importer files', integration(__dirname + '/util/imports.scss', {
13 |   autoInject: false,
14 |   sass: {
15 |     importer: 'tests/util/mock-importer.js'
16 |   }
17 | }, function (context, done) {
18 |   const [firstFile] = Array.from(importSpy)
19 |   assert.equal(firstFile, 'resolve-to-vars', 'import spy was loaded')
20 |   done()
21 | }))
22 | 
23 | it('loads importer from factory function every time it runs', function (done) {
24 |   // this mimics browserify + factor-bundle calling the transform several times in a single process
25 |   let file = __dirname + '/util/imports.scss'
26 |   let config = {
27 |     autoInject: false,
28 |     sass: {
29 |       importerFactory: 'tests/util/mock-importer-factory.js'
30 |     }
31 |   }
32 |   integration(file, config, function (context, done) {
33 |     integration(file, config, function (context, done) {
34 |       let count = factory.count
35 |       assert.equal(count, 2, 'factory not called expected number of times')
36 |       done()
37 |     })(done)
38 |   })(done)
39 | })
40 | 


--------------------------------------------------------------------------------
/tests/util/integration.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const scssify = require('../../lib')
 3 | const JSDOM = require('jsdom').JSDOM
 4 | const fs = require('fs')
 5 | const vm = require('vm')
 6 | const CLIENT_HELPER_CODE = fs.readFileSync('lib/browser.js', 'utf8')
 7 | 
 8 | /**
 9 |  * @param {string} src Absolute path to a scss file
10 |  * @param {object} config scssify parameters
11 |  * @param {function} callback(context, assert)
12 |  * @param {function?} prepare(context)
13 |  * @return {function} Pass this to tape('test-name', fn)
14 |  */
15 | function createIntegrationTest(src, config, callback, prepare) {
16 |   if (!config._flags) config._flags = {}
17 |   return function (done) {
18 |     fs.createReadStream(src)
19 |     .on('error', done)
20 |     .pipe(scssify(src, config))
21 |     .on('error', done)
22 |     .once('data', function (transformed) {
23 |       let doc = new JSDOM(null, {runScripts: 'dangerously'})
24 |       let helperModule = {exports: {}}
25 |       let cssModule = {exports: {}}
26 |       vm.runInNewContext(CLIENT_HELPER_CODE, {
27 |         window: doc.window,
28 |         document: doc.window.document,
29 |         module: helperModule
30 |       })
31 |       if (prepare) prepare({
32 |         window: doc.window,
33 |         document: doc.window.document,
34 |         exports: cssModule.exports
35 |       })
36 |       vm.runInNewContext(transformed.toString(), {
37 |         window: doc.window,
38 |         document: doc.window.document,
39 |         module: cssModule,
40 |         require: function (req) {
41 |           if (req === 'scssify') return helperModule.exports
42 |           throw new Error('sandboxed module: unexpected require(...)')
43 |         }
44 |       })
45 |       callback({
46 |         window: doc.window,
47 |         document: doc.window.document,
48 |         exports: cssModule.exports
49 |       }, done)
50 |     })
51 |   }
52 | }
53 | 
54 | module.exports = createIntegrationTest
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ### scssify
  2 | Browserify transfomer to compile [sass][] stylesheets. Features:
  3 | - Inject a `<style>` tag at runtime or just export the compiled css as a string
  4 | - Correctly informs [watchify][] about any `@import`s
  5 | - Supports [postcss][]
  6 | - Handles sourcemaps
  7 | 
  8 | [![npm version](https://badge.fury.io/js/scssify.svg)](https://badge.fury.io/js/scssify)
  9 | 
 10 | #### Example
 11 | ```css
 12 | /* MyComponent.scss */
 13 | .MyComponent {
 14 |   color: red;
 15 |   background: blue;
 16 | }
 17 | ```
 18 | 
 19 | ```javascript
 20 | // MyComponent.js
 21 | require('./MyComponent.scss') // or .sass, or .css
 22 | console.log('MyComponent background is blue')
 23 | ```
 24 | 
 25 | #### Settings
 26 | 
 27 | ```javascript
 28 | const browserify = require('browserify')
 29 | const scssify = require('scssify')
 30 | browserify('entry.js')
 31 |   .transform(scssify, {
 32 |     // Disable/enable <style> injection; true by default
 33 |     autoInject: true,
 34 | 
 35 |     // Useful for debugging; adds data-href="src/foo.scss" to <style> tags
 36 |     autoInject: 'verbose',
 37 | 
 38 |     // This can be an object too
 39 |     autoInject: {
 40 |       verbose: false,
 41 | 
 42 |       // If true the <style> tag will be prepended to the <head>
 43 |       prepend: false
 44 |     },
 45 | 
 46 |     // require('./MyComponent.scss') === '.MyComponent{color:red;background:blue}'
 47 |     // autoInject: false, will also enable this
 48 |     // pre 1.x.x, this is enabled by default
 49 |     export: false,
 50 | 
 51 |     // Pass options to the compiler, check the node-sass project for more details
 52 |     sass: {
 53 |       // See the relevant node-sass documentation
 54 |       importer: 'custom-importers.js',
 55 | 
 56 |       // This will let the importer state be reset if scssify
 57 |       // is called several times within the same process, e.g. by factor-bundle
 58 |       // should export a factory function (which returns an importer function)
 59 |       // overrides opt.sass.importer
 60 |       importerFactory: 'custom-importer-factory.js',
 61 | 
 62 |       // Enable both of these to get source maps working
 63 |       // "browserify --debug" will also enable css sourcemaps
 64 |       sourceMapEmbed: true,
 65 |       sourceMapContents: true,
 66 | 
 67 |       // This is the default only when opt.sass is undefined
 68 |       outputStyle: 'compressed'
 69 |     },
 70 | 
 71 |     // Configure postcss plugins too!
 72 |     // postcss is a "soft" dependency so you may need to install it yourself
 73 |     postcss: {
 74 |       autoprefixer: {
 75 |         browsers: ['last 2 versions']
 76 |       }
 77 |     }
 78 |   })
 79 |   .bundle()
 80 | ```
 81 | 
 82 | Example config using `package.json`:
 83 | ```json
 84 | {
 85 |   "browserify": {
 86 |     "transform": [
 87 |       ["scssify", {
 88 |         "sass": {
 89 |           "outputStyle": "compressed",
 90 |           "importerFactory": "custom-importers.js",
 91 |           "includePaths": ["node_modules", "bower_components"]
 92 |         }
 93 |       }],
 94 |     ]
 95 |   },
 96 | }
 97 | ```
 98 | 
 99 | Command line usage:
100 | ```
101 | $ browserify MyComponent.js -t scssify >bundle.js
102 | ```
103 | 
104 | [sass]: http://sass-lang.com
105 | [postcss]: https://github.com/postcss/postcss
106 | [watchify]: https://github.com/substack/watchify
107 | 


--------------------------------------------------------------------------------
/history.md:
--------------------------------------------------------------------------------
 1 | ## 2023-03-12 v4.0.0
 2 | Breaking changes:
 3 | - Swap out the `node-sass` (deprecated) package for `sass` ([Dart Sass](https://sass-lang.com/dart-sass) @^1.59.2)
 4 | - Custom importer functions are only called **after** attempting to load the file from disk. `node-sass` passed imports to custom importers before loading them relative to the file in which the `@import` appears. This behavior is considered incorrect because it violates the principle of *locality*, which says that it should be possible to reason about a stylesheet without knowing everything about how the entire system is set up. If a user tries to import a stylesheet relative to another stylesheet, that import should *always* work. It shouldn’t be possible for some configuration somewhere else to break it. See here for more detail: [LegacySharedOptions.importer](https://sass-lang.com/documentation/js-api/interfaces/LegacySharedOptions#importer)
 5 | - The "file" event emits the entry file too
 6 | - Supports node 14, 16, 18
 7 | 
 8 | ## 2017-11-08 v3.0.1
 9 | - adds check before displaying postcss warnings [#31](https://github.com/cody-greene/scssify/pull/31)
10 | 
11 | ## 2017-10-25 v3.0.0
12 | - upgrade to node-sass@4.5.3
13 | - any warnings generated by postcss will now be printed to stderr
14 | - supply `from` and `to` options to postcss. Thanks to [#28](https://github.com/cody-greene/scssify/pull/28)
15 | - pretty print postcss syntax errors
16 | - If autoInject=false or export=true and you want CSS as a string you should now just use `require('./foo.scss')` instead of `require('./foo.scss').css` thanks to [#29](https://github.com/cody-greene/scssify/pull/29)
17 | 
18 | ## 2017-04-27 v2.3.0
19 | - add autoInject.prepend [#27](https://github.com/cody-greene/scssify/pull/27)
20 | 
21 | ## 2016-12-22 v2.2.1
22 | - fix a crash related to autoprefixer [#25](https://github.com/cody-greene/scssify/pull/25)
23 | 
24 | ## 2016-11-02 v2.2.0
25 | Bump node-sass to `^3.10.1` from `^3.3.1` to ensure node 7 support.
26 | 
27 | Also upgraded some dev dependencies.
28 | 
29 | ## 2016-08-10 v2.1.0
30 | Breaking changes:
31 | - removed `useNodeEnv` option; this was a bad idea.
32 | 
33 | New features:
34 | - browserify's `--debug` option will also enable css sourcemaps. No extra configuration needed!
35 | 
36 | ## 2016-08-09 v2.0.0
37 | Breaking changes:
38 | - `<link>` tag injection removed. `<style>` tags are now the default [#14](https://github.com/cody-greene/scssify/issues/14)
39 | - `opt.autoInject` may now be one of `true|false|'verbose'`
40 | - `postcss` is no longer a hard dependency. Install it yourself if you need it.
41 | 
42 | New features:
43 | - added `useNodeEnv` option. Will enable sourcemaps if `process.env.NODE_ENV !== 'production'` otherwise uses `'compressed'` output
44 | 
45 | Fixes:
46 | - use pre-formatted error text from node-sass
47 | - handle postcss errors
48 | - sourcemaps should work [#15](https://github.com/cody-greene/scssify/issues/15)
49 | 
50 | ## 2016-06-16 v1.2.0
51 | New features:
52 | - [[`2963d08`](https://github.com/cody-greene/scssify/commit/2963d08)] allowing for importer factory functions - this will let the importer state be reset if scssify is called several times within the same process, e.g. by factor-bundle
53 | 
54 | ## 2016-05-16 v1.1.0
55 | New features:
56 | - [[`002a0ad`](https://github.com/cody-greene/scssify/commit/002a0ad)] load custom importer files: this means you can set a custom sass importer in `package.json:browserify.transform`, like the `--importer` flag when using `node-sass` directly
57 | 
58 | ## 2016-04-20 v1.0.0 *breaking changes*
59 | The project is no longer transpiled before publishing; Node.js `4.0.0` & up is now required. The package is also a bit smaller now since the `lodash` and `browserify-transform-tools` dependencies have been removed. Hurray for fewer dependencies!
60 | 
61 | New features:
62 | - [[`0d00236`](https://github.com/cody-greene/scssify/commit/0d00236)] add `--export` option, default: `false`, this means that raw css is no longer exported, greatly reducing file-size if you're just using autoInjection
63 | 
64 | ## 2016-04-17 v0.3.8
65 | Under new management. [Chris Hoage](https://github.com/chrishoage) has transferred this project over to me so here's a long awaited bugfix!
66 | 
67 | - [[`507d912`](https://github.com/cody-greene/scssify/commit/507d912)] inform browserify about @imported files [#1](https://github.com/cody-greene/scssify/issues/1)
68 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const merge = Object.assign
  3 | const path = require('path')
  4 | const resolve = require('resolve')
  5 | const sass = require('sass')
  6 | const TransformStream = require('stream').Transform
  7 | const CWD = process.cwd()
  8 | const TARGET_FILE_EXT = /\.(css|scss|sass)$/
  9 | const MODULE_NAME = path.basename(path.dirname(__dirname))
 10 | const DEFAULT_CONFIG = {
 11 |   autoInject: true,
 12 |   sass: {
 13 |     outputStyle: 'compressed'
 14 |   }
 15 | }
 16 | 
 17 | function scssify(file, content, config, stream, done) {
 18 |   const options = merge({}, DEFAULT_CONFIG, config)
 19 |   const sassOpts = merge({}, options.sass)
 20 |   let postcss = null
 21 |   sassOpts.includePaths = sassOpts.includePaths || []
 22 |   sassOpts.includePaths.unshift(path.dirname(file))
 23 |   sassOpts.indentedSyntax = /\.sass$/i.test(file)
 24 |   sassOpts.file = file
 25 |   sassOpts.data = content
 26 |   sassOpts.outFile = file
 27 |   if (typeof sassOpts.importer === 'string') {
 28 |     sassOpts.importer = require(path.resolve(sassOpts.importer))
 29 |   }
 30 |   else if (typeof sassOpts.importerFactory === 'string') {
 31 |     sassOpts.importer = require(path.resolve(sassOpts.importerFactory))()
 32 |   }
 33 |   if (config._flags.debug) {
 34 |     // "browserify --debug" was used, enable CSS sourcemaps!
 35 |     sassOpts.sourceMapEmbed = true
 36 |     sassOpts.sourceMapContents = true
 37 |     sassOpts.outputStyle = 'expanded'
 38 |   }
 39 |   if (options.postcss && typeof options.postcss !== 'object') {
 40 |     return done(new Error('postcss config must be false or an object of plugins'))
 41 |   }
 42 |   if (options.postcss) try {
 43 |     postcss = require('postcss')
 44 |   }
 45 |   catch (err) {
 46 |     return done(new Error('postcss is missing; npm install --save postcss'))
 47 |   }
 48 |   const postcssTransforms = options.postcss ? Object.keys(options.postcss).map((pluginName) => {
 49 |     const pluginOpts = options.postcss[pluginName]
 50 |     const plugin = require(resolve.sync(pluginName, {basedir: CWD}))
 51 |     return plugin(pluginOpts)
 52 |   }) : null
 53 |   sass.render(sassOpts, function (err, firstResult) {
 54 |     if (err) done(new SyntaxError(err.formatted))
 55 |     else if (options.postcss) {
 56 |       postcss(postcssTransforms).process(firstResult.css, {
 57 |         from: file,
 58 |         to: file,
 59 |         map: {
 60 |           inline: sassOpts.sourceMapEmbed,
 61 |           prev: sassOpts.sourceMapEmbed && firstResult.map ? firstResult.map.toString() : null
 62 |         }
 63 |       }).then(generateModule).catch(err => {
 64 |         if (err.name === 'CssSyntaxError') {
 65 |           console.error(err.message + err.showSourceCode())
 66 |           done(new Error('postcss syntax error'))
 67 |         }
 68 |         else {
 69 |           done(err)
 70 |         }
 71 |       })
 72 |     }
 73 |     else generateModule(firstResult)
 74 |     function generateModule(result) {
 75 |       // Show any postcss warnings
 76 |       if (result.warnings) {
 77 |         result.warnings().forEach(item => console.error(item.toString()))
 78 |       }
 79 | 
 80 |       let href = path.relative(CWD, file)
 81 |       let cssString = result.css.toString()
 82 |       if (sassOpts.sourceMapEmbed) {
 83 |         // <style> tag sourcemaps also need this to work
 84 |         cssString += `\n/*# sourceURL=${href} */\n`
 85 |       }
 86 |       let out = 'var css = ' + JSON.stringify(cssString)
 87 |       if (options.autoInject) {
 88 |         let autoInjectOptions = JSON.stringify({
 89 |           href: (options.autoInject === 'verbose' || options.autoInject.verbose) && href,
 90 |           prepend: options.autoInject.prepend
 91 |         })
 92 |         out += `\nmodule.exports = require('${MODULE_NAME}').createStyle(css, ${autoInjectOptions})`
 93 |       }
 94 |       if (options.export || !options.autoInject) {
 95 |         out += '\nmodule.exports = css'
 96 |       }
 97 |       emitDependencies(stream, firstResult.stats.includedFiles)
 98 |       stream.push(out)
 99 |       done()
100 |     }
101 |   })
102 | }
103 | 
104 | /**
105 |  * Let browserify/watchify know about nested imports
106 |  * Without these events watchify will not rebundle when a "@imported" file is changed
107 |  * @param {EventEmitter} stream
108 |  * @param {string[]} deps
109 |  */
110 | function emitDependencies(stream, deps) {
111 |   for (let index = 0; index < deps.length; ++index)
112 |     stream.emit('file', deps[index])
113 | }
114 | 
115 | module.exports = function (file, config) {
116 |   if (!file.match(TARGET_FILE_EXT)) return through()
117 |   return collect(function (content, done) {
118 |     scssify(file, content.toString('utf8'), config, this, done)
119 |   })
120 | }
121 | 
122 | /**
123 |  * @param {function} flush(bufferedContent, done)
124 |  * @return {DuplexStream}
125 |  */
126 | function collect(flush) {
127 |   let buf = []
128 |   return through(function (chunk, enc, next) {
129 |     buf.push(chunk)
130 |     next()
131 |   }, function (done) {
132 |     flush.call(this, Buffer.concat(buf), done)
133 |   })
134 | }
135 | 
136 | /**
137 |  * Quickly create a object-mode duplex stream
138 |  * @param {function?} transform(chunk, encoding, done)
139 |  * @param {function?} flush(done)
140 |  * @param {boolean} objectMode
141 |  * @return {DuplexStream}
142 |  */
143 | function through(transform, flush, objectMode) {
144 |   const stream = new TransformStream({objectMode})
145 |   stream._transform = transform || pass
146 |   if (flush) stream._flush = flush
147 |   return stream
148 | }
149 | 
150 | function pass(chunk, _, done) {
151 |   done(null, chunk)
152 | }
153 | 


--------------------------------------------------------------------------------