accumulate generated css styles for imported/required css files

README.md

@@ -74,6 +74,7 @@ npm install --save-dev babel-plugin-css-modules-transform
                     "npm-module-name",
                     "./path/to/module-exporting-a-function.js"
                 ],
+                "extractCss": "./dist/stylesheets/combined.css"
             }
         ]
     ]
@@ -116,6 +117,54 @@ and then add any relevant extensions to your plugin config:
 
 ```
 
+## Extract CSS Files
+
+When you publish a library, you might want to ship compiled css files as well to
+help integration in other projects.
+
+An more complete alternative is to use
+[babel-plugin-webpack-loaders](https://github.com/istarkov/babel-plugin-webpack-loaders)
+but be aware that a new webpack instance is run for each css file, this has a
+huge overhead. If you do not use fancy stuff, you might consider using
+[babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)
+instead.
+
+
+To combine all css files in a single file, give its name:
+
+```
+{
+    "plugins": [
+        [
+            "css-modules-transform", {
+                "extractCss": "./dist/stylesheets/combined.css"
+            }
+        ]
+    ]
+}
+```
+
+To extract all files in a single directory, give an object:
+
+```
+{
+    "plugins": [
+        [
+            "css-modules-transform", {
+                "extractCss": {
+                    dir: "./dist/stylesheets/",
+                    relativeRoot: "./src/",
+                    filename: "[path]/[name].css"
+                }
+            }
+        ]
+    ]
+}
+```
+
+Note that `relativeRoot` is used to resolve relative directory names, available
+as `[path]` in `filename` pattern.
+
 ## Using a `babel-register`
 
 Make sure you set `ignore` option of `babel-register` to ignore all files used by css-modules-require-hook to process your css files.
@@ -124,7 +173,7 @@ Make sure you set `ignore` option of `babel-register` to ignore all files used b
 
 ```js
 require('babel-register')({
-    ignore: /processCss\.js$/ // regex matching all files used by css-modules-require-hook to process your css files 
+    ignore: /processCss\.js$/ // regex matching all files used by css-modules-require-hook to process your css files
 })
 ```
 
@@ -134,7 +183,7 @@ Create a js file with content
 
 ```js
 require('babel-register')({
-    ignore: /processCss\.js$/ // regex matching all files used by css-modules-require-hook to process your css files 
+    ignore: /processCss\.js$/ // regex matching all files used by css-modules-require-hook to process your css files
 })
 ```
 

package.json

@@ -25,7 +25,8 @@
   },
   "homepage": "https://github.com/michalkvasnicak/babel-plugin-css-modules-transform#readme",
   "dependencies": {
-    "css-modules-require-hook": "^3.0.0"
+    "css-modules-require-hook": "^3.0.0",
+    "mkdirp": "^0.5.1"
   },
   "devDependencies": {
     "babel-cli": "^6.1.18",
@@ -49,7 +50,8 @@
     "postcss-modules-extract-imports": "^1.x",
     "postcss-modules-local-by-default": "^1.x",
     "postcss-modules-scope": "^1.x",
-    "postcss-modules-values": "^1.x"
+    "postcss-modules-values": "^1.x",
+    "rimraf": "^2.5.4"
   },
   "engines": {
     "node": ">=4.0.0"

src/index.js

@@ -1,4 +1,22 @@
-import { resolve, dirname, isAbsolute } from 'path';
+import { resolve, dirname, basename, extname, isAbsolute, join, relative } from 'path';
+
+import mkdirp from 'mkdirp';
+// *
+import { writeFileSync, appendFileSync } from 'fs';
+/* /
+const writeFileSync = (file, content) => {
+    console.log(`Will save ${file}\n${content.replace(/^/gm, '  ')}`);
+};
+// */
+
+const writeCssFile = (filename, content) => {
+    mkdirp.sync(dirname(filename));
+    writeFileSync(filename, content);
+};
+const appendCssFile = (filename, content) => {
+    mkdirp.sync(dirname(filename));
+    appendFileSync(filename, content);
+};
 
 const simpleRequires = [
     'createImportedName',
@@ -52,17 +70,78 @@ export default function transformCssModules({ types: t }) {
 
     return {
         visitor: {
-            Program(path, { opts }) {
+            Program(path, state) {
                 if (initialized) {
                     return;
                 }
 
-                const currentConfig = { ...defaultOptions, ...opts };
+                const currentConfig = { ...defaultOptions, ...state.opts };
+                // this is not a css-require-ook config
+                delete currentConfig.extractCss;
 
                 // match file extensions, speeds up transform by creating one
                 // RegExp ahead of execution time
                 matchExtensions = matcher(currentConfig.extensions);
 
+                // Add a space in current state for css filenames
+                state.$$css = {
+                    styles: new Map()
+                };
+
+                const extractCssFile = (filepath, css) => {
+                    const { extractCss = null } = state.opts;
+                    if (!extractCss) return null;
+
+                    // this is the case where a single extractCss is requested
+                    if (typeof(extractCss) === 'string') {
+                        // If this is the first file, then we should replace
+                        // old content
+                        if (state.$$css.styles.size === 1) {
+                            return writeCssFile(extractCss, css);
+                        }
+                        // this should output in a single file.
+                        // Let's append the new file content.
+                        return appendCssFile(extractCss, css);
+                    }
+
+                    // This is the case where each css file is written in
+                    // its own file.
+                    const {
+                        dir = 'dist',
+                        filename = '[name].css',
+                        relativeRoot = ''
+                    } = extractCss;
+
+                    // Make css file narmpe relative to relativeRoot
+                    const relativePath = relative(
+                        resolve(process.cwd(), relativeRoot),
+                        filepath
+                    );
+                    const destination = join(
+                        resolve(process.cwd(), dir),
+                        filename
+                    )
+                        .replace(/\[name]/, basename(filepath, extname(filepath)))
+                        .replace(/\[path]/, relativePath);
+
+                    writeCssFile(destination, css);
+                };
+
+                const pushStylesCreator = (toWrap) => (css, filepath) => {
+                    let processed;
+                    if (typeof toWrap === 'function') {
+                        processed = toWrap(css, filepath);
+                    }
+                    if (typeof processed !== 'string') processed = css;
+
+                    if (!state.$$css.styles.has(filepath)) {
+                        state.$$css.styles.set(filepath, processed);
+                        extractCssFile(filepath, processed);
+                    }
+
+                    return processed;
+                };
+
                 // check if there are simple requires and if they are functions
                 simpleRequires.forEach(key => {
                     if (typeof currentConfig[key] !== 'string') {
@@ -108,6 +187,9 @@ export default function transformCssModules({ types: t }) {
                     }
                 });
 
+                // wrap or define processCss function that collect generated css
+                currentConfig.processCss = pushStylesCreator(currentConfig.processCss);
+
                 complexRequires.forEach(key => {
                     if (!currentConfig.hasOwnProperty(key)) {
                         return;
@@ -142,6 +224,18 @@ export default function transformCssModules({ types: t }) {
                 initialized = true;
             },
 
+            ImportDeclaration(path, { file }) {
+                // this method is called between enter and exit, so we can map css to our state
+                // it is then replaced with require call which will be handled in seconds pass by CallExpression
+                // CallExpression will then replace it or remove depending on parent node (if is Program or not)
+                const { value } = path.node.source;
+
+                if (matchExtensions.test(value)) {
+                    const requiringFile = file.opts.filename;
+                    requireCssFile(requiringFile, value);
+                }
+            },
+
             CallExpression(path, { file }) {
                 const { callee: { name: calleeName }, arguments: args } = path.node;
 
@@ -152,25 +246,24 @@ export default function transformCssModules({ types: t }) {
                 const [{ value: stylesheetPath }] = args;
 
                 if (matchExtensions.test(stylesheetPath)) {
-                    // if parent expression is variable declarator, replace right side with tokens
-                    if (!t.isVariableDeclarator(path.parent)) {
-                        throw new Error(
-                            `You can't import css file ${stylesheetPath} to a module scope.`
-                        );
-                    }
-
                     const requiringFile = file.opts.filename;
                     const tokens = requireCssFile(requiringFile, stylesheetPath);
 
