Merge branch 'release/2.4.0'

Author: mrmckeb

README.md

@@ -12,7 +12,8 @@ for [CSS Modules](https://github.com/css-modules/css-modules).
 ## Table of contents
 
 - [typescript-plugin-css-modules](#typescript-plugin-css-modules)
-  - [Table of contents](#table-of-contents)
+  - [Table of contents](#about-this-plugin)
+  - [About this plugin](#table-of-contents)
   - [Installation](#installation)
     - [Importing CSS](#importing-css)
     - [Options](#options)
@@ -28,6 +29,22 @@ for [CSS Modules](https://github.com/css-modules/css-modules).
   - [Troubleshooting](#troubleshooting)
   - [About this project](#about-this-project)
 
+## About this plugin
+
+This plugin provides type information to IDEs and any other tools that work with [TypeScript language service plugins](https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin#whats-a-language-service-plugin).
+
+At this time, TypeScript does not support plugins during compilation. This means that this plugin cannot:
+
+- provide errors during compilation, or
+- add CSS module support to your project.
+
+For more information, and/or to add support for this feature, see: https://github.com/microsoft/TypeScript/issues/16607.
+
+If you need a different solution, these projects might help:
+
+- For Jest support, see https://www.npmjs.com/package/jest-css-modules-transform (one of a few options).
+- For Webpack configuration, see https://webpack.js.org/loaders/css-loader/#pure-css-css-modules-and-postcss for an example.
+
 ## Installation
 
 To install with Yarn:
@@ -54,6 +71,8 @@ Once installed, add this plugin to your `tsconfig.json`:
 
 If you're using Visual Studio Code, please also follow these [instructions](#visual-studio-code).
 
+As Webpack configurations vary, you may need to provide additional [options](#options) to this plugin to match your project configuration. For Create React App users, this plugin will work without additional configuration.
+
 ### Importing CSS
 
 A default export is always provided for your CSS module.
@@ -179,10 +198,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` | `{}`          | Set [renderer options for Sass](https://sass-lang.com/documentation/js-api#options). |
+| 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'`.
 
@@ -212,7 +232,7 @@ If your project doesn't already have global declarations for CSS Modules, you wi
 
 Where you store global declarations is up to you. An example might look like: `./src/custom.d.ts`.
 
-The below is an example that you can copy or modify. If you use a `customMatcher`, you'll need to modify this.
+The below is an example that you can copy or modify (you only declarations for exensions used in your project). If you use a `customMatcher`, you'll need to modify this.
 
 ```ts
 declare module '*.module.css' {
@@ -234,6 +254,11 @@ declare module '*.module.less' {
   const classes: { [key: string]: string };
   export default classes;
 }
+
+declare module '*.module.styl' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
 ```
 
 ## Troubleshooting

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-plugin-css-modules",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "lib/index.js",
   "author": "Brody McKee <[email protected]>",
   "license": "MIT",
@@ -15,6 +15,7 @@
     "scss",
     "sass",
     "less",
+    "stylus",
     "modules",
     "plugin",
     "postcss",
@@ -73,7 +74,8 @@
     "postcss-icss-selectors": "^2.0.3",
     "postcss-load-config": "^2.1.0",
     "reserved-words": "^0.1.2",
-    "sass": "^1.26.5"
+    "sass": "^1.26.5",
+    "stylus": "^0.54.7"
   },
   "devDependencies": {
     "@types/icss-utils": "^4.1.0",
@@ -85,6 +87,7 @@
     "@types/postcss-nested": "^4.1.0",
     "@types/reserved-words": "^0.1.0",
     "@types/sass": "^1.16.0",
+    "@types/stylus": "^0.48.33",
     "@typescript-eslint/eslint-plugin": "^2.29.0",
     "@typescript-eslint/parser": "^2.29.0",
     "bootstrap": "4.4.1",

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

@@ -72,6 +72,27 @@ export const __cssModule: true;
 export type AllClassNames = '';"
 `;
 
+exports[`utils / cssSnapshots with file 'empty.module.styl' createExports should create an exports file 1`] = `
+"declare const classes: {
+
+};
+export default classes;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'empty.module.styl' getClasses should return an object matching expected CSS 1`] = `Object {}`;
+
+exports[`utils / cssSnapshots with file 'empty.module.styl' with a custom template should transform the generated dts 1`] = `
+"/* eslint-disable */
+declare const classes: {
+
+};
+export default classes;
+
+export const __cssModule: true;
+export type AllClassNames = '';"
+`;
+
 exports[`utils / cssSnapshots with file 'import.module.css' createExports should create an exports file 1`] = `
 "declare const classes: {
 'classA': string;
@@ -182,6 +203,64 @@ export const __cssModule: true;
 export type AllClassNames = 'nested-class-parent' | 'child-class' | 'selector-blue' | 'selector-green' | 'selector-red' | 'column-1' | 'column-2' | 'column-3' | 'column-4' | 'color-set';"
 `;
 
+exports[`utils / cssSnapshots with file 'import.module.styl' createExports should create an exports file 1`] = `
+"declare const classes: {
+'foo': string;
+  'bar': string;
+  'baz': string;
+  'col-1': string;
+  'col-2': string;
+  'col-3': string;
+  'local-class-1': string;
+  'inside-local': string;
+  'inside-1-name-2': string;
+  'inside-2-name-1': string;
+};
+export default classes;
+export const foo: string;
+export const bar: string;
+export const baz: string;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'import.module.styl' getClasses should return an object matching expected CSS 1`] = `
+Object {
+  "bar": "import-module__bar---2N4cR",
+  "baz": "import-module__baz---6mQbB",
+  "col-1": "import-module__col-1---2QW7j",
+  "col-2": "import-module__col-2---2CRRS",
+  "col-3": "import-module__col-3---17Luq",
+  "foo": "import-module__foo---FJflO",
+  "inside-1-name-2": "import-module__inside-1-name-2---wLnoq",
+  "inside-2-name-1": "import-module__inside-2-name-1---1GRhn",
+  "inside-local": "import-module__inside-local---1JuOc",
+  "local-class-1": "import-module__local-class-1---3QupT",
+}
+`;
+
+exports[`utils / cssSnapshots with file 'import.module.styl' with a custom template should transform the generated dts 1`] = `
+"/* eslint-disable */
+declare const classes: {
+'foo': string;
+  'bar': string;
+  'baz': string;
+  'col-1': string;
+  'col-2': string;
+  'col-3': string;
+  'local-class-1': string;
+  'inside-local': string;
+  'inside-1-name-2': string;
+  'inside-2-name-1': string;
+};
+export default classes;
+export const foo: string;
+export const bar: string;
+export const baz: string;
+
+export const __cssModule: true;
+export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' | 'local-class-1' | 'inside-local' | 'inside-1-name-2' | 'inside-2-name-1';"
+`;
+
 exports[`utils / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = `
 "declare const classes: {
 'classA': string;
@@ -456,9 +535,74 @@ export const __cssModule: true;
 export type AllClassNames = 'local-class-inside-global' | 'local-class' | 'local-class-2' | 'local-class-inside-local' | 'reserved-words' | 'default' | 'const' | 'nested-class-parent' | 'child-class' | 'nested-class-parent--extended' | 'section-1' | 'section-2' | 'section-3' | 'section-4' | 'section-5' | 'section-6' | 'section-7' | 'section-8' | 'section-9' | 'class-with-mixin';"
 `;
 
+exports[`utils / cssSnapshots with file 'test.module.styl' createExports should create an exports file 1`] = `
+"declare const classes: {
+'foo': string;
+  'bar': string;
+  'baz': string;
+  'col-1': string;
+  'col-2': string;
+  'col-3': string;
+  'local-class-1': string;
+  'inside-local': string;
+  'inside-1-name-2': string;
+  'inside-2-name-1': string;
+};
+export default classes;
+export const foo: string;
+export const bar: string;
+export const baz: string;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'test.module.styl' getClasses should return an object matching expected CSS 1`] = `
+Object {
+  "bar": "test-module__bar---2WWom",
+  "baz": "test-module__baz---1Rs9U",
+  "col-1": "test-module__col-1---1XP3K",
+  "col-2": "test-module__col-2---2nPwS",
+  "col-3": "test-module__col-3---3CSSb",
+  "foo": "test-module__foo---2pGaO",
+  "inside-1-name-2": "test-module__inside-1-name-2---3Zdgw",
+  "inside-2-name-1": "test-module__inside-2-name-1---3PYHl",
+  "inside-local": "test-module__inside-local---2KzUE",
+  "local-class-1": "test-module__local-class-1---3piX9",
+}
+`;
+
+exports[`utils / cssSnapshots with file 'test.module.styl' with a custom template should transform the generated dts 1`] = `
+"/* eslint-disable */
+declare const classes: {
+'foo': string;
+  'bar': string;
+  'baz': string;
+  'col-1': string;
+  'col-2': string;
+  'col-3': string;
+  'local-class-1': string;
+  'inside-local': string;
+  'inside-1-name-2': string;
+  'inside-2-name-1': string;
+};
+export default classes;
+export const foo: string;
+export const bar: string;
+export const baz: string;
+
+export const __cssModule: true;
+export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' | 'local-class-1' | 'inside-local' | 'inside-1-name-2' | 'inside-2-name-1';"
+`;
+
 exports[`utils / cssSnapshots with includePaths in sass options should find external file from includePaths 1`] = `
 Object {
   "big-font": "include-path-module__big-font---Td7hY",
   "class-with-mixin": "include-path-module__class-with-mixin---1u87_",
 }
 `;
+
+exports[`utils / cssSnapshots with includePaths in stylus options should find external file from includePaths 1`] = `
+Object {
+  "external-class": "include-path-module__external-class---ecH0A",
+  "include-path": "include-path-module__include-path---2f2uR",
+}
+`;

src/helpers/__tests__/cssExtensions.test.ts

@@ -7,13 +7,17 @@ describe('utils / cssExtensions', () => {
     it('should match CSS module extensions', () => {
       expect(isCSS('./myfile.module.scss')).toBe(true);
       expect(isCSS('./myfile.module.sass')).toBe(true);
+      expect(isCSS('./myfile.module.less')).toBe(true);
+      expect(isCSS('./myfile.module.styl')).toBe(true);
       expect(isCSS('./myfile.module.css')).toBe(true);
     });
 
     it('should not match non-CSS module extensions', () => {
       expect(isCSS('./myfile.module.s')).toBe(false);
       expect(isCSS('./myfile.scss')).toBe(false);
       expect(isCSS('./myfile.sass')).toBe(false);
+      expect(isCSS('./myfile.less')).toBe(false);
+      expect(isCSS('./myfile.styl')).toBe(false);
       expect(isCSS('./myfile.css')).toBe(false);
     });
   });

src/helpers/__tests__/external/package/_external.module.styl

@@ -0,0 +1,5 @@
+.include-path
+    display inline
+
+.external-class
+    display inline

src/helpers/__tests__/fixtures/empty.module.styl

@@ -0,0 +1 @@
+@import 'test.module.styl';

src/helpers/__tests__/fixtures/import.module.styl

@@ -0,0 +1 @@
+@import 'package/_external.module.styl';

src/helpers/__tests__/fixtures/include-path.module.styl

@@ -0,0 +1,24 @@
+mySelectors = '.foo,.bar,.baz'
+
+{mySelectors}
+    background: #000
+
+for row in 1 2 3
+    .col-{row}
+        height: 10px * row
+
+:local(.local-class-1)
+    .inside-local
+        color rebeccapurple
+
+inside(name1, name2, indent, outside)
+    .inside-1-{name1}
+        outside(indent)
+
+    .inside-2-{name2}
+        outside(indent)
+
+inside('name-2', 'name-1', 24px, @(indent) {
+    margin-left indent
+    margin-right indent
+})

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

@@ -13,13 +13,16 @@ import { Options } from '../../options';
 const testFileNames = [
   'test.module.css',
   'test.module.less',
+  'test.module.styl',
   'test.module.scss',
   'test.module.sass',
   'empty.module.less',
   'empty.module.sass',
   'empty.module.scss',
+  'empty.module.styl',
   'import.module.css',
   'import.module.less',
+  'import.module.styl',
 ];
 
 const logger: Logger = {
@@ -157,4 +160,30 @@ describe('utils / cssSnapshots', () => {
       expect(classes).toMatchSnapshot();
     });
   });
+
+  describe('with includePaths in stylus options', () => {
+    const fileName = join(__dirname, 'fixtures', 'include-path.module.styl');
+    const css = readFileSync(fileName, 'utf8');
+
+    const options: Options = {
+      rendererOptions: {
+        stylus: {
+          paths: [join(__dirname, 'external')],
+        },
+      },
+    };
+
+    it('should find external file from includePaths', () => {
+      const classes = getClasses({
+        css,
+        fileName,
+        logger,
+        options,
+        processor,
+        compilerOptions,
+      });
+
+      expect(classes).toMatchSnapshot();
+    });
+  });
 });