Initial commit

Author: mrmckeb

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,5 @@
+/.vscode
+/lib
+/node_modules
+npm-debug.log
+yarn-error.log

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "typescript-css-modules",
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "repository": "[email protected]:mrmckeb/typescript-css-modules.git",
+  "author": "Brody McKee <[email protected]>",
+  "license": "MIT",
+  "description": "CSS modules support for TypeScript",
+  "keywords": [
+    "css",
+    "modules",
+    "plugin",
+    "postcss",
+    "sass",
+    "typescript"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "jest"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node"
+  },
+  "prettier": {
+    "arrowParens": "always",
+    "singleQuote": true,
+    "trailingComma": "all"
+  },
+  "dependencies": {
+    "icss-utils": "^4.0.0",
+    "postcss": "^7.0.5",
+    "postcss-icss-selectors": "^2.0.3"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.3.9",
+    "@types/node": "^10.12.6",
+    "husky": "^1.1.3",
+    "jest": "^23.6.0",
+    "prettier": "^1.15.2",
+    "pretty-quick": "^1.8.0",
+    "ts-jest": "^23.10.4",
+    "tslint": "^5.11.0",
+    "typescript": "^3.1.6"
+  },
+  "peerDependencies": {
+    "typescript": "^3.0.0"
+  }
+}

src/@types/icss-utils.d.ts

@@ -0,0 +1,12 @@
+declare module 'icss-utils' {
+  import { Root } from 'postcss';
+  interface IICSSExports {
+    [exportName: string]: string;
+  }
+  export const extractICSS: (
+    css: Root,
+    removeRules?: boolean,
+  ) => {
+    icssExports: IICSSExports;
+  };
+}

src/@types/postcss-icss-selectors.d.ts

@@ -0,0 +1,5 @@
+declare module 'postcss-icss-selectors' {
+  import { Plugin } from 'postcss';
+  const plugin: Plugin<{ mode: 'local' | 'global' }>;
+  export = plugin;
+}

src/helpers/__tests__/cssExtensions.test.ts

@@ -0,0 +1,29 @@
+import { isCSS, isRelativeCSS } from '../cssExtensions';
+
+describe('utils / cssExtensions', () => {
+  describe('isCSS', () => {
+    it('should match CSS module extensions', () => {
+      expect(isCSS('./myfile.module.scss')).toBe(true);
+      expect(isCSS('./myfile.module.sass')).toBe(true);
+      expect(isCSS('./myfile.module.css')).toBe(true);
+    });
+
+    it('should not match non-CSS module extensions', () => {
+      expect(isCSS('./myfile.module.s')).toBe(false);
+      expect(isCSS('./myfile.scss')).toBe(false);
+      expect(isCSS('./myfile.sass')).toBe(false);
+      expect(isCSS('./myfile.css')).toBe(false);
+    });
+  });
+
+  describe('isRelativeCSS', () => {
+    it('should match relative CSS modules', () => {
+      expect(isRelativeCSS('./myfile.module.css')).toBe(true);
+      expect(isRelativeCSS('../folder/myfile.module.css')).toBe(true);
+    });
+
+    it('should not match non-relative CSS modules', () => {
+      expect(isRelativeCSS('myfile.module.css')).toBe(false);
+    });
+  });
+});

src/helpers/__tests__/cssSnapshots.test.ts

@@ -0,0 +1,57 @@
+import { readFileSync } from 'fs';
+import { IICSSExports } from 'icss-utils';
+import { join } from 'path';
+import { createExports, getClasses } from '../cssSnapshots';
+
+describe('utils / cssSnapshots', () => {
+  let classesA: IICSSExports;
+  let classesB: IICSSExports;
+
+  beforeAll(() => {
+    const testFileA = readFileSync(
+      join(__dirname, 'fixtures/testA.module.css'),
+      'utf8',
+    );
+    const testFileB = readFileSync(
+      join(__dirname, 'fixtures/testB.module.scss'),
+      'utf8',
+    );
+    classesA = getClasses(testFileA);
+    classesB = getClasses(testFileB);
+  });
+
+  describe('getClasses', () => {
+    it('should return an object matching expected CSS classes', () => {
+      expect(classesA).toEqual({
+        ClassB: 'file__ClassB---2bPVi',
+        childA: 'file__childA---1hjQD',
+        childB: 'file__childB---pq4Ks',
+        'class-c': 'file__class-c---DZ1TD',
+        classA: 'file__classA---2xcnJ',
+        nestedChild: 'file__nestedChild---2d15b',
+        parent: 'file__parent---1ATMj',
+      });
+      expect(classesB).toEqual({
+        'local-class': 'file__local-class---3KegX',
+        'local-class-2': 'file__local-class-2---2h6qz',
+        'local-class-inside-global': 'file__local-class-inside-global---2xH_Y',
+        'local-class-inside-local': 'file__local-class-inside-local---QdL6b',
+      });
+    });
+  });
+
+  describe('createExports', () => {
+    it('should create an exports file', () => {
+      const exportsA = createExports(classesA);
+      const exportsB = createExports(classesB);
+      // tslint:disable max-line-length
+      expect(exportsA).toMatchInlineSnapshot(
+        `"export const classA: string;export const ClassB: string;export const class-c: string;export const parent: string;export const childA: string;export const childB: string;export const nestedChild: string;"`,
+      );
+      expect(exportsB).toMatchInlineSnapshot(
+        `"export const local-class-inside-global: string;export const local-class: string;export const local-class-2: string;export const local-class-inside-local: string;"`,
+      );
+      // tslint:enable max-line-length
+    });
+  });
+});

src/helpers/__tests__/fixtures/testA.module.css

@@ -0,0 +1,17 @@
+.classA {
+}
+
+.ClassB {
+}
+
+.class-c {
+}
+
+.parent {
+  .childA {
+  }
+  .childB {
+    .nestedChild {
+    }
+  }
+}

src/helpers/__tests__/fixtures/testB.module.scss

@@ -0,0 +1,15 @@
+:global .global-class {
+}
+
+:global(.global-class-2) {
+  .local-class-inside-global {
+  }
+}
+
+:local .local-class {
+}
+
+:local(.local-class-2) {
+  .local-class-inside-local {
+  }
+}

src/helpers/cssExtensions.ts

@@ -0,0 +1,7 @@
+const isRelative = (fileName: string) => /^\.\.?($|[\\/])/.test(fileName);
+
+export const isCSS = (fileName: string) =>
+  /\.module\.(sa|sc|c)ss$/.test(fileName);
+
+export const isRelativeCSS = (fileName: string) =>
+  isCSS(fileName) && isRelative(fileName);