Merge pull request #33 from css-modules/preprocess-css

preprocessCss option

Author: mightyaleksey

README.md

@@ -32,6 +32,7 @@ $ npm i css-modules-require-hook
 
  * `function` **createImportedName** — short alias for the [postcss-modules-extract-imports](https://github.com/css-modules/postcss-modules-extract-imports) plugin's `createImportedName` option.
  * `function` **generateScopedName** — short alias for the [postcss-modules-scope](https://github.com/css-modules/postcss-modules-scope) plugin's option. Helps you to specify the custom way to build generic names for the class selectors.
+ * `function` **preprocessCss** — in rare cases you may want to precompile styles, before they will be passed to the postcss pipeline. You should use **synchronous** transformations, since `require` function is synchronous.
  * `function` **processCss** — in rare cases you may want to get compiled styles in runtime, so providing this option helps.
  * `string`   **rootDir** — absolute path to the project directory. Providing this will result in better generated class names. It can be obligatory, if you run require hook and build tools (like [css-modulesify](https://github.com/css-modules/css-modulesify)) from different working directories.
  * `string`   **to** — provides `to` option to the [LazyResult instance](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts).

src/index.js

@@ -16,7 +16,7 @@ import Parser from './parser';
 let importNr = 0;
 let tokensByFile = {};
 // processing functions
-const preProcess = identity;
+let preProcess = identity;
 let postProcess;
 // defaults
 let lazyResultOpts = {};
@@ -27,6 +27,7 @@ let rootDir = process.cwd();
  * @param  {object}   opts
  * @param  {function} opts.createImportedName
  * @param  {function} opts.generateScopedName
+ * @param  {function} opts.preprocessCss
  * @param  {function} opts.processCss
  * @param  {string}   opts.rootDir
  * @param  {string}   opts.to
@@ -37,6 +38,7 @@ export default function setup(opts = {}) {
   importNr = 0;
   tokensByFile = {};
 
+  preProcess = get('preprocessCss', null, 'function', opts) || identity;
   postProcess = get('processCss', null, 'function', opts) || null;
   rootDir = get('rootDir', ['root', 'd'], 'string', opts) || process.cwd();
   // https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts

test/plugins.js

@@ -7,6 +7,11 @@ import LocalByDefault from 'postcss-modules-local-by-default';
 import Scope from 'postcss-modules-scope';
 
 describe('plugins', () => {
+  beforeEach(() => {
+    // clearing cache
+    delete require.cache[require.resolve('awesome-theme/oceanic.css')];
+  });
+
   describe('custom generateScopedName() function', () => {
     before(() => hook({generateScopedName: identity}));
 

test/public-api.js

@@ -0,0 +1,30 @@
+import { constant } from 'lodash';
+import { equal, ok } from 'assert';
+import hook from '../src';
+
+describe('public api', () => {
+  beforeEach(() => {
+    // clearing cache
+    delete require.cache[require.resolve('awesome-theme/oceanic.css')];
+  });
+
+  describe('preprocessCss', () => {
+    describe('providing empty string constantly', () => {
+      before(() => hook({preprocessCss: constant('')}));
+
+      it('should return an empty result', () => {
+        const tokens = require('awesome-theme/oceanic.css');
+        equal(Object.keys(tokens).length, 0);
+      });
+    });
+
+    describe('providing nothing should reset preProcess', () => {
+      before(() => hook());
+
+      it('should return the "color" token', () => {
+        const tokens = require('awesome-theme/oceanic.css');
+        ok(tokens.color);
+      });
+    });
+  });
+});