feat(plugin): Support for postcss-modules

If you are using postcss-modules the plugin has to be able to create a typescript file with the
transformed classes

close #5

Author: ezavile

src/buildFile.ts

@@ -8,9 +8,15 @@ const filename = path.basename(file.cssFileName, '.postcss');
 return (
 `export const ${filename}Style = {
   ${
-    file.content.map((c: string) => {
-      return ` ${camelCase(c)}: '${c}'\n`;
-    })
+    file.content instanceof Array ? (
+      file.content.map((c: string) => {
+        return ` ${camelCase(c)}: '${c}'\n`;
+      })
+    ) : (
+      Object.keys(file.content).map((c: string) => {
+        return ` ${camelCase(c)}: '${(<{[key: string]: string }>file.content)[c]}'\n`;
+      })
+    )
   },
 };
 `

src/namespace/PostcssTypescriptCss.ts

@@ -1,6 +1,6 @@
 export namespace PostcssTypescriptCss {
   export interface Options {
     cssFileName: string;
-    content: string[];
+    content: { [key: string]: string } | string[];
   }
 }

src/postcss-typescript-css.ts

@@ -7,22 +7,27 @@ import saveFile from './saveFile';
 const postcssTypescriptCss = postcss.plugin<PostcssTypescriptCss.Options>('postcss-typescript-css', (opts) => {
     return (css, result) => {
       return new Promise((resolve, reject) => {
-        const classes = new Set();
-        css.walk((node: postcss.Rule) => {
-          if (node.type === 'rule') {
-            parser((selectors: postcss.Rule) => {
-              selectors.walk((selector: any) => {
-                if (selector.type === 'class') {
-                  classes.add(selector.value);
-                }
-              });
-            }).process(node.selector).result;
-          }
-        });
-        opts = {
-          cssFileName: css.source.input.file,
-          content: [...classes],
-        };
+        if (opts) {
+          if (!opts.cssFileName) reject('The property cssFileName can not be null');
+          if (!opts.content) reject('The property content can not be null');
+        } else {
+          const classes = new Set();
+          css.walk((node: postcss.Rule) => {
+            if (node.type === 'rule') {
+              parser((selectors: postcss.Rule) => {
+                selectors.walk((selector: any) => {
+                  if (selector.type === 'class') {
+                    classes.add(selector.value);
+                  }
+                });
+              }).process(node.selector).result;
+            }
+          });
+          opts = {
+            cssFileName: css.source.input.file,
+            content: [...classes],
+          };
+        }
         saveFile(opts)
         .then(() => {
           resolve();

src/spec/buildFile.spec.ts

@@ -11,3 +11,18 @@ test('should create a string with the classes as a properties', t => {
   t.true(template.includes('fakeComponentDescendentName:'));
   t.true(template.includes('fakeComponentModifierName:'));
 });
+
+test('should create a string with transformed classes', t => {
+  const template = build({
+    cssFileName: 'fakeComponentModules',
+    content: {
+      fakeComponentModules: '_FakeComponentModules_h7423_1',
+      fakeComponentModulesDescendentName: '_FakeComponentModules-descendentName_h7423_1',
+      fakeComponentModulesModifierName: '_FakeComponentModules--modifierName_h7423_1'
+    }
+  });
+  t.true(template.includes('fakeComponentModulesStyle'));
+  t.true(template.includes('fakeComponentModules:'));
+  t.true(template.includes('fakeComponentModulesDescendentName:'));
+  t.true(template.includes('fakeComponentModulesModifierName:'));
+});

src/spec/postcss-typescript-css.spec.ts

@@ -6,17 +6,35 @@ import * as postcss from 'postcss';
 import { PostcssTypescriptCss } from '../namespace/PostcssTypescriptCss';
 import * as plugin from '../postcss-typescript-css';
 
-function run(t: TestContext, input: {css: string, from: string}) {
-  return postcss([ plugin ]).process(input.css, { from: input.from })
+function run(t: TestContext, input: {css: string, from: string}, opts?: PostcssTypescriptCss.Options) {
+  return postcss([ plugin(opts) ]).process(input.css, { from: input.from })
   .then((result) => {
-    const fakeComponentTS = readFileSync(path.join(__dirname, 'postcss/fakeComponent.ts'), 'utf8');
-    t.true(fakeComponentTS.includes('fakeComponentStyle'));
-    t.true(fakeComponentTS.includes('fakeComponent:'));
-    t.true(fakeComponentTS.includes('fakeComponentDescendentName:'));
-    t.true(fakeComponentTS.includes('fakeComponentModifierName:'));
+    let fakeComponentTS;
+    if (opts) {
+      fakeComponentTS = readFileSync(path.join(__dirname, 'postcss/fakeComponentModules.ts'), 'utf8');
+      t.true(fakeComponentTS.includes('fakeComponentModulesStyle'));
+      t.true(fakeComponentTS.includes('fakeComponentModules:'));
+      t.true(fakeComponentTS.includes('fakeComponentModulesDescendentName:'));
+      t.true(fakeComponentTS.includes('fakeComponentModulesModifierName:'));
+    } else {
+      fakeComponentTS = readFileSync(path.join(__dirname, 'postcss/fakeComponent.ts'), 'utf8');
+      t.true(fakeComponentTS.includes('fakeComponentStyle'));
+      t.true(fakeComponentTS.includes('fakeComponent:'));
+      t.true(fakeComponentTS.includes('fakeComponentDescendentName:'));
+      t.true(fakeComponentTS.includes('fakeComponentModifierName:'));
+    }
   })
   .catch((err: string) => {
-    t.true(err.includes('TypeError: Path must be a string'));
+    if (opts) {
+      if (!opts.cssFileName) {
+        t.is(err, 'The property cssFileName can not be null');
+      }
+      if (!opts.content) {
+        t.is(err, 'The property content can not be null');
+      }
+    } else {
+      t.true(err.includes('TypeError: Path must be a string'));
+    }
   });
 }
 
@@ -26,6 +44,17 @@ test('should create a ts file', t => {
   return run(t, { css: cssContent, from: cssFile });
 });
 
+test('should create a ts file with postcss-modules configuration', t => {
+  const cssFileName = path.join(__dirname, 'postcss/fakeComponentModules.postcss');
+  const content = JSON.parse(readFileSync(path.join(__dirname, 'postcss/fakeComponentModules.json'), 'utf8'));
+  return run(t, { css: '', from: '' }, { cssFileName, content });
+});
+
 test('throws if cssFileName is null', t => {
-  return run(t, { css: '', from: '' });
+  return run(t, { css: '', from: '' }, { cssFileName: null, content: ['.class'] });
+});
+
+test('throws if content is null', t => {
+  const cssFileName = path.join(__dirname, 'postcss/fakeComponentModules.postcss');
+  return run(t, { css: '', from: '' }, { cssFileName, content: null });
 });

src/spec/postcss/fakeComponentModules.json

@@ -0,0 +1 @@
+{"FakeComponentModules":"_FakeComponentModules_h7423_1","FakeComponentModules-descendentName":"_FakeComponentModules-descendentName_h7423_1", "FakeComponentModules--modifierName":"_FakeComponentModules--modifierName_h7423_1"}

src/spec/postcss/fakeComponentModules.postcss

@@ -0,0 +1,11 @@
+._FakeComponentModules_h7423_1 {
+  color: red;
+}
+
+._FakeComponentModules-descendentName_h7423_1 {
+  color: yellow;
+}
+
+._FakeComponentModules--modifierName_h7423_1 {
+  color: green;
+}

src/spec/saveFile.spec.ts

@@ -2,23 +2,48 @@ import test from 'ava';
 import saveFile from './../saveFile';
 const path = require('path');
 
-const cssFileName = path.join(__dirname, 'postcss/fakeComponent2.postcss');
 
 test('should create a new ts file', async (t) => {
+  const cssFileName = path.join(__dirname, 'postcss/fakeComponent2.postcss');
   t.is(await saveFile({
     cssFileName,
-    content: ['.FakeComponent', '.FakeComponent2-descendentName', '.FakeComponent2--modifierName']
+    content: ['.FakeComponent2', '.FakeComponent2-descendentName', '.FakeComponent2--modifierName']
   }), true);
   const tsFile = path.join(__dirname, 'postcss/fakeComponent2.ts');
   const tsFileName = path.basename(tsFile, '.ts');
   t.is(tsFileName, 'fakeComponent2');
 });
 
-test('throws if there is not a file name or content', async (t) => {
+test('should create a new ts file with transformed classes', async (t) => {
+  const cssFileName = path.join(__dirname, 'postcss/fakeComponentModules.postcss');
+  t.is(await saveFile({
+    cssFileName,
+    content: {
+      fakeComponentModules: '_FakeComponentModules_h7423_1',
+      fakeComponentModulesDescendentName: '_FakeComponentModules-descendentName_h7423_1',
+      fakeComponentModulesModifierName: '_FakeComponentModules--modifierName_h7423_1'
+    }
+  }), true);
+  const tsFile = path.join(__dirname, 'postcss/fakeComponentModules.ts');
+  const tsFileName = path.basename(tsFile, '.ts');
+  t.is(tsFileName, 'fakeComponentModules');
+});
+
+test('throws if there is not a css file name', async (t) => {
   saveFile({
     cssFileName: null,
-    content: null
+    content: ['.FakeComponent']
   }).catch((err: string) => {
     t.true(err.includes('TypeError: Path must be a string'));
   });
 });
+
+test('throws if there is not a content', async (t) => {
+  const cssFileName = path.join(__dirname, 'postcss/fakeComponent2.postcss');
+  saveFile({
+    cssFileName,
+    content: null
+  }).catch((err: string) => {
+    t.true(err.includes('TypeError: Cannot convert undefined or null to object'));
+  });
+});