Update handling of nested Sass

Resolves #13
Resolves #14

Author: mrmckeb

package.json

@@ -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__/**"]
 }