Merge branch 'release/1.0.5'

Author: mrmckeb

README.md

@@ -66,7 +66,7 @@ The below is an example that only matches "\*.m.css" files, and [camel-cases das
 By default, VSCode will use it's own version of TypeScript. To make it work with this plugin, you have two options:
 
 1. Add this plugin to `"typescript.tsserver.pluginPaths"` in settings. Note that this method doesn't currently support
-   plugin options.
+   plugin options. This is planned for the [November update](https://github.com/Microsoft/vscode/issues/62876).
 
 ```json
 {
@@ -80,7 +80,7 @@ By default, VSCode will use it's own version of TypeScript. To make it work with
 
 _Note: Create React App users can skip this section if you're using `[email protected]` or higher._
 
-If your project doesn't already have global declarations for CSS Modules, you will need to add these to help TypeScript understand the general shape of the imported CSS.
+If your project doesn't already have global declarations for CSS Modules, you will need to add these to help TypeScript understand the general shape of the imported CSS during build.
 
 Where you store global declarations is up to you. An example might look like: `src/custom.d.ts`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-plugin-css-modules",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "lib/index.js",
   "author": "Brody McKee <[email protected]>",
   "license": "MIT",
@@ -42,22 +42,24 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "@types/lodash": "^4.14.118",
     "icss-utils": "^4.0.0",
     "lodash": "^4.17.11",
-    "postcss": "^7.0.5",
-    "postcss-icss-selectors": "^2.0.3"
+    "postcss": "^7.0.7",
+    "postcss-icss-selectors": "^2.0.3",
+    "postcss-nested": "^4.1.1",
+    "strip-css-singleline-comments": "^1.1.0"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.9",
-    "@types/node": "^10.12.6",
-    "husky": "^1.1.3",
+    "@types/jest": "^23.3.12",
+    "@types/lodash": "^4.14.119",
+    "@types/node": "^10.12.18",
+    "husky": "^1.3.1",
     "jest": "^23.6.0",
-    "prettier": "^1.15.2",
+    "prettier": "^1.15.3",
     "pretty-quick": "^1.8.0",
-    "ts-jest": "^23.10.4",
-    "tslint": "^5.11.0",
-    "typescript": "^3.1.6"
+    "ts-jest": "^23.10.5",
+    "tslint": "^5.12.0",
+    "typescript": "^3.2.2"
   },
   "peerDependencies": {
     "typescript": "^3.0.0"

src/@types/icss-utils/index.d.ts renamed to src/@types/icss-utils.d.ts

@@ -0,0 +1,5 @@
+declare module 'postcss-nested' {
+  import { Plugin } from 'postcss';
+  const plugin: Plugin<any>;
+  export = plugin;
+}

src/@types/postcss-icss-selectors/index.d.ts renamed to src/@types/postcss-icss-selectors.d.ts

@@ -0,0 +1,4 @@
+declare module 'strip-css-singleline-comments/sync' {
+  const strip: (s: string) => string;
+  export = strip;
+}

src/@types/postcss-nested.d.ts

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`utils / cssSnapshots createExports should create an exports file 1`] = `
+exports[`utils / cssSnapshots with file 'empty.module.scss' createExports should create an exports file 1`] = `
+"declare const classes: {
+  
+};
+export default classes;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'empty.module.scss' getClasses should return an object matching expected CSS 1`] = `Object {}`;
+
+exports[`utils / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = `
 "declare const classes: {
   'classA': string;
   'ClassB': string;
@@ -14,13 +24,40 @@ export default classes;
 "
 `;
 
-exports[`utils / cssSnapshots createExports should create an exports file 2`] = `
+exports[`utils / cssSnapshots with file 'test.module.css' getClasses should return an object matching expected CSS 1`] = `
+Object {
+  "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",
+}
+`;
+
+exports[`utils / cssSnapshots with file 'test.module.scss' createExports should create an exports file 1`] = `
 "declare const classes: {
   'local-class-inside-global': string;
   'local-class': string;
   'local-class-2': string;
   'local-class-inside-local': string;
+  'nested-class-parent': string;
+  'child-class': string;
+  'nested-class-parent--extended': string;
 };
 export default classes;
 "
 `;
+
+exports[`utils / cssSnapshots with file 'test.module.scss' getClasses should return an object matching expected CSS 1`] = `
+Object {
+  "child-class": "file__child-class---1mwoB",
+  "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",
+  "nested-class-parent": "file__nested-class-parent---_ft7G",
+  "nested-class-parent--extended": "file__nested-class-parent--extended---1642l",
+}
+`;

src/@types/strip-css-singleline-comments.d.ts

@@ -3,49 +3,37 @@ import { IICSSExports } from 'icss-utils';
 import { join } from 'path';
 import { createExports, getClasses } from '../cssSnapshots';
 
-describe('utils / cssSnapshots', () => {
-  let classesA: IICSSExports;
-  let classesB: IICSSExports;
+const testFileNames = [
+  'test.module.css',
+  'test.module.scss',
+  'empty.module.scss',
+];
 
-  beforeAll(() => {
-    const testFileA = readFileSync(
-      join(__dirname, 'fixtures/testA.module.css'),
-      'utf8',
-    );
-    const testFileB = readFileSync(
-      join(__dirname, 'fixtures/testB.module.scss'),
+describe('utils / cssSnapshots', () => {
+  testFileNames.map((filename) => {
+    let classes: IICSSExports;
+    const testFile = readFileSync(
+      join(__dirname, 'fixtures', filename),
       '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',
-      });
+    beforeAll(() => {
+      classes = getClasses(testFile);
     });
-  });
 
-  describe('createExports', () => {
-    it('should create an exports file', () => {
-      const exportsA = createExports(classesA, {});
-      const exportsB = createExports(classesB, {});
-      expect(exportsA).toMatchSnapshot();
-      expect(exportsB).toMatchSnapshot();
+    describe(`with file '${filename}'`, () => {
+      describe('getClasses', () => {
+        it('should return an object matching expected CSS', () => {
+          expect(classes).toMatchSnapshot();
+        });
+      });
+
+      describe('createExports', () => {
+        it('should create an exports file', () => {
+          const exports = createExports(classes, {});
+          expect(exports).toMatchSnapshot();
+        });
+      });
     });
   });
 });

src/helpers/__tests__/__snapshots__/cssSnapshots.test.ts.snap

@@ -13,3 +13,14 @@
   .local-class-inside-local {
   }
 }
+
+.nested-class-parent {
+  .child-class {
+  }
+  &--extended {
+  }
+}
+
+// .commented-parent-class {
+//   .commented-child-class
+// }

src/helpers/__tests__/cssSnapshots.test.ts

@@ -1,13 +1,25 @@
 import { extractICSS, IICSSExports } from 'icss-utils';
 import * as postcss from 'postcss';
 import * as postcssIcssSelectors from 'postcss-icss-selectors';
+import * as postcssNested from 'postcss-nested';
+import * as strip from 'strip-css-singleline-comments/sync';
 import * as ts_module from 'typescript/lib/tsserverlibrary';
 import { transformClasses } from './classTransforms';
 
-const processor = postcss(postcssIcssSelectors({ mode: 'local' }));
+const processor = postcss(
+  postcssNested,
+  postcssIcssSelectors({ mode: 'local' }),
+);
 
-export const getClasses = (css: string) =>
-  extractICSS(processor.process(css).root).icssExports;
+export const getClasses = (css: string) => {
+  try {
+    const cleanCss = strip(css);
+    const processedCss = processor.process(cleanCss);
+    return extractICSS(processedCss.root).icssExports;
+  } catch (e) {
+    return {};
+  }
+};
 const classNameToProperty = (className: string) => `'${className}': string;`;
 const flattenClassNames = (
   previousValue: string[] = [],
@@ -18,7 +30,7 @@ export const createExports = (classes: IICSSExports, options: IOptions) => `\
 declare const classes: {
   ${Object.keys(classes)
     .map(transformClasses(options.camelCase))
-    .reduce(flattenClassNames)
+    .reduce(flattenClassNames, [])
     .map(classNameToProperty)
     .join('\n  ')}
 };

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

@@ -66,7 +66,7 @@ function init({ typescript: ts }: { typescript: typeof ts_module }) {
         containingFile,
         reusedNames,
       ) => {
-        const resolvedModules: ts_module.ResolvedModuleFull[] = _resolveModuleNames(
+        const resolvedModules = _resolveModuleNames(
           moduleNames,
           containingFile,
           reusedNames,

src/helpers/__tests__/fixtures/testA.module.css renamed to src/helpers/__tests__/fixtures/test.module.css

@@ -16,5 +16,6 @@
     "strictNullChecks": true,
     "target": "es5"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "**/__tests__/**"]
 }