Fix resolution of Sass imports (#31)

Author: mrmckeb

package.json

@@ -47,27 +47,27 @@
     "trailingComma": "all"
   },
   "dependencies": {
-    "icss-utils": "^4.1.0",
+    "icss-utils": "^4.1.1",
     "less": "^3.9.0",
-    "lodash": "^4.17.11",
-    "postcss": "^7.0.16",
+    "lodash": "^4.17.14",
+    "postcss": "^7.0.17",
     "postcss-icss-selectors": "^2.0.3",
     "reserved-words": "^0.1.2",
-    "sass": "^1.20.1"
+    "sass": "^1.22.4"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.13",
+    "@types/jest": "^24.0.15",
     "@types/less": "^3.0.0",
-    "@types/lodash": "^4.14.132",
+    "@types/lodash": "^4.14.136",
     "@types/node": "^10.0.0",
     "@types/sass": "^1.16.0",
-    "husky": "^2.3.0",
+    "husky": "^2.7.0",
     "jest": "^24.8.0",
-    "prettier": "^1.17.1",
-    "pretty-quick": "^1.11.0",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.1",
     "ts-jest": "^24.0.2",
-    "tslint": "^5.16.0",
-    "typescript": "^3.4.5"
+    "tslint": "^5.18.0",
+    "typescript": "^3.5.3"
   },
   "peerDependencies": {
     "typescript": "^3.0.0"

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

@@ -107,6 +107,7 @@ exports[`utils / cssSnapshots with file 'test.module.scss' createExports should
   'section-7': string;
   'section-8': string;
   'section-9': string;
+  'class-with-mixin': string;
 };
 export default classes;
 "
@@ -115,6 +116,7 @@ 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---1QWYM",
+  "class-with-mixin": "file__class-with-mixin---39EVY",
   "const": "file__const---MIe_0",
   "default": "file__default---2RWlj",
   "local-class": "file__local-class---3SW3k",

src/helpers/__tests__/cssSnapshots.test.ts

@@ -14,14 +14,11 @@ const testFileNames = [
 describe('utils / cssSnapshots', () => {
   testFileNames.forEach((fileName) => {
     let classes: IICSSExports;
-    const fileType = getFileType(fileName);
-    const testFile = readFileSync(
-      join(__dirname, 'fixtures', fileName),
-      'utf8',
-    );
+    const fullFileName = join(__dirname, 'fixtures', fileName);
+    const testFile = readFileSync(fullFileName, 'utf8');
 
     beforeAll(() => {
-      classes = getClasses(testFile, fileType);
+      classes = getClasses(testFile, fullFileName);
     });
 
     describe(`with file '${fileName}'`, () => {

src/helpers/__tests__/fixtures/_mixin.scss

@@ -0,0 +1,3 @@
+@mixin set-margin($arg) {
+  margin: $arg;
+}

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

@@ -11,7 +11,7 @@
 }
 
 .class_d {
-  @mixin thisBreaksSass;
+  @mixin postcss-mixin;
   color: rebeccapurple;
 }
 

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

@@ -44,6 +44,12 @@ $color: rebeccapurple !default;
   }
 }
 
+@import 'mixin';
+
+.class-with-mixin {
+  @include set-margin(0);
+}
+
 // .commented-parent-class {
 //   .commented-child-class
 // }

src/helpers/cssSnapshots.ts

@@ -21,28 +21,37 @@ const flattenClassNames = (
 ) => previousValue.concat(currentValue);
 
 export const enum FileTypes {
-  scss = 'scss',
-  less = 'less',
   css = 'css',
+  less = 'less',
+  scss = 'scss',
 }
 
-export const getFileType = (fileName: string) =>
-  fileName.endsWith('.css')
-    ? FileTypes.css
-    : fileName.endsWith('.less')
-    ? FileTypes.less
-    : FileTypes.scss;
+export const getFileType = (fileName: string) => {
+  if (fileName.endsWith('.css')) return FileTypes.css;
+  if (fileName.endsWith('.less')) return FileTypes.less;
+  return FileTypes.scss;
+};
+
+const getFilePath = (fileName: string) =>
+  fileName.substring(0, fileName.lastIndexOf('/'));
 
-export const getClasses = (css: string, fileType: FileTypes) => {
+export const getClasses = (css: string, fileName: string) => {
   try {
+    const fileType = getFileType(fileName);
     let transformedCss = '';
 
     if (fileType === FileTypes.less) {
       less.render(css, { asyncImport: true } as any, (err, output) => {
         transformedCss = output.css.toString();
       });
     } else if (fileType === FileTypes.scss) {
-      transformedCss = sass.renderSync({ data: css }).css.toString();
+      const filePath = getFilePath(fileName);
+      transformedCss = sass
+        .renderSync({
+          data: css,
+          includePaths: [filePath],
+        })
+        .css.toString();
     } else {
       transformedCss = css;
     }
@@ -88,8 +97,7 @@ export const getDtsSnapshot = (
   options: Options,
 ) => {
   const css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
-  const fileType = getFileType(fileName);
-  const classes = getClasses(css, fileType);
+  const classes = getClasses(css, fileName);
   const dts = createExports(classes, options);
   return ts.ScriptSnapshot.fromString(dts);
 };