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": "git@github.com:mrmckeb/typescript-css-modules.git",
+  "author": "Brody McKee <mrmckeb@hotmail.com>",
+  "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);

src/helpers/cssSnapshots.ts

@@ -0,0 +1,23 @@
+import { extractICSS, IICSSExports } from 'icss-utils';
+import * as postcss from 'postcss';
+import * as postcssIcssSelectors from 'postcss-icss-selectors';
+import * as ts_module from 'typescript/lib/tsserverlibrary';
+
+const processor = postcss(postcssIcssSelectors({ mode: 'local' }));
+
+export const getClasses = (css: string) =>
+  extractICSS(processor.process(css).root).icssExports;
+export const createExports = (classes: IICSSExports) =>
+  Object.keys(classes)
+    .map((exportName) => `export const ${exportName}: string;`)
+    .join('');
+
+export const getDtsSnapshot = (
+  ts: typeof ts_module,
+  scriptSnapshot: ts.IScriptSnapshot,
+) => {
+  const css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
+  const classes = getClasses(css);
+  const dts = createExports(classes);
+  return ts.ScriptSnapshot.fromString(dts);
+};

src/index.ts

@@ -0,0 +1,108 @@
+import * as path from 'path';
+import * as ts_module from 'typescript/lib/tsserverlibrary';
+import { types } from 'util';
+import { isCSS as _isCSS, isRelativeCSS } from './helpers/cssExtensions';
+import { getDtsSnapshot } from './helpers/cssSnapshots';
+
+interface IOptions {
+  customMatcher?: string;
+}
+
+function init({ typescript: ts }: { typescript: typeof ts_module }) {
+  let isCSS = _isCSS;
+  function create(info: ts.server.PluginCreateInfo) {
+    // Allow custom matchers to be used, handling bad matcher patterns;
+    try {
+      const { customMatcher }: IOptions = info.config.options || {};
+      if (customMatcher) {
+        isCSS = (fileName) => new RegExp(customMatcher).test(fileName);
+      }
+    } catch (e) {
+      // There doesn't appear to be a way to throw warnings yet.
+    }
+
+    // Creates new virtual source files for the CSS modules.
+    const _createLanguageServiceSourceFile = ts.createLanguageServiceSourceFile;
+    ts.createLanguageServiceSourceFile = (
+      fileName,
+      scriptSnapshot,
+      ...rest
+    ): ts.SourceFile => {
+      if (isCSS(fileName)) {
+        scriptSnapshot = getDtsSnapshot(ts, scriptSnapshot);
+      }
+      const sourceFile = _createLanguageServiceSourceFile(
+        fileName,
+        scriptSnapshot,
+        ...rest,
+      );
+      if (isCSS(fileName)) {
+        sourceFile.isDeclarationFile = true;
+      }
+      return sourceFile;
+    };
+
+    // Updates virtual source files as files update.
+    const _updateLanguageServiceSourceFile = ts.updateLanguageServiceSourceFile;
+    ts.updateLanguageServiceSourceFile = (
+      sourceFile,
+      scriptSnapshot,
+      ...rest
+    ): ts.SourceFile => {
+      if (isCSS(sourceFile.fileName)) {
+        scriptSnapshot = getDtsSnapshot(ts, scriptSnapshot);
+      }
+      sourceFile = _updateLanguageServiceSourceFile(
+        sourceFile,
+        scriptSnapshot,
+        ...rest,
+      );
+      if (isCSS(sourceFile.fileName)) {
+        sourceFile.isDeclarationFile = true;
+      }
+      return sourceFile;
+    };
+
+    if (info.languageServiceHost.resolveModuleNames) {
+      const _resolveModuleNames = info.languageServiceHost.resolveModuleNames.bind(
+        info.languageServiceHost,
+      );
+
+      info.languageServiceHost.resolveModuleNames = (
+        moduleNames,
+        containingFile,
+        reusedNames,
+      ) => {
+        const resolvedCSS: ts.ResolvedModuleFull[] = [];
+
+        return _resolveModuleNames(
+          moduleNames.filter((moduleName) => {
+            if (isRelativeCSS(moduleName)) {
+              resolvedCSS.push({
+                extension: ts_module.Extension.Dts,
+                resolvedFileName: path.resolve(
+                  path.dirname(containingFile),
+                  moduleName,
+                ),
+              });
+              return false;
+            }
+            return true;
+          }),
+          containingFile,
+          reusedNames,
+        ).concat(resolvedCSS);
+      };
+    }
+
+    return info.languageService;
+  }
+
+  function getExternalFiles(project: ts_module.server.ConfiguredProject) {
+    return project.getFileNames().filter(isCSS);
+  }
+
+  return { create, getExternalFiles };
+}
+
+export = init;

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "lib": ["esnext"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "outDir": "lib",
+    "rootDir": "src",
+    "skipLibCheck": false,
+    "strict": true,
+    "strictNullChecks": true,
+    "target": "es5"
+  }
+}

tslint.json

@@ -0,0 +1,16 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "object-literal-key-quotes": [true, "as-needed"],
+    "quotemark": [true, "single"],
+    "trailing-comma": [
+      true,
+      {
+        "multiline": "always",
+        "singleline": "never",
+        "esSpecCompliant": true
+      }
+    ],
+    "variable-name": [true, "allow-leading-underscore"]
+  }
+}