chore: release v3.0.0

Author: mrmckeb

README.md

@@ -160,7 +160,9 @@ The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules
 
 > If you use Webpack, note that tilde (`~`) imports not supported by Less and Sass natively.
 >
-> For Less users, this package exports a customRenderer that enables tilde imports: [`less-plugin-aliases`](https://github.com/dancon/less-plugin-aliases).
+> For Sass users: A custom importer has been implemented to resolve this as of v3.
+>
+> For Less users: This package exports a customRenderer that enables tilde imports: [`less-plugin-aliases`](https://github.com/dancon/less-plugin-aliases).
 
 #### `customTemplate`
 
@@ -198,11 +200,11 @@ The `classes` object represents all the classnames extracted from the CSS Module
 
 #### `rendererOptions`
 
-| Option   | Default value                         | Description                                                                                                                                                                                                                              |
-| -------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `less`   | `{}`                                  | Set [renderer options for Less](http://lesscss.org/usage/#less-options).                                                                                                                                                                 |
-| `sass`   | `{ enableWebpackTildeImports: true }` | Set [renderer options for Sass](https://sass-lang.com/documentation/js-api#options). The `enableWebpackTildeImports` property enables support for [Webpack's tilde-prefixed imports](https://webpack.js.org/loaders/css-loader/#import). |
-| `stylus` | `{}`                                  | Set [renderer options for Stylus](https://stylus.bootcss.com/docs/js.html).                                                                                                                                                              |
+| Option   | Default value | Description                                                                          |
+| -------- | ------------- | ------------------------------------------------------------------------------------ |
+| `less`   | `{}`          | Set [renderer options for Less](http://lesscss.org/usage/#less-options).             |
+| `sass`   | `{}`          | Set [renderer options for Sass](https://sass-lang.com/documentation/js-api#options). |
+| `stylus` | `{}`          | Set [renderer options for Stylus](https://stylus.bootcss.com/docs/js.html).          |
 
 > For convenience, `includePaths` for Sass are extended, not replaced. The defaults are the path of the current file, and `'node_modules'`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-plugin-css-modules",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "main": "lib/index.js",
   "author": "Brody McKee <[email protected]>",
   "license": "MIT",

src/helpers/getClasses.ts

@@ -1,14 +1,14 @@
 import path from 'path';
-import fs from 'fs';
 import postcss from 'postcss';
 import less from 'less';
 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 { sassTildeImporter } from '../importers/sassTildeImporter';
 import { Options, CustomRenderer } from '../options';
+import { Logger } from './logger';
 
 export const enum FileTypes {
   css = 'css',
@@ -28,50 +28,6 @@ export const getFileType = (fileName: string) => {
 
 const getFilePath = (fileName: string) => path.dirname(fileName);
 
-// Creates a sass importer which resolves Webpack-style tilde-imports
-const webpackTildeSupportingImporter: sass.Importer = (
-  rawImportPath: string,
-  source: string,
-) => {
-  // We only care about tilde-prefixed imports that do not look like paths
-  if (!rawImportPath.startsWith('~') || rawImportPath.startsWith('~/')) {
-    return null;
-  }
-
-  // Create subpathsWithExts such that it has entries of the form
-  // node_modules/@foo/bar/baz.(scss|sass)
-  // for an import of the form ~@foo/bar/baz(.(scss|sass))?
-  const nodeModSubpath = path.join('node_modules', rawImportPath.substring(1));
-  const subpathsWithExts: string[] = [];
-  if (nodeModSubpath.endsWith('.scss') || nodeModSubpath.endsWith('.sass')) {
-    subpathsWithExts.push(nodeModSubpath);
-  } else {
-    // Look for .scss first
-    subpathsWithExts.push(`${nodeModSubpath}.scss`, `${nodeModSubpath}.sass`);
-  }
-
-  // Climbs the filesystem tree until we get to the root, looking for the first
-  // node_modules directory which has a matching module and filename.
-  let prevDir = '';
-  let dir = path.dirname(source);
-  while (prevDir !== dir) {
-    const searchPaths = subpathsWithExts.map((subpathWithExt) =>
-      path.join(dir, subpathWithExt),
-    );
-    for (const searchPath of searchPaths) {
-      if (fs.existsSync(searchPath)) {
-        return { file: searchPath };
-      }
-    }
-    prevDir = dir;
-    dir = path.dirname(dir);
-  }
-
-  // Returning null is not itself an error, it tells sass to instead try the
-  // next import resolution method if one exists
-  return null;
-};
-
 export const getClasses = ({
   css,
   fileName,
@@ -116,8 +72,7 @@ export const getClasses = ({
       );
     } else if (fileType === FileTypes.scss || fileType === FileTypes.sass) {
       const filePath = getFilePath(fileName);
-      const { includePaths, enableWebpackTildeImports, ...sassOptions } =
-        rendererOptions.sass || {};
+      const { includePaths, ...sassOptions } = rendererOptions.sass || {};
       const { baseUrl, paths } = compilerOptions;
       const matchPath =
         baseUrl && paths ? createMatchPath(path.resolve(baseUrl), paths) : null;
@@ -127,10 +82,7 @@ export const getClasses = ({
         return newUrl ? { file: newUrl } : null;
       };
 
-      const importers = [aliasImporter];
-      if (enableWebpackTildeImports !== false) {
-        importers.push(webpackTildeSupportingImporter);
-      }
+      const importers = [aliasImporter, sassTildeImporter];
 
       transformedCss = sass
         .renderSync({

src/importers/sassTildeImporter.ts

@@ -0,0 +1,49 @@
+import path from 'path';
+import fs from 'fs';
+import sass from 'sass';
+
+/**
+ * Creates a sass importer which resolves Webpack-style tilde-imports.
+ */
+export const sassTildeImporter: sass.Importer = (
+  rawImportPath: string,
+  source: string,
+) => {
+  // We only care about tilde-prefixed imports that do not look like paths.
+  if (!rawImportPath.startsWith('~') || rawImportPath.startsWith('~/')) {
+    return null;
+  }
+
+  // Create subpathsWithExts such that it has entries of the form
+  // node_modules/@foo/bar/baz.(scss|sass)
+  // for an import of the form ~@foo/bar/baz(.(scss|sass))?
+  const nodeModSubpath = path.join('node_modules', rawImportPath.substring(1));
+  const subpathsWithExts: string[] = [];
+  if (nodeModSubpath.endsWith('.scss') || nodeModSubpath.endsWith('.sass')) {
+    subpathsWithExts.push(nodeModSubpath);
+  } else {
+    // Look for .scss first.
+    subpathsWithExts.push(`${nodeModSubpath}.scss`, `${nodeModSubpath}.sass`);
+  }
+
+  // Climbs the filesystem tree until we get to the root, looking for the first
+  // node_modules directory which has a matching module and filename.
+  let prevDir = '';
+  let dir = path.dirname(source);
+  while (prevDir !== dir) {
+    const searchPaths = subpathsWithExts.map((subpathWithExt) =>
+      path.join(dir, subpathWithExt),
+    );
+    for (const searchPath of searchPaths) {
+      if (fs.existsSync(searchPath)) {
+        return { file: searchPath };
+      }
+    }
+    prevDir = dir;
+    dir = path.dirname(dir);
+  }
+
+  // Returning null is not itself an error, it tells sass to instead try the
+  // next import resolution method if one exists
+  return null;
+};

src/options.ts

@@ -13,13 +13,9 @@ export interface PostCssOptions {
   useConfig?: boolean;
 }
 
-export interface ExtraSassOptions {
-  enableWebpackTildeImports?: boolean;
-}
-
 export interface RendererOptions {
   less?: Partial<Less.Options>;
-  sass?: Partial<SassOptions> & ExtraSassOptions;
+  sass?: Partial<SassOptions>;
   stylus?: Partial<StylusRenderOptions>;
 }