Merge branch 'release/2.3.0'

Author: mrmckeb

README.md

@@ -11,13 +11,22 @@ for [CSS Modules](https://github.com/css-modules/css-modules).
 
 ## Table of contents
 
-- [Installation](#installation)
-  - [Importing CSS](#importing-css)
-  - [Options](#options)
-  - [Visual Studio Code](#visual-studio-code)
-  - [Custom definitions](#custom-definitions)
-- [Troubleshooting](#troubleshooting)
-- [About this project](#about-this-project)
+- [typescript-plugin-css-modules](#typescript-plugin-css-modules)
+  - [Table of contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Importing CSS](#importing-css)
+    - [Options](#options)
+      - [`classnameTransform`](#classnametransform)
+      - [`customRenderer`](#customrenderer)
+      - [`customTemplate`](#customtemplate)
+      - [`postCssOptions`](#postcssoptions)
+      - [`rendererOptions`](#rendereroptions)
+    - [Visual Studio Code](#visual-studio-code)
+      - [Recommended usage](#recommended-usage)
+      - [Alternative usage](#alternative-usage)
+    - [Custom definitions](#custom-definitions)
+  - [Troubleshooting](#troubleshooting)
+  - [About this project](#about-this-project)
 
 ## Installation
 
@@ -113,7 +122,7 @@ When a custom renderer is provided, not other renderers will be used.
 
 The path to the `customRenderer` must be relative to the project root (i.e. `./myRenderer.js`).
 
-The custom renderer itself should be a JavaScript file. The function will be called with two arguments: a `css` string, and an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L33-L41)). It must be synchronous, and must return valid CSS.
+The custom renderer itself should be a JavaScript file. The function will be called with three arguments: a `css` string, an `options` object (see [`options.ts`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/options.ts#L33-L41)), and a `compilerOptions` object - which contains options as set in your `tsconfig.json`. It must be synchronous, and must return valid CSS.
 
 ```js
 module.exports = (css, { fileName, logger }) => {
@@ -130,6 +139,10 @@ You can find an example custom renderer in our test fixtures ([`customRenderer.j
 
 The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/master/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
 
+> 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).
+
 #### `customTemplate`
 
 The `customTemplate` is an advanced option, letting you provide a template for the generated TypeScript declarations.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-plugin-css-modules",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "lib/index.js",
   "author": "Brody McKee <[email protected]>",
   "license": "MIT",
@@ -57,7 +57,6 @@
     ]
   },
   "prettier": {
-    "arrowParens": "always",
     "singleQuote": true,
     "trailingComma": "all"
   },
@@ -74,30 +73,30 @@
     "postcss-icss-selectors": "^2.0.3",
     "postcss-load-config": "^2.1.0",
     "reserved-words": "^0.1.2",
-    "sass": "^1.26.1"
+    "sass": "^1.26.5"
   },
   "devDependencies": {
     "@types/icss-utils": "^4.1.0",
-    "@types/jest": "^25.1.3",
+    "@types/jest": "^25.2.1",
     "@types/less": "^3.0.1",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/node": "^12.12.17",
     "@types/postcss-load-config": "^2.0.1",
     "@types/postcss-nested": "^4.1.0",
     "@types/reserved-words": "^0.1.0",
     "@types/sass": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^2.21.0",
-    "@typescript-eslint/parser": "^2.21.0",
+    "@typescript-eslint/eslint-plugin": "^2.29.0",
+    "@typescript-eslint/parser": "^2.29.0",
     "bootstrap": "4.4.1",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.0",
-    "husky": "^4.2.3",
-    "jest": "^25.1.0",
-    "lint-staged": "^10.0.8",
+    "eslint-config-prettier": "^6.11.0",
+    "husky": "^4.2.5",
+    "jest": "^25.4.0",
+    "lint-staged": "^10.1.7",
     "postcss-import-sync2": "^1.1.0",
-    "prettier": "^1.19.1",
-    "ts-jest": "^25.2.1",
-    "typescript": "^3.8.2"
+    "prettier": "^2.0.5",
+    "ts-jest": "^25.4.0",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "typescript": "^3.0.0"

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -4,6 +4,7 @@ import { join } from 'path';
 import postcss from 'postcss';
 import postcssIcssSelectors from 'postcss-icss-selectors';
 import postcssImportSync from 'postcss-import-sync2';
+import tsModule from 'typescript/lib/tsserverlibrary';
 import { getClasses } from '../getClasses';
 import { createExports } from '../createExports';
 import { Logger } from '../logger';
@@ -28,6 +29,8 @@ const logger: Logger = {
 
 const options: Options = {};
 
+const compilerOptions: tsModule.CompilerOptions = {};
+
 const processor = postcss([
   postcssImportSync(),
   postcssIcssSelectors({ mode: 'local' }),
@@ -46,6 +49,7 @@ describe('utils / cssSnapshots', () => {
         logger,
         options,
         processor,
+        compilerOptions,
       });
     });
 
@@ -101,6 +105,7 @@ describe('utils / cssSnapshots', () => {
         logger,
         options,
         processor,
+        compilerOptions,
       });
 
       expect(classes.test).toMatchSnapshot();
@@ -121,6 +126,7 @@ describe('utils / cssSnapshots', () => {
         logger,
         options,
         processor,
+        compilerOptions,
       });
 
       expect(classes).toMatchSnapshot();
@@ -145,6 +151,7 @@ describe('utils / cssSnapshots', () => {
         logger,
         options,
         processor,
+        compilerOptions,
       });
 
       expect(classes).toMatchSnapshot();

src/helpers/getClasses.ts

@@ -3,6 +3,7 @@ import postcss from 'postcss';
 import less from 'less';
 import sass from 'sass';
 import { extractICSS } from 'icss-utils';
+import tsModule from 'typescript/lib/tsserverlibrary';
 import { Logger } from './logger';
 import { Options, CustomRenderer } from '../options';
 
@@ -28,12 +29,14 @@ export const getClasses = ({
   logger,
   options,
   processor,
+  compilerOptions,
 }: {
   css: string;
   fileName: string;
   logger: Logger;
   options: Options;
   processor: postcss.Processor;
+  compilerOptions: tsModule.CompilerOptions;
 }) => {
   try {
     const fileType = getFileType(fileName);
@@ -44,7 +47,11 @@ export const getClasses = ({
     if (options.customRenderer) {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const customRenderer = require(options.customRenderer) as CustomRenderer;
-      transformedCss = customRenderer(css, { fileName, logger });
+      transformedCss = customRenderer(css, {
+        fileName,
+        logger,
+        compilerOptions,
+      });
     } else if (fileType === FileTypes.less) {
       less.render(
         css,

src/helpers/getDtsSnapshot.ts

@@ -12,6 +12,7 @@ export const getDtsSnapshot = (
   scriptSnapshot: ts.IScriptSnapshot,
   options: Options,
   logger: Logger,
+  compilerOptions: tsModule.CompilerOptions,
 ) => {
   const css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
 
@@ -24,7 +25,14 @@ export const getDtsSnapshot = (
     return scriptSnapshot;
   }
 
-  const classes = getClasses({ css, fileName, logger, options, processor });
+  const classes = getClasses({
+    css,
+    fileName,
+    logger,
+    options,
+    processor,
+    compilerOptions,
+  });
   const dts = createExports({ classes, fileName, logger, options });
   return ts.ScriptSnapshot.fromString(dts);
 };

src/index.ts

@@ -26,6 +26,7 @@ function init({ typescript: ts }: { typescript: typeof tsModule }) {
   function create(info: ts.server.PluginCreateInfo) {
     const logger = createLogger(info);
     const directory = info.project.getCurrentDirectory();
+    const compilerOptions = info.project.getCompilerOptions();
 
     // TypeScript plugins have a `cwd` of `/`, which causes issues with import resolution.
     process.chdir(directory);
@@ -73,7 +74,20 @@ function init({ typescript: ts }: { typescript: typeof tsModule }) {
 
     // If a custom renderer is provided, resolve the path.
     if (options.customRenderer) {
-      options.customRenderer = path.resolve(directory, options.customRenderer);
+      if (fs.existsSync(path.resolve(directory, options.customRenderer))) {
+        options.customRenderer = path.resolve(
+          directory,
+          options.customRenderer,
+        );
+      } else if (fs.existsSync(require.resolve(options.customRenderer))) {
+        options.customRenderer = require.resolve(options.customRenderer);
+      } else {
+        logger.error(
+          new Error(
+            `The file or package for \`customRenderer\` '${options.customRenderer}' could not be resolved.`,
+          ),
+        );
+      }
     }
 
     // If a custom template is provided, resolve the path.
@@ -106,6 +120,7 @@ function init({ typescript: ts }: { typescript: typeof tsModule }) {
           scriptSnapshot,
           options,
           logger,
+          compilerOptions,
         );
       }
       const sourceFile = _createLanguageServiceSourceFile(
@@ -134,6 +149,7 @@ function init({ typescript: ts }: { typescript: typeof tsModule }) {
           scriptSnapshot,
           options,
           logger,
+          compilerOptions,
         );
       }
       sourceFile = _updateLanguageServiceSourceFile(

src/options.ts

@@ -1,4 +1,5 @@
 import { Options as SassOptions } from 'sass';
+import tsModule from 'typescript/lib/tsserverlibrary';
 import { DotenvConfigOptions } from 'dotenv/types';
 import { CSSExports } from 'icss-utils';
 import { Logger } from './helpers/logger';
@@ -33,6 +34,7 @@ export type ClassnameTransformOptions =
 export interface CustomRendererOptions {
   fileName: string;
   logger: Logger;
+  compilerOptions: tsModule.CompilerOptions;
 }
 
 export type CustomRenderer = (