feat(plugin): Get a typescript file by each CSS

Given a CSS file the plugin has to create a typescript file.

closes #4

Author: ezavile

src/buildFile.ts

@@ -0,0 +1,20 @@
+const camelCase = require('camelcase');
+const path = require('path');
+
+import { PostcssTypescriptCss } from './namespace/PostcssTypescriptCss';
+
+const build = (file: PostcssTypescriptCss.Options) => {
+const filename = path.basename(file.cssFileName, '.postcss');
+return (
+`export const ${filename}Style = {
+  ${
+    file.content.map((c: string) => {
+      return ` ${camelCase(c)}: '${c}'\n`;
+    })
+  },
+};
+`
+);
+};
+
+export default build;

src/namespace/PostcssTypescriptCss.ts

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

src/postcss-typescript-css.ts

@@ -1,5 +1,37 @@
-const postcssTypescriptCss = () => {
-  return 'Welcome to postcss-typescript-css';
-};
+import * as postcss from 'postcss';
+const parser = require('postcss-selector-parser');
+
+import { PostcssTypescriptCss } from './namespace/PostcssTypescriptCss';
+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],
+        };
+        saveFile(opts)
+        .then(() => {
+          resolve();
+        })
+        .catch((err) => {
+          reject(err);
+        });
+      });
+    };
+});
 
 export = postcssTypescriptCss;

src/saveFile.ts

@@ -0,0 +1,20 @@
+import { writeFileSync } from 'fs';
+const path = require('path');
+
+import { PostcssTypescriptCss } from './namespace/PostcssTypescriptCss';
+import build from './buildFile';
+
+const saveFile = (file: PostcssTypescriptCss.Options) => {
+  return new Promise((resolve, reject) => {
+    try {
+      const dirname = path.dirname(file.cssFileName);
+      const filename = path.basename(file.cssFileName, '.postcss');
+      writeFileSync(`${dirname}/${filename}.ts`, build(file));
+      resolve(true);
+    } catch (err) {
+      reject(err.toString());
+    }
+  });
+};
+
+export default saveFile;

src/spec/buildFile.spec.ts

@@ -0,0 +1,13 @@
+import test from 'ava';
+import build from './../buildFile';
+
+test('should create a string with the classes as a properties', t => {
+  const template = build({
+    cssFileName: 'fakeComponent',
+    content: ['.FakeComponent', '.FakeComponent-descendentName', '.FakeComponent--modifierName']
+  });
+  t.true(template.includes('fakeComponentStyle'));
+  t.true(template.includes('fakeComponent:'));
+  t.true(template.includes('fakeComponentDescendentName:'));
+  t.true(template.includes('fakeComponentModifierName:'));
+});

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

@@ -0,0 +1,31 @@
+import test, { TestContext } from 'ava';
+import { readFileSync } from 'fs';
+const path = require('path');
+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 })
+  .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:'));
+  })
+  .catch((err: string) => {
+    t.true(err.includes('TypeError: Path must be a string'));
+  });
+}
+
+test('should create a ts file', t => {
+  const cssFile = path.join(__dirname, 'postcss/fakeComponent.postcss');
+  const cssContent = readFileSync(cssFile, 'utf8');
+  return run(t, { css: cssContent, from: cssFile });
+});
+
+test('throws if cssFileName is null', t => {
+  return run(t, { css: '', from: '' });
+});

src/spec/postcss/fakeComponent.postcss

@@ -0,0 +1,9 @@
+.FakeComponent {
+  color: green;
+}
+.FakeComponent-descendentName {
+  color: yellow;
+}
+.FakeComponent--modifierName {
+  color: red;
+}

src/spec/postcss/fakeComponent2.postcss

@@ -0,0 +1,9 @@
+.FakeComponent2 {
+  color: green;
+}
+.FakeComponent2-descendentName {
+  color: yellow;
+}
+.FakeComponent2--modifierName {
+  color: red;
+}

src/spec/saveFile.spec.ts

@@ -0,0 +1,24 @@
+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) => {
+  t.is(await saveFile({
+    cssFileName,
+    content: ['.FakeComponent', '.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) => {
+  saveFile({
+    cssFileName: null,
+    content: null
+  }).catch((err: string) => {
+    t.true(err.includes('TypeError: Path must be a string'));
+  });
+});

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "rootDir": "src",
-    "sourceMap": false,
+    "sourceMap": true,
     "noImplicitAny": true,
 		"declaration": false,
     "module": "commonjs",