feat: add Stylus support (#91)

Author: xiaoboost

README.md

@@ -198,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'`.
 
@@ -253,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

@@ -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();
+    });
+  });
 });

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -1,5 +1,5 @@
 export type isCSSFn = (fileName: string) => boolean;
-const DEFAULT_REGEXP = /\.module\.(c|le|sa|sc)ss$/;
+const DEFAULT_REGEXP = /\.module\.(((c|le|sa|sc)ss)|styl)$/;
 
 const isRelative = (fileName: string) => /^\.\.?($|[\\/])/.test(fileName);
 

src/helpers/cssExtensions.ts

@@ -2,6 +2,7 @@ import path from 'path';
 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 { Logger } from './logger';
@@ -12,12 +13,14 @@ export const enum FileTypes {
   less = 'less',
   sass = 'sass',
   scss = 'scss',
+  styl = 'styl',
 }
 
 export const getFileType = (fileName: string) => {
   if (fileName.endsWith('.css')) return FileTypes.css;
   if (fileName.endsWith('.less')) return FileTypes.less;
   if (fileName.endsWith('.sass')) return FileTypes.sass;
+  if (fileName.endsWith('.styl')) return FileTypes.styl;
   return FileTypes.scss;
 };
 
@@ -80,6 +83,11 @@ export const getClasses = ({
           ...sassOptions,
         })
         .css.toString();
+    } else if (fileType === FileTypes.styl) {
+      transformedCss = stylus(css, {
+        ...(rendererOptions.stylus || {}),
+        filename: fileName,
+      }).render();
     } else {
       transformedCss = css;
     }

src/helpers/getClasses.ts

@@ -4,6 +4,10 @@ import { DotenvConfigOptions } from 'dotenv/types';
 import { CSSExports } from 'icss-utils';
 import { Logger } from './helpers/logger';
 
+import stylus from 'stylus';
+
+type StylusRenderOptions = Parameters<typeof stylus>[1];
+
 export interface PostCssOptions {
   excludePlugins?: string[];
   useConfig?: boolean;
@@ -12,6 +16,7 @@ export interface PostCssOptions {
 export interface RendererOptions {
   less?: Partial<Less.Options>;
   sass?: Partial<SassOptions>;
+  stylus?: Partial<StylusRenderOptions>;
 }
 
 export interface Options {