Merge pull request #51 from css-modules/sullenor/development-mode

cache invalidation in the development mode

Author: mightyaleksey

README.md

@@ -32,6 +32,14 @@ $ npm i css-modules-require-hook
 
 In this section I've tried to cover the common cases of usage.
 
+### Development mode
+
+Usually, Node.js caches all the `require` calls by default. In order to invalidate cache for the purpose of development you should set the environment variable `NODE_ENV` to `development`. For example:
+
+```bash
+$ NODE_ENV=development node server.js
+```
+
 ### Basic example
 
 Basically to attach the require hook you need to require this module. If you need to adjust it see the tuning section below.

package.json

@@ -53,7 +53,7 @@
     "fixture": "webpack",
     "start": "esw -w .",
     "lint": "eslint .",
-    "test": "mocha --compilers js:babel/register",
+    "test": "mocha --compilers js:babel/register --timeout 5000",
     "test:cov": "`npm bin`/babel-node `npm bin`/isparta cover --report text --report html `npm bin`/_mocha",
     "test:gen": "babel-node generate-tests",
     "build": "babel src --out-dir dist",

src/index.js

@@ -67,9 +67,15 @@ function fetch(to, from) {
   // https://github.com/postcss/postcss/blob/master/docs/api.md#lazywarnings
   lazyResult.warnings().forEach(message => console.warn(message.text));
 
-  // updating cache
   tokens = lazyResult.root.tokens;
-  tokensByFile[filename] = tokens;
+
+  if (process.env.NODE_ENV !== 'development') {
+    // updating cache
+    tokensByFile[filename] = tokens;
+  } else {
+    // clearing cache in development mode
+    delete require.cache[filename];
+  }
 
   if (postProcess) {
     postProcess(lazyResult.css, filename);

test/cache.js

@@ -0,0 +1,57 @@
+import { equal } from 'assert';
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+import { dropCache } from '../utils/sugar';
+import hook from '../src';
+
+const fixture = join(__dirname, 'fixture/dynamic.css');
+
+function updateFile(content) {
+  writeFileSync(fixture, content, 'utf8');
+}
+
+describe('development mode', () => {
+  describe('should cache calls not in development mode', () => {
+    before(() => {
+      hook();
+      updateFile('.block\n{\n  display: block;\n}');
+      process.env.NODE_ENV = '';
+      require(fixture);
+      updateFile('.inline-block\n{\n  display: inline-block;\n}');
+    });
+
+    after(() => {
+      process.env.NODE_ENV = '';
+      dropCache(fixture);
+    });
+
+    it('should retrive data from cache', () => {
+      const tokens = require(fixture);
+      const keys = Object.keys(tokens);
+      equal(keys.length, 1);
+      equal(keys.join(''), 'block');
+    });
+  });
+
+  describe('should clear cache in development mode', () => {
+    before(() => {
+      hook();
+      updateFile('.block\n{\n  display: block;\n}');
+      process.env.NODE_ENV = 'development';
+      require(fixture);
+      updateFile('.inline-block\n{\n  display: inline-block;\n}');
+    });
+
+    after(() => {
+      process.env.NODE_ENV = '';
+      dropCache(fixture);
+    });
+
+    it('should retrive data from fs', () => {
+      const tokens = require(fixture);
+      const keys = Object.keys(tokens);
+      equal(keys.length, 1);
+      equal(keys.join(''), 'inline-block');
+    });
+  });
+});

test/fixture/dynamic.css

@@ -0,0 +1,4 @@
+.inline-block
+{
+  display: inline-block;
+}