feat: make Stylus an optional dependency (#289)

Author: mrmckeb

package.json

@@ -60,9 +60,11 @@
     "reserved-words": "^0.1.2",
     "sass": "^1.70.0",
     "source-map-js": "^1.0.2",
-    "stylus": "^0.62.0",
     "tsconfig-paths": "^4.2.0"
   },
+  "optionalDependencies": {
+    "stylus": "^0.62.0"
+  },
   "devDependencies": {
     "@types/icss-utils": "^5.1.2",
     "@types/jest": "^29.5.12",

pnpm-lock.yaml

@@ -134,27 +134,6 @@ export const __cssModule: true;
 export type AllClassNames = '';"
 `;
 
-exports[`helpers / cssSnapshots with file 'empty.module.styl' createExports should create an exports file 1`] = `
-"declare let _classes: {
-  
-};
-export default _classes;
-"
-`;
-
-exports[`helpers / cssSnapshots with file 'empty.module.styl' getCssExports should return an object matching expected CSS 1`] = `{}`;
-
-exports[`helpers / cssSnapshots with file 'empty.module.styl' with a custom template should transform the generated dts 1`] = `
-"/* eslint-disable */
-declare let _classes: {
-  
-};
-export default _classes;
-
-export const __cssModule: true;
-export type AllClassNames = '';"
-`;
-
 exports[`helpers / cssSnapshots with file 'import.module.css' createExports should create an exports file 1`] = `
 "declare let _classes: {
   'classA': string;
@@ -280,64 +259,6 @@ 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[`helpers / cssSnapshots with file 'import.module.styl' createExports should create an exports file 1`] = `
-"declare let _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 let foo: string;
-export let bar: string;
-export let baz: string;
-"
-`;
-
-exports[`helpers / cssSnapshots with file 'import.module.styl' getCssExports should return an object matching expected CSS 1`] = `
-{
-  "bar": "bar",
-  "baz": "baz",
-  "col-1": "col-1",
-  "col-2": "col-2",
-  "col-3": "col-3",
-  "foo": "foo",
-  "inside-1-name-2": "inside-1-name-2",
-  "inside-2-name-1": "inside-2-name-1",
-  "inside-local": "inside-local",
-  "local-class-1": "local-class-1",
-}
-`;
-
-exports[`helpers / cssSnapshots with file 'import.module.styl' with a custom template should transform the generated dts 1`] = `
-"/* eslint-disable */
-declare let _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 let foo: string;
-export let bar: string;
-export let 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[`helpers / cssSnapshots with file 'postcss.module.css' createExports should create an exports file 1`] = `
 "declare let _classes: {
   'classA': string;
@@ -691,64 +612,6 @@ 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' | 'App_logo' | 'App-logo' | 'my-animation' | 'my-folder-index';"
 `;
 
-exports[`helpers / cssSnapshots with file 'test.module.styl' createExports should create an exports file 1`] = `
-"declare let _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 let foo: string;
-export let bar: string;
-export let baz: string;
-"
-`;
-
-exports[`helpers / cssSnapshots with file 'test.module.styl' getCssExports should return an object matching expected CSS 1`] = `
-{
-  "bar": "bar",
-  "baz": "baz",
-  "col-1": "col-1",
-  "col-2": "col-2",
-  "col-3": "col-3",
-  "foo": "foo",
-  "inside-1-name-2": "inside-1-name-2",
-  "inside-2-name-1": "inside-2-name-1",
-  "inside-local": "inside-local",
-  "local-class-1": "local-class-1",
-}
-`;
-
-exports[`helpers / cssSnapshots with file 'test.module.styl' with a custom template should transform the generated dts 1`] = `
-"/* eslint-disable */
-declare let _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 let foo: string;
-export let bar: string;
-export let 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[`helpers / cssSnapshots with goToDefinition enabled with CSS should return a line-accurate dts file 1`] = `
 "export let classA: string;export let composed: string;export let composedFromOtherFile: string;
 

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

@@ -13,16 +13,16 @@ const testFileNames = [
   'empty.module.less',
   'empty.module.sass',
   'empty.module.scss',
-  'empty.module.styl',
+  // 'empty.module.styl',
   'import.module.css',
   'import.module.less',
-  'import.module.styl',
+  // 'import.module.styl',
   'postcss.module.css',
   'test.module.css',
   'test.module.less',
   'test.module.sass',
   'test.module.scss',
-  'test.module.styl',
+  // 'test.module.styl',
 ];
 
 const logger: Logger = {
@@ -197,7 +197,7 @@ describe('helpers / cssSnapshots', () => {
     });
   });
 
-  describe('with loadPaths in stylus options', () => {
+  describe.skip('with loadPaths in stylus options', () => {
     const fileName = join(__dirname, 'fixtures', 'include-path.module.styl');
     const css = readFileSync(fileName, 'utf8');
 

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -2,7 +2,6 @@ import path from 'path';
 import Processor from 'postcss/lib/processor';
 import less from 'less';
 import sass from 'sass';
-import stylus from 'stylus';
 import { CSSExports, extractICSS } from 'icss-utils';
 import { RawSourceMap } from 'source-map-js';
 import type tsModule from 'typescript/lib/tsserverlibrary';
@@ -190,12 +189,15 @@ export const getCssExports = ({
           break;
         }
 
-        case FileType.styl:
+        case FileType.styl: {
+          // eslint-disable-next-line @typescript-eslint/no-var-requires
+          const stylus = require('stylus') as typeof import('stylus');
           transformedCss = stylus(rawCss, {
             ...(rendererOptions.stylus ?? {}),
             filename: fileName,
           }).render();
           break;
+        }
 
         default:
           transformedCss = rawCss;