From 297dacb805fa109a5b63425870778999501ca8ce Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Sun, 26 Jan 2025 15:54:57 +0800 Subject: [PATCH] feat: support stylus in bundleless mode --- packages/core/src/constant.ts | 9 +- pnpm-lock.yaml | 105 +++++++++++-- .../style/sass/bundle/rslib.config.ts | 1 - .../style/stylus/__fixtures__/src/a.styl | 4 + .../stylus/__fixtures__/src/assets/logo.svg | 7 + .../stylus/__fixtures__/src/b.module.styl | 2 + .../style/stylus/__fixtures__/src/index.js | 4 + .../style/stylus/bundle-false/package.json | 9 ++ .../style/stylus/bundle-false/rslib.config.ts | 23 +++ .../style/stylus/bundle/package.json | 9 ++ .../style/stylus/bundle/rslib.config.ts | 16 ++ tests/integration/style/stylus/index.test.ts | 141 ++++++++++++++++++ 12 files changed, 314 insertions(+), 16 deletions(-) create mode 100644 tests/integration/style/stylus/__fixtures__/src/a.styl create mode 100644 tests/integration/style/stylus/__fixtures__/src/assets/logo.svg create mode 100644 tests/integration/style/stylus/__fixtures__/src/b.module.styl create mode 100644 tests/integration/style/stylus/__fixtures__/src/index.js create mode 100644 tests/integration/style/stylus/bundle-false/package.json create mode 100644 tests/integration/style/stylus/bundle-false/rslib.config.ts create mode 100644 tests/integration/style/stylus/bundle/package.json create mode 100644 tests/integration/style/stylus/bundle/rslib.config.ts create mode 100644 tests/integration/style/stylus/index.test.ts diff --git a/packages/core/src/constant.ts b/packages/core/src/constant.ts index a05f947bf..188f01a7d 100644 --- a/packages/core/src/constant.ts +++ b/packages/core/src/constant.ts @@ -33,7 +33,14 @@ const JS_EXTENSIONS: string[] = [ 'ctsx', ] as const; -const CSS_EXTENSIONS: string[] = ['css', 'sass', 'scss', 'less'] as const; +const CSS_EXTENSIONS: string[] = [ + 'css', + 'sass', + 'scss', + 'less', + 'styl', + 'stylus', +] as const; export const JS_EXTENSIONS_PATTERN: RegExp = new RegExp( `\\.(${JS_EXTENSIONS.join('|')})$`, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fcd188d67..437131de1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,7 +58,7 @@ importers: version: 5.7.3 vitest: specifier: ^3.0.4 - version: 3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(terser@5.37.0) + version: 3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) zx: specifier: ^8.3.0 version: 8.3.0 @@ -392,7 +392,7 @@ importers: devDependencies: '@codspeed/vitest-plugin': specifier: ^4.0.0 - version: 4.0.0(vite@5.3.3(@types/node@22.8.1)(terser@5.37.0))(vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(terser@5.37.0)) + version: 4.0.0(vite@5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0))(vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0)) '@module-federation/rsbuild-plugin': specifier: ^0.8.9 version: 0.8.9(@module-federation/enhanced@0.8.9(@rspack/core@1.2.2(@swc/helpers@0.5.15))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(webpack@5.96.1))(@rsbuild/core@1.2.2) @@ -856,6 +856,18 @@ importers: tests/integration/style/style-inject/bundle: {} + tests/integration/style/stylus/bundle: + devDependencies: + '@rsbuild/plugin-stylus': + specifier: ^1.0.7 + version: 1.0.7(@rsbuild/core@1.2.2)(@rspack/core@1.2.2(@swc/helpers@0.5.15))(webpack@5.96.1) + + tests/integration/style/stylus/bundle-false: + devDependencies: + '@rsbuild/plugin-stylus': + specifier: ^1.0.7 + version: 1.0.7(@rsbuild/core@1.2.2)(@rspack/core@1.2.2(@swc/helpers@0.5.15))(webpack@5.96.1) + tests/integration/style/tailwindcss/bundle: devDependencies: tailwindcss: @@ -947,6 +959,9 @@ importers: packages: + '@adobe/css-tools@4.3.3': + resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} + '@alloc/quick-lru@5.2.0': resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} @@ -2001,6 +2016,11 @@ packages: peerDependencies: '@rsbuild/core': 1.x + '@rsbuild/plugin-stylus@1.0.7': + resolution: {integrity: sha512-RkV7LnxuUwJ2LrSOR1yhxQWqZh7cLYLtlyulSD03+Q5xLOmCQbppvEzljoeV84EezOoSaoN+/vT3oBr3qCYNHw==} + peerDependencies: + '@rsbuild/core': 1.x + '@rsbuild/plugin-svgr@1.0.6': resolution: {integrity: sha512-znLFk2fumNObMntkjrpZhO3guXmaQZbqv0JjhqBVng63bNdsJAmfZGXX5He8Avp4VDlv6EJI6BC5SIEs8XspTg==} peerDependencies: @@ -5834,6 +5854,9 @@ packages: engines: {node: '>=16.0.0'} hasBin: true + sax@1.4.1: + resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==} + scheduler@0.23.2: resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} @@ -6118,6 +6141,24 @@ packages: style-to-object@0.4.4: resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==} + stylus-loader@8.1.1: + resolution: {integrity: sha512-Ohe29p3gwJiu1kxq16P80g1qq0FxGtwQevKctLE4su8KUq+Ea06Q6lp7SpcJjaKNrWIuEZQGvESUPt8JpukKVw==} + engines: {node: '>= 18.12.0'} + peerDependencies: + '@rspack/core': 0.x || 1.x + stylus: '>=0.52.4' + webpack: ^5.0.0 + peerDependenciesMeta: + '@rspack/core': + optional: true + webpack: + optional: true + + stylus@0.64.0: + resolution: {integrity: sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA==} + engines: {node: '>=16'} + hasBin: true + sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -6717,6 +6758,8 @@ packages: snapshots: + '@adobe/css-tools@4.3.3': {} + '@alloc/quick-lru@5.2.0': {} '@ampproject/remapping@2.3.0': @@ -7166,11 +7209,11 @@ snapshots: transitivePeerDependencies: - debug - '@codspeed/vitest-plugin@4.0.0(vite@5.3.3(@types/node@22.8.1)(terser@5.37.0))(vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(terser@5.37.0))': + '@codspeed/vitest-plugin@4.0.0(vite@5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0))(vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0))': dependencies: '@codspeed/core': 4.0.0 - vite: 5.3.3(@types/node@22.8.1)(terser@5.37.0) - vitest: 3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(terser@5.37.0) + vite: 5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) + vitest: 3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) transitivePeerDependencies: - debug @@ -7916,6 +7959,18 @@ snapshots: reduce-configs: 1.1.0 sass-embedded: 1.83.4 + '@rsbuild/plugin-stylus@1.0.7(@rsbuild/core@1.2.2)(@rspack/core@1.2.2(@swc/helpers@0.5.15))(webpack@5.96.1)': + dependencies: + '@rsbuild/core': 1.2.2 + deepmerge: 4.3.1 + reduce-configs: 1.1.0 + stylus: 0.64.0 + stylus-loader: 8.1.1(@rspack/core@1.2.2(@swc/helpers@0.5.15))(stylus@0.64.0)(webpack@5.96.1) + transitivePeerDependencies: + - '@rspack/core' + - supports-color + - webpack + '@rsbuild/plugin-svgr@1.0.6(@rsbuild/core@1.2.2)(typescript@5.7.3)': dependencies: '@rsbuild/core': 1.2.2 @@ -8711,13 +8766,13 @@ snapshots: chai: 5.1.2 tinyrainbow: 2.0.0 - '@vitest/mocker@3.0.4(vite@5.3.3(@types/node@22.8.1)(terser@5.37.0))': + '@vitest/mocker@3.0.4(vite@5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0))': dependencies: '@vitest/spy': 3.0.4 estree-walker: 3.0.3 magic-string: 0.30.17 optionalDependencies: - vite: 5.3.3(@types/node@22.8.1)(terser@5.37.0) + vite: 5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) '@vitest/pretty-format@3.0.4': dependencies: @@ -12358,6 +12413,8 @@ snapshots: sass-embedded-win32-ia32: 1.83.4 sass-embedded-win32-x64: 1.83.4 + sax@1.4.1: {} + scheduler@0.23.2: dependencies: loose-envify: 1.4.0 @@ -12696,6 +12753,25 @@ snapshots: dependencies: inline-style-parser: 0.1.1 + stylus-loader@8.1.1(@rspack/core@1.2.2(@swc/helpers@0.5.15))(stylus@0.64.0)(webpack@5.96.1): + dependencies: + fast-glob: 3.3.2 + normalize-path: 3.0.0 + stylus: 0.64.0 + optionalDependencies: + '@rspack/core': 1.2.2(@swc/helpers@0.5.15) + webpack: 5.96.1 + + stylus@0.64.0: + dependencies: + '@adobe/css-tools': 4.3.3 + debug: 4.4.0 + glob: 10.4.5 + sax: 1.4.1 + source-map: 0.7.4 + transitivePeerDependencies: + - supports-color + sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.5 @@ -13085,13 +13161,13 @@ snapshots: '@types/unist': 3.0.3 vfile-message: 4.0.2 - vite-node@3.0.4(@types/node@22.8.1)(terser@5.37.0): + vite-node@3.0.4(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0): dependencies: cac: 6.7.14 debug: 4.4.0 es-module-lexer: 1.6.0 pathe: 2.0.2 - vite: 5.3.3(@types/node@22.8.1)(terser@5.37.0) + vite: 5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) transitivePeerDependencies: - '@types/node' - less @@ -13102,7 +13178,7 @@ snapshots: - supports-color - terser - vite@5.3.3(@types/node@22.8.1)(terser@5.37.0): + vite@5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0): dependencies: esbuild: 0.21.5 postcss: 8.5.1 @@ -13110,12 +13186,13 @@ snapshots: optionalDependencies: '@types/node': 22.8.1 fsevents: 2.3.3 + stylus: 0.64.0 terser: 5.37.0 - vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(terser@5.37.0): + vitest@3.0.4(@types/debug@4.1.12)(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0): dependencies: '@vitest/expect': 3.0.4 - '@vitest/mocker': 3.0.4(vite@5.3.3(@types/node@22.8.1)(terser@5.37.0)) + '@vitest/mocker': 3.0.4(vite@5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0)) '@vitest/pretty-format': 3.0.4 '@vitest/runner': 3.0.4 '@vitest/snapshot': 3.0.4 @@ -13131,8 +13208,8 @@ snapshots: tinyexec: 0.3.2 tinypool: 1.0.2 tinyrainbow: 2.0.0 - vite: 5.3.3(@types/node@22.8.1)(terser@5.37.0) - vite-node: 3.0.4(@types/node@22.8.1)(terser@5.37.0) + vite: 5.3.3(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) + vite-node: 3.0.4(@types/node@22.8.1)(stylus@0.64.0)(terser@5.37.0) why-is-node-running: 2.3.0 optionalDependencies: '@types/debug': 4.1.12 diff --git a/tests/integration/style/sass/bundle/rslib.config.ts b/tests/integration/style/sass/bundle/rslib.config.ts index 8d05f9f82..ebe77cc6a 100644 --- a/tests/integration/style/sass/bundle/rslib.config.ts +++ b/tests/integration/style/sass/bundle/rslib.config.ts @@ -18,6 +18,5 @@ export default defineConfig({ ], output: { target: 'web', - assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, }); diff --git a/tests/integration/style/stylus/__fixtures__/src/a.styl b/tests/integration/style/stylus/__fixtures__/src/a.styl new file mode 100644 index 000000000..61a167af1 --- /dev/null +++ b/tests/integration/style/stylus/__fixtures__/src/a.styl @@ -0,0 +1,4 @@ +body + color red + font 14px Arial, sans-serif + background: url('./assets/logo.svg'); \ No newline at end of file diff --git a/tests/integration/style/stylus/__fixtures__/src/assets/logo.svg b/tests/integration/style/stylus/__fixtures__/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/tests/integration/style/stylus/__fixtures__/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/tests/integration/style/stylus/__fixtures__/src/b.module.styl b/tests/integration/style/stylus/__fixtures__/src/b.module.styl new file mode 100644 index 000000000..0a634441b --- /dev/null +++ b/tests/integration/style/stylus/__fixtures__/src/b.module.styl @@ -0,0 +1,2 @@ +.title-class + font-size: 14px; diff --git a/tests/integration/style/stylus/__fixtures__/src/index.js b/tests/integration/style/stylus/__fixtures__/src/index.js new file mode 100644 index 000000000..92af15c67 --- /dev/null +++ b/tests/integration/style/stylus/__fixtures__/src/index.js @@ -0,0 +1,4 @@ +import './a.styl'; +import style from './b.module.styl'; + +console.log(style); diff --git a/tests/integration/style/stylus/bundle-false/package.json b/tests/integration/style/stylus/bundle-false/package.json new file mode 100644 index 000000000..db1479ae7 --- /dev/null +++ b/tests/integration/style/stylus/bundle-false/package.json @@ -0,0 +1,9 @@ +{ + "name": "style-stylus-bundle-false-test", + "version": "1.0.0", + "private": true, + "type": "module", + "devDependencies": { + "@rsbuild/plugin-stylus": "^1.0.7" + } +} diff --git a/tests/integration/style/stylus/bundle-false/rslib.config.ts b/tests/integration/style/stylus/bundle-false/rslib.config.ts new file mode 100644 index 000000000..7e0587ac7 --- /dev/null +++ b/tests/integration/style/stylus/bundle-false/rslib.config.ts @@ -0,0 +1,23 @@ +import { pluginStylus } from '@rsbuild/plugin-stylus'; +import { defineConfig } from '@rslib/core'; +import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper'; + +export default defineConfig({ + lib: [ + generateBundleEsmConfig({ + bundle: false, + }), + generateBundleCjsConfig({ + bundle: false, + }), + ], + source: { + entry: { + index: ['../__fixtures__/src/**'], + }, + }, + plugins: [pluginStylus()], + output: { + target: 'web', + }, +}); diff --git a/tests/integration/style/stylus/bundle/package.json b/tests/integration/style/stylus/bundle/package.json new file mode 100644 index 000000000..31431d580 --- /dev/null +++ b/tests/integration/style/stylus/bundle/package.json @@ -0,0 +1,9 @@ +{ + "name": "style-stylus-bundle-test", + "version": "1.0.0", + "private": true, + "type": "module", + "devDependencies": { + "@rsbuild/plugin-stylus": "^1.0.7" + } +} diff --git a/tests/integration/style/stylus/bundle/rslib.config.ts b/tests/integration/style/stylus/bundle/rslib.config.ts new file mode 100644 index 000000000..b4ca6eca2 --- /dev/null +++ b/tests/integration/style/stylus/bundle/rslib.config.ts @@ -0,0 +1,16 @@ +import { pluginStylus } from '@rsbuild/plugin-stylus'; +import { defineConfig } from '@rslib/core'; +import { generateBundleCjsConfig, generateBundleEsmConfig } from 'test-helper'; + +export default defineConfig({ + lib: [generateBundleEsmConfig(), generateBundleCjsConfig()], + source: { + entry: { + index: ['../__fixtures__/src/index.js'], + }, + }, + plugins: [pluginStylus()], + output: { + target: 'web', + }, +}); diff --git a/tests/integration/style/stylus/index.test.ts b/tests/integration/style/stylus/index.test.ts new file mode 100644 index 000000000..f67299404 --- /dev/null +++ b/tests/integration/style/stylus/index.test.ts @@ -0,0 +1,141 @@ +import { join } from 'node:path'; +import { buildAndGetResults } from 'test-helper'; +import { expectFileContainContent } from 'test-helper/vitest'; +import { expect, test } from 'vitest'; + +test('should extract css with pluginStylus in bundle', async () => { + const fixturePath = join(__dirname, 'bundle'); + const { contents } = await buildAndGetResults({ fixturePath, type: 'css' }); + + const esmCssFiles = Object.keys(contents.esm); + const esmCssContents = Object.values(contents.esm); + const cjsCssFiles = Object.keys(contents.cjs); + const cjsCssContents = Object.values(contents.cjs); + + expect(esmCssFiles).toMatchInlineSnapshot(` + [ + "/tests/integration/style/stylus/bundle/dist/esm/index.css", + ] + `); + expect(esmCssContents).toMatchInlineSnapshot(` + [ + "body { + color: red; + background: url(./static/svg/logo.svg); + font: 14px Arial, sans-serif; + } + + .title-class-zHhfRC { + font-size: 14px; + } + + ", + ] + `); + expect(cjsCssFiles).toMatchInlineSnapshot(` + [ + "/tests/integration/style/stylus/bundle/dist/cjs/index.css", + ] + `); + expect(cjsCssContents).toMatchInlineSnapshot(` + [ + "body { + color: red; + background: url(./static/svg/logo.svg); + font: 14px Arial, sans-serif; + } + + .title-class-zHhfRC { + font-size: 14px; + } + + ", + ] + `); +}); + +test('should extract css with pluginStylus in bundle-false', async () => { + const fixturePath = join(__dirname, 'bundle-false'); + const { contents } = await buildAndGetResults({ fixturePath, type: 'css' }); + const { contents: jsContents } = await buildAndGetResults({ fixturePath }); + + const esmFiles = Object.keys(contents.esm); + const esmCssContents = Object.values(contents.esm); + const cjsFiles = Object.keys(contents.cjs); + const cjsCssContents = Object.values(contents.cjs); + + expect(esmFiles).toMatchInlineSnapshot(` + [ + "/tests/integration/style/stylus/bundle-false/dist/esm/a.css", + "/tests/integration/style/stylus/bundle-false/dist/esm/b_module.css", + ] + `); + expect(esmCssContents).toMatchInlineSnapshot(` + [ + "body { + color: red; + background: url(./static/svg/logo.svg); + font: 14px Arial, sans-serif; + } + + ", + ".title-class-zHhfRC { + font-size: 14px; + } + + ", + ] + `); + + expectFileContainContent( + jsContents.esm, + 'assets/logo.js', + 'import logo_rslib_entry_namespaceObject from "../static/svg/logo.svg"', + ); + expectFileContainContent( + jsContents.esm, + 'b.module.js', + 'import "./b_module.css', + ); + expectFileContainContent(jsContents.esm, 'index.js', [ + 'import "./a.css"', + 'import * as __WEBPACK_EXTERNAL_MODULE__b_module_js_6a8a3e41__ from "./b.module.js"', + ]); + + expect(cjsFiles).toMatchInlineSnapshot(` + [ + "/tests/integration/style/stylus/bundle-false/dist/cjs/a.css", + "/tests/integration/style/stylus/bundle-false/dist/cjs/b_module.css", + ] + `); + expect(cjsCssContents).toMatchInlineSnapshot(` + [ + "body { + color: red; + background: url(./static/svg/logo.svg); + font: 14px Arial, sans-serif; + } + + ", + ".title-class-zHhfRC { + font-size: 14px; + } + + ", + ] + `); + expectFileContainContent( + jsContents.cjs, + 'assets/logo.cjs', + 'require("../static/svg/logo.svg")', + ); + expectFileContainContent( + jsContents.cjs, + 'b.module.cjs', + 'require("./b_module.css")', + ); + expectFileContainContent(jsContents.cjs, 'index.cjs', [ + 'require("./a.css")', + 'require("./b.module.cjs")', + ]); +});