feat: add Sass support for tsconfig path aliases (#105)

Author: WOOLAN

package.json

@@ -75,7 +75,8 @@
     "postcss-load-config": "^2.1.0",
     "reserved-words": "^0.1.2",
     "sass": "^1.26.5",
-    "stylus": "^0.54.7"
+    "stylus": "^0.54.7",
+    "tsconfig-paths": "^3.9.0"
   },
   "devDependencies": {
     "@types/icss-utils": "^4.1.0",

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

@@ -9,6 +9,14 @@ Object {
 }
 `;
 
+exports[`utils / cssSnapshots with baseUrl and paths in compilerOptions sass should find the files 1`] = `
+Object {
+  "big-font": "tsconfig-paths-module__big-font---3FOK9",
+  "class-with-mixin": "tsconfig-paths-module__class-with-mixin---Uo34z",
+  "public-module": "tsconfig-paths-module__public-module---2IHe1",
+}
+`;
+
 exports[`utils / cssSnapshots with file 'empty.module.less' createExports should create an exports file 1`] = `
 "declare let classes: {
 

src/helpers/__tests__/external/package/public.module.scss

@@ -0,0 +1,3 @@
+.public-module {
+    color: green;
+}

src/helpers/__tests__/fixtures/tsconfig-paths.module.scss

@@ -0,0 +1,2 @@
+@import '@scss/_external.module.scss';
+@import 'alias.scss';

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -186,4 +186,29 @@ describe('utils / cssSnapshots', () => {
       expect(classes).toMatchSnapshot();
     });
   });
+
+  describe('with baseUrl and paths in compilerOptions', () => {
+    const fileName = join(__dirname, 'fixtures', 'tsconfig-paths.module.scss');
+    const css = readFileSync(fileName, 'utf8');
+    const compilerOptions = {
+      baseUrl: __dirname,
+      paths: {
+        '@scss/*': ['external/package/*'],
+        'alias.scss': ['external/package/public.module.scss'],
+      },
+    };
+
+    it('sass should find the files', () => {
+      const classes = getClasses({
+        css,
+        fileName,
+        logger,
+        options,
+        processor,
+        compilerOptions,
+      });
+
+      expect(classes).toMatchSnapshot();
+    });
+  });
 });

src/helpers/getClasses.ts

@@ -5,6 +5,7 @@ import sass from 'sass';
 import stylus from 'stylus';
 import { extractICSS } from 'icss-utils';
 import tsModule from 'typescript/lib/tsserverlibrary';
+import { createMatchPath } from 'tsconfig-paths';
 import { Logger } from './logger';
 import { Options, CustomRenderer } from '../options';
 
@@ -71,6 +72,14 @@ export const getClasses = ({
     } else if (fileType === FileTypes.scss || fileType === FileTypes.sass) {
       const filePath = getFilePath(fileName);
       const { includePaths, ...sassOptions } = rendererOptions.sass || {};
+      const { baseUrl, paths } = compilerOptions;
+      const matchPath =
+        baseUrl && paths ? createMatchPath(path.resolve(baseUrl), paths) : null;
+
+      const aliasImporter: sass.Importer = (url) => {
+        const newUrl = matchPath !== null ? matchPath(url) : undefined;
+        return newUrl ? { file: newUrl } : null;
+      };
 
       transformedCss = sass
         .renderSync({
@@ -80,6 +89,7 @@ export const getClasses = ({
           data: css.replace(/(@import ['"])~(?!\/)/gm, '$1'),
           indentedSyntax: fileType === FileTypes.sass,
           includePaths: [filePath, 'node_modules', ...(includePaths || [])],
+          importer: [aliasImporter],
           ...sassOptions,
         })
         .css.toString();

yarn.lock

@@ -605,6 +605,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
   integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
 
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
 "@types/less@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/less/-/less-3.0.1.tgz#625694093c72f8356c4042754e222407e50d6b08"
@@ -3084,6 +3089,13 @@ json5@^0.5.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -4567,6 +4579,11 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
 strip-bom@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
@@ -4790,6 +4807,16 @@ ts-jest@^25.4.0:
     semver "6.x"
     yargs-parser "18.x"
 
+tsconfig-paths@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
+  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
 tslib@^1.10.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.0.tgz#f1f3528301621a53220d58373ae510ff747a66bc"