Support comments in tsconfig files (#24)

* Install json5

* Run `npm audit fix`

* Add a functional test for resolving aliased imports

* Add a comment to the tsconfig to demonstrate the error

* Use json5 to fix the error

* Clean up the aliased test to match the existing style

* Fix: regex error that could create false matches

For example, searching for `rCss` matched the ending of `regularCss`

Author: dhleong

package-lock.json

@@ -37,6 +37,7 @@
     "vitest": "^1.4.0"
   },
   "dependencies": {
+    "json5": "^2.2.3",
     "lilconfig": "^3.1.1",
     "lodash.camelcase": "^4.3.0",
     "postcss": "^8.1.10",

package.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      // @spec-styles points to this directory:
+      "@spec-styles/*": [
+        "*"
+      ]
+    }
+  }
+}

src/spec/styles/tsconfig.json

@@ -112,6 +112,9 @@ import sCss from './styles.scss'
 import sass from './styles.sass'
 import styl from './styles.styl'
 
+import aliasedRegularCss from '@spec-styles/regular.css'
+import aliasedNestedSass from '@spec-styles/nested.sass'
+
 const rCss = require('./style.css')
 const rStyle = require('./style.css')
 const rStyles = require('./styles.css')
@@ -148,6 +151,18 @@ describe('findImportPath', () => {
         }),
     );
 
+    const realDirPath = path.join(__dirname, 'styles');
+
+    [
+        ['aliasedRegularCss', path.join(realDirPath, 'regular.css')],
+        ['aliasedNestedSass', path.join(realDirPath, 'nested.sass')],
+    ].forEach(([importName, expected]) => {
+        it(`resolves aliased import path for ${importName}`, () => {
+            const result = findImportPath(fileContent, importName, realDirPath);
+            expect(result).toBe(expected);
+        })
+    });
+
     it('returns an empty string when there is no import', () => {
         const simpleComponentFile = [
             "import React from 'react'",

src/spec/utils.spec.ts

@@ -22,7 +22,7 @@ export function genImportRegExp(importName: string): RegExp {
     const file = '(.+\\.(styl|sass|scss|less|css))';
     const fromOrRequire = '(?:from\\s+|=\\s+require(?:<any>)?\\()';
     const requireEndOptional = '\\)?';
-    const pattern = `${importName}\\s+${fromOrRequire}["']${file}["']${requireEndOptional}`;
+    const pattern = `\\b${importName}\\s+${fromOrRequire}["']${file}["']${requireEndOptional}`;
 
     return new RegExp(pattern);
 }

src/utils.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import JSON5 from 'json5';
 
 import {lilconfigSync} from 'lilconfig';
 
@@ -49,6 +50,11 @@ export const resolveAliasedImport = ({
 }): string | null => {
     const searcher = lilconfigSync('', {
         searchPlaces: ['tsconfig.json', 'jsconfig.json'],
+        loaders: {
+            '.json': function(filepath, content) {
+                return JSON5.parse(content);
+            }
+        }
     });
     const config = searcher.search(location);