From 906b2f5bf73d02cebe119b2bb917d7fe529622c1 Mon Sep 17 00:00:00 2001 From: mrmckeb Date: Wed, 23 Jul 2025 19:28:45 +1000 Subject: [PATCH] feat: make Stylus optional dependency --- package.json | 4 +- pnpm-lock.yaml | 20 ++- .../__snapshots__/getDtsSnapshot.test.ts.snap | 137 ------------------ src/helpers/__tests__/getDtsSnapshot.test.ts | 8 +- src/helpers/getCssExports.ts | 6 +- 5 files changed, 24 insertions(+), 151 deletions(-) diff --git a/package.json b/package.json index d06f0e2..e5ca6e8 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cae13d..b687d83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,13 +47,15 @@ dependencies: source-map-js: specifier: ^1.0.2 version: 1.0.2 - stylus: - specifier: ^0.62.0 - version: 0.62.0 tsconfig-paths: specifier: ^4.2.0 version: 4.2.0 +optionalDependencies: + stylus: + specifier: ^0.62.0 + version: 0.62.0 + devDependencies: '@types/icss-utils': specifier: ^5.1.2 @@ -138,6 +140,7 @@ packages: /@adobe/css-tools@4.3.3: resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} dev: false + optional: true /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} @@ -1538,7 +1541,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.22.3 - caniuse-lite: 1.0.30001585 + caniuse-lite: 1.0.30001727 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -1658,7 +1661,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001585 + caniuse-lite: 1.0.30001727 electron-to-chromium: 1.4.665 node-releases: 2.0.14 update-browserslist-db: 1.0.13(browserslist@4.22.3) @@ -1696,8 +1699,8 @@ packages: engines: {node: '>=10'} dev: true - /caniuse-lite@1.0.30001585: - resolution: {integrity: sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==} + /caniuse-lite@1.0.30001727: + resolution: {integrity: sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==} dev: true /chalk@2.4.2: @@ -4059,6 +4062,7 @@ packages: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} requiresBuild: true dev: false + optional: true /semver@5.7.2: resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==} @@ -4145,6 +4149,7 @@ packages: resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} engines: {node: '>= 8'} dev: false + optional: true /sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} @@ -4239,6 +4244,7 @@ packages: transitivePeerDependencies: - supports-color dev: false + optional: true /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} diff --git a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap index 92ae0af..0abb59e 100644 --- a/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap +++ b/src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap @@ -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; diff --git a/src/helpers/__tests__/getDtsSnapshot.test.ts b/src/helpers/__tests__/getDtsSnapshot.test.ts index 0dbd98d..7491022 100644 --- a/src/helpers/__tests__/getDtsSnapshot.test.ts +++ b/src/helpers/__tests__/getDtsSnapshot.test.ts @@ -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'); diff --git a/src/helpers/getCssExports.ts b/src/helpers/getCssExports.ts index 0637cb9..0776811 100644 --- a/src/helpers/getCssExports.ts +++ b/src/helpers/getCssExports.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;