-                    /* eslint-disable new-cap */
-                    path.replaceWith(t.ObjectExpression(
+                    // if parent expression is not a Program, replace expression with tokens
+                    // Otherwise remove require from file, we just want to get generated css for our output
+                    if (!t.isExpressionStatement(path.parent)) {
+                        /* eslint-disable new-cap */
+                        path.replaceWith(t.ObjectExpression(
                             Object.keys(tokens).map(
                                 token => t.ObjectProperty(
-                                t.StringLiteral(token),
-                                t.StringLiteral(tokens[token])
+                                    t.StringLiteral(token),
+                                    t.StringLiteral(tokens[token])
+                                )
                             )
-                        )
-                    ));
+                        ));
+                    } else {
+                        path.remove();
+                    }
                 }
             }
         }

test/fixtures/exctractcss.include.js

@@ -0,0 +1 @@
+require('../styles.css');

test/fixtures/exctractcss.main.expected.js

@@ -0,0 +1,3 @@
+'use strict';
+
+require('./exctractcss.include.js');

test/fixtures/exctractcss.main.js

@@ -0,0 +1,2 @@
+require('./exctractcss.include.js');
+require('../parent.css');

test/fixtures/extractcss.combined.expected.css

@@ -0,0 +1,6 @@
+.parent__block___33Sxl {
+    display: block;
+}
+.styles__className___385m0 {
+    color: red;
+}

test/fixtures/extractcss.parent.expected.css

@@ -0,0 +1,3 @@
+.parent__block___33Sxl {
+    display: block;
+}

test/fixtures/extractcss.styles.expected.css

@@ -0,0 +1,3 @@
+.styles__className___385m0 {
+    color: red;
+}

test/fixtures/import.expected.js

@@ -6,4 +6,4 @@ var _styles = {
 
 var _styles2 = _interopRequireDefault(_styles);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }