diff --git a/README.md b/README.md index 91ae0a4..882e1eb 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,10 @@ this transform. We recommend: - [`postcss-cli`][postcss-cli] (v3 or later) - [`gulp-postcsssrc`][gulp-postcssrc] +Finally, it's worth noting that this transform also adds a comment to the +generated code indicating the related CSS file so that it can be processed by +other tools, i.e. [`relateify`][relateify]. + ### PostCSS Load Config Context #### `extractModules(_: any, modules: object)` @@ -90,6 +94,12 @@ The function accepts two arguments. The transform uses only the second value passed to the function. That value is the object value that replaces the `import`/`require`. +## Using with Browserify & Watchify + +This will work well with the [`babelify`][babelify] transform, but if you're +using [`watchify`][watchify], you will want to add the [`relateify`][relateify] +transform in order to ensure that changes to CSS files rebuild the appropriate +JS files. ## Prior Art @@ -113,6 +123,9 @@ This project is distributed under the MIT license. [css-modules-transform]: https://github.com/michalkvasnicak/babel-plugin-css-modules-transform [css-modules-require-hook]: https://github.com/css-modules/css-modules-require-hook [gulp-postcssrc]: https://github.com/michael-ciniawsky/gulp-postcssrc +[babelify]: https://github.com/babel/babelify +[watchify]: https://github.com/substack/watchify +[relateify]: https://github.com/wbyoung/relateify [travis-image]: http://img.shields.io/travis/wbyoung/babel-plugin-transform-postcss.svg?style=flat [travis-url]: http://travis-ci.org/wbyoung/babel-plugin-transform-postcss diff --git a/src/plugin.js b/src/plugin.js index 5940b60..c2e094d 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -80,11 +80,20 @@ export default function transformPostCSS({ types: t }: any): any { }).toString('utf8'); const tokens = JSON.parse(result || '{}'); - path.replaceWith(new t.ObjectExpression( + const expression = path.findParent((test) => ( + test.isVariableDeclaration() || + test.isExpressionStatement() + )); + + expression.addComment( + 'trailing', ` @related-file ${stylesheetPath}`, true + ); + + path.replaceWith(t.objectExpression( Object.keys(tokens).map( - (token) => new t.ObjectProperty( - new t.StringLiteral(token), - new t.StringLiteral(tokens[token]) + (token) => t.objectProperty( + t.stringLiteral(token), + t.stringLiteral(tokens[token]) ) ) )); diff --git a/test/fixtures/import.expected.js b/test/fixtures/import.expected.js index af13ba0..ac5d5b8 100644 --- a/test/fixtures/import.expected.js +++ b/test/fixtures/import.expected.js @@ -2,7 +2,7 @@ var _simple = { "simple": "_simple_jvai8_1" -}; +}; // @related-file ./simple.css var _simple2 = _interopRequireDefault(_simple); diff --git a/test/fixtures/require.expected.empty.js b/test/fixtures/require.expected.empty.js index 4e9922c..778191b 100644 --- a/test/fixtures/require.expected.empty.js +++ b/test/fixtures/require.expected.empty.js @@ -1,3 +1,3 @@ 'use strict'; -var styles = {}; +var styles = {}; // @related-file ./simple.css diff --git a/test/fixtures/require.expected.js b/test/fixtures/require.expected.js index 3b18dc0..7eb9528 100644 --- a/test/fixtures/require.expected.js +++ b/test/fixtures/require.expected.js @@ -2,4 +2,4 @@ var styles = { 'simple': '_simple_jvai8_1' -}; +}; // @related-file ./simple.css