@rsbuild/plugin-stylus 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
3
+ Copyright (c) 2024 Rspack Contrib
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,19 +1,101 @@
1
1
  # @rsbuild/plugin-stylus
2
2
 
3
- An Rsbuild plugin to use Stylus as the CSS preprocessor.
3
+ Stylus is an expressive, dynamic, and robust CSS preprocessor. With this plugin, you can use Stylus as the CSS preprocessor in Rsbuild.
4
4
 
5
5
  <p>
6
6
  <a href="https://npmjs.com/package/@rsbuild/plugin-stylus">
7
7
  <img src="https://img.shields.io/npm/v/@rsbuild/plugin-stylus?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
8
8
  </a>
9
9
  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
10
- <a href="https://npmcharts.com/compare/@rsbuild/plugin-stylus"><img src="https://img.shields.io/npm/dm/@rsbuild/plugin-stylus.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
10
+ <a href="https://npmcharts.com/compare/@rsbuild/plugin-stylus?minimal=true"><img src="https://img.shields.io/npm/dm/@rsbuild/plugin-stylus.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
11
11
  </p>
12
12
 
13
- ## Documentation
13
+ ## Usage
14
14
 
15
- See [Documentation](https://rsbuild.rs/plugins/list/plugin-stylus).
15
+ Install:
16
+
17
+ ```bash
18
+ npm add @rsbuild/plugin-stylus -D
19
+ ```
20
+
21
+ Add plugin to your `rsbuild.config.ts`:
22
+
23
+ ```ts
24
+ // rsbuild.config.ts
25
+ import { pluginStylus } from '@rsbuild/plugin-stylus';
26
+
27
+ export default {
28
+ plugins: [pluginStylus()],
29
+ };
30
+ ```
31
+
32
+ After registering the plugin, you can import `*.styl`, `*.stylus`, `*.module.styl`, or `*.module.stylus` files without adding other configs.
33
+
34
+ ```styl
35
+ // normalize.styl
36
+ body
37
+ color #000
38
+ font 14px Arial, sans-serif
39
+ ```
40
+
41
+ ```styl
42
+ // title.module.styl
43
+ .title
44
+ font-size 14px
45
+ ```
46
+
47
+ ```js
48
+ // index.js
49
+ import './normalize.styl';
50
+ import style from './title.module.styl';
51
+
52
+ console.log(style.title);
53
+ ```
54
+
55
+ ## Options
56
+
57
+ ### stylusOptions
58
+
59
+ - Type:
60
+
61
+ ```ts
62
+ type StylusOptions = {
63
+ use?: string[];
64
+ define?: [string, unknown, boolean?][];
65
+ include?: string[];
66
+ includeCSS?: boolean;
67
+ import?: string[];
68
+ resolveURL?: boolean;
69
+ lineNumbers?: boolean;
70
+ hoistAtrules?: boolean;
71
+ };
72
+ ```
73
+
74
+ - Default: `undefined`
75
+
76
+ These options are passed to Stylus. For details, see the [Stylus documentation](https://stylus-lang.com/docs/js).
77
+
78
+ ```ts
79
+ pluginStylus({
80
+ stylusOptions: {
81
+ lineNumbers: false,
82
+ },
83
+ });
84
+ ```
85
+
86
+ ### sourceMap
87
+
88
+ - Type: `boolean`
89
+ - Default: the same as Rsbuild's `output.sourceMap.css` config
90
+
91
+ Whether to generate source maps.
92
+
93
+ ```ts
94
+ pluginStylus({
95
+ sourceMap: false,
96
+ });
97
+ ```
16
98
 
17
99
  ## License
18
100
 
19
- [MIT](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
101
+ [MIT](./LICENSE).
package/dist/index.cjs CHANGED
@@ -1,63 +1,115 @@
1
1
  "use strict";
2
- const __rslib_import_meta_url__ = "u" < typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
2
+ const __rslib_import_meta_url__ = /*#__PURE__*/ function() {
3
+ return "u" < typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
4
+ }();
3
5
  var __webpack_require__ = {};
4
- __webpack_require__.n = (module)=>{
5
- var getter = module && module.__esModule ? ()=>module.default : ()=>module;
6
- return __webpack_require__.d(getter, {
7
- a: getter
8
- }), getter;
9
- }, __webpack_require__.d = (exports1, definition)=>{
10
- for(var key in definition)__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key) && Object.defineProperty(exports1, key, {
11
- enumerable: !0,
12
- get: definition[key]
13
- });
14
- }, __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop), __webpack_require__.r = (exports1)=>{
15
- "u" > typeof Symbol && Symbol.toStringTag && Object.defineProperty(exports1, Symbol.toStringTag, {
16
- value: 'Module'
17
- }), Object.defineProperty(exports1, '__esModule', {
18
- value: !0
19
- });
20
- };
6
+ (()=>{
7
+ __webpack_require__.n = (module)=>{
8
+ var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
9
+ __webpack_require__.d(getter, {
10
+ a: getter
11
+ });
12
+ return getter;
13
+ };
14
+ })();
15
+ (()=>{
16
+ __webpack_require__.d = (exports1, definition)=>{
17
+ for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
18
+ enumerable: true,
19
+ get: definition[key]
20
+ });
21
+ };
22
+ })();
23
+ (()=>{
24
+ __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
25
+ })();
26
+ (()=>{
27
+ __webpack_require__.r = (exports1)=>{
28
+ if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
29
+ value: 'Module'
30
+ });
31
+ Object.defineProperty(exports1, '__esModule', {
32
+ value: true
33
+ });
34
+ };
35
+ })();
21
36
  var __webpack_exports__ = {};
22
- __webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
37
+ __webpack_require__.r(__webpack_exports__);
38
+ __webpack_require__.d(__webpack_exports__, {
23
39
  PLUGIN_STYLUS_NAME: ()=>PLUGIN_STYLUS_NAME,
24
40
  pluginStylus: ()=>pluginStylus
25
41
  });
26
- const external_node_module_namespaceObject = require("node:module"), external_deepmerge_namespaceObject = require("deepmerge");
27
- var external_deepmerge_default = __webpack_require__.n(external_deepmerge_namespaceObject);
28
- const external_reduce_configs_namespaceObject = require("reduce-configs"), src_require = (0, external_node_module_namespaceObject.createRequire)(__rslib_import_meta_url__), PLUGIN_STYLUS_NAME = 'rsbuild:stylus', pluginStylus = (options)=>({
42
+ const external_node_module_namespaceObject = require("node:module");
43
+ const external_deepmerge_namespaceObject = require("deepmerge");
44
+ var external_deepmerge_default = /*#__PURE__*/ __webpack_require__.n(external_deepmerge_namespaceObject);
45
+ const src_require = (0, external_node_module_namespaceObject.createRequire)(__rslib_import_meta_url__);
46
+ const PLUGIN_STYLUS_NAME = 'rsbuild:stylus';
47
+ const pluginStylus = (options)=>({
29
48
  name: PLUGIN_STYLUS_NAME,
30
49
  setup (api) {
31
- let STYLUS_INLINE = 'stylus-inline', STYLUS_RAW = 'stylus-raw', isV1 = api.context.version.startsWith('1.');
50
+ const CSS_MAIN = 'css';
51
+ const CSS_INLINE = 'css-inline';
52
+ const CSS_RAW = 'css-raw';
53
+ const STYLUS_MAIN = 'stylus';
54
+ const STYLUS_URL = 'stylus-url';
55
+ const STYLUS_INLINE = 'stylus-inline';
56
+ const STYLUS_RAW = 'stylus-raw';
57
+ const isV1 = api.context.version.startsWith('1.');
32
58
  api.modifyBundlerChain((chain, { CHAIN_ID, environment })=>{
33
- var callback;
34
- let { config } = environment, { sourceMap } = config.output, mergedOptions = (0, external_reduce_configs_namespaceObject.reduceConfigs)({
35
- initial: {
36
- sourceMap: 'boolean' == typeof sourceMap ? sourceMap : sourceMap.css
37
- },
38
- config: options,
39
- mergeFn: external_deepmerge_default()
40
- }), test = /\.styl(us)?$/, stylusRule = chain.module.rule(CHAIN_ID.RULE.STYLUS).test(test).dependency({
59
+ const { config } = environment;
60
+ const { sourceMap } = config.output;
61
+ const mergedOptions = {
62
+ sourceMap: 'boolean' == typeof sourceMap ? sourceMap : sourceMap.css,
63
+ ...options
64
+ };
65
+ const test = /\.styl(us)?$/;
66
+ const stylusRule = chain.module.rule(CHAIN_ID.RULE.STYLUS).test(test).dependency({
41
67
  not: 'url'
42
- }).resolve.preferRelative(!0).end();
43
- isV1 && (chain.module.rule(STYLUS_RAW).test(test), chain.module.rule(STYLUS_INLINE).test(test));
44
- let getRule = (id)=>isV1 ? chain.module.rule(id) : (id.startsWith('stylus') ? stylusRule : chain.module.rule(CHAIN_ID.RULE.CSS)).oneOf(id), stylusInlineRule = getRule(STYLUS_INLINE);
45
- getRule(STYLUS_RAW).type('asset/source').resourceQuery(getRule('css-raw').get('resourceQuery'));
46
- let stylusMainRule = getRule('stylus');
47
- (callback = (rule, cssBranchRule)=>{
48
- for (let id of (rule.sideEffects(!0).resourceQuery(cssBranchRule.get('resourceQuery')), Object.keys(cssBranchRule.uses.entries()))){
49
- let loader = cssBranchRule.uses.get(id), options = loader.get('options') ?? {}, clonedOptions = external_deepmerge_default()({}, options);
50
- id === CHAIN_ID.USE.CSS && (clonedOptions.importLoaders += 1), rule.use(id).loader(loader.get('loader')).options(clonedOptions);
68
+ }).resolve.preferRelative(true).end();
69
+ const cssRule = chain.module.rule(CHAIN_ID.RULE.CSS);
70
+ const cssUrlRuleId = CHAIN_ID.ONE_OF.CSS_URL;
71
+ const hasCssUrlRule = cssUrlRuleId && cssRule.oneOfs.has(cssUrlRuleId);
72
+ if (isV1) {
73
+ chain.module.rule(STYLUS_RAW).test(test);
74
+ chain.module.rule(STYLUS_INLINE).test(test);
75
+ }
76
+ const getRule = (id)=>{
77
+ if (isV1) return chain.module.rule(id);
78
+ return (id.startsWith('stylus') ? stylusRule : cssRule).oneOf(id);
79
+ };
80
+ const stylusUrlRule = hasCssUrlRule && getRule(STYLUS_URL);
81
+ const stylusInlineRule = getRule(STYLUS_INLINE);
82
+ getRule(STYLUS_RAW).type('asset/source').resourceQuery(getRule(CSS_RAW).get('resourceQuery'));
83
+ const stylusMainRule = getRule(STYLUS_MAIN);
84
+ const updateRules = (callback)=>{
85
+ if (stylusUrlRule) callback(stylusUrlRule, getRule(cssUrlRuleId), 'url');
86
+ callback(stylusMainRule, getRule(CSS_MAIN), 'main');
87
+ callback(stylusInlineRule, getRule(CSS_INLINE), 'inline');
88
+ };
89
+ updateRules((rule, cssBranchRule, type)=>{
90
+ if ('url' !== type) rule.sideEffects(true);
91
+ rule.resourceQuery(cssBranchRule.get('resourceQuery'));
92
+ for (const id of Object.keys(cssBranchRule.uses.entries())){
93
+ const loader = cssBranchRule.uses.get(id);
94
+ const options = loader.get('options') ?? {};
95
+ const clonedOptions = external_deepmerge_default()({}, options);
96
+ if (id === CHAIN_ID.USE.CSS) {
97
+ const importLoaders = clonedOptions.importLoaders;
98
+ clonedOptions.importLoaders = 'number' == typeof importLoaders ? importLoaders + 1 : 1;
99
+ }
100
+ rule.use(id).loader(loader.get('loader')).options(clonedOptions);
51
101
  }
52
102
  rule.use(CHAIN_ID.USE.STYLUS).loader(src_require.resolve('stylus-loader')).options(mergedOptions);
53
- })(stylusMainRule, getRule('css')), callback(stylusInlineRule, getRule('css-inline'));
103
+ });
54
104
  });
55
105
  }
56
106
  });
57
- for(var __rspack_i in exports.PLUGIN_STYLUS_NAME = __webpack_exports__.PLUGIN_STYLUS_NAME, exports.pluginStylus = __webpack_exports__.pluginStylus, __webpack_exports__)-1 === [
107
+ exports.PLUGIN_STYLUS_NAME = __webpack_exports__.PLUGIN_STYLUS_NAME;
108
+ exports.pluginStylus = __webpack_exports__.pluginStylus;
109
+ for(var __rspack_i in __webpack_exports__)if (-1 === [
58
110
  "PLUGIN_STYLUS_NAME",
59
111
  "pluginStylus"
60
- ].indexOf(__rspack_i) && (exports[__rspack_i] = __webpack_exports__[__rspack_i]);
112
+ ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
61
113
  Object.defineProperty(exports, '__esModule', {
62
- value: !0
114
+ value: true
63
115
  });
package/dist/index.d.ts CHANGED
@@ -16,7 +16,7 @@ type StylusOptions = {
16
16
  * ["rawVar", 42, true],
17
17
  * ]
18
18
  */
19
- define?: [string, any, boolean?][];
19
+ define?: [string, unknown, boolean?][];
20
20
  /**
21
21
  * Add paths to the import lookup paths.
22
22
  * @default []
package/dist/index.js CHANGED
@@ -1,32 +1,64 @@
1
1
  import { createRequire } from "node:module";
2
2
  import deepmerge from "deepmerge";
3
- import { reduceConfigs } from "reduce-configs";
4
- let src_require = createRequire(import.meta.url), PLUGIN_STYLUS_NAME = 'rsbuild:stylus', pluginStylus = (options)=>({
3
+ const src_require = createRequire(import.meta.url);
4
+ const PLUGIN_STYLUS_NAME = 'rsbuild:stylus';
5
+ const pluginStylus = (options)=>({
5
6
  name: PLUGIN_STYLUS_NAME,
6
7
  setup (api) {
7
- let STYLUS_INLINE = 'stylus-inline', STYLUS_RAW = 'stylus-raw', isV1 = api.context.version.startsWith('1.');
8
+ const CSS_MAIN = 'css';
9
+ const CSS_INLINE = 'css-inline';
10
+ const CSS_RAW = 'css-raw';
11
+ const STYLUS_MAIN = 'stylus';
12
+ const STYLUS_URL = 'stylus-url';
13
+ const STYLUS_INLINE = 'stylus-inline';
14
+ const STYLUS_RAW = 'stylus-raw';
15
+ const isV1 = api.context.version.startsWith('1.');
8
16
  api.modifyBundlerChain((chain, { CHAIN_ID, environment })=>{
9
- var callback;
10
- let { config } = environment, { sourceMap } = config.output, mergedOptions = reduceConfigs({
11
- initial: {
12
- sourceMap: 'boolean' == typeof sourceMap ? sourceMap : sourceMap.css
13
- },
14
- config: options,
15
- mergeFn: deepmerge
16
- }), test = /\.styl(us)?$/, stylusRule = chain.module.rule(CHAIN_ID.RULE.STYLUS).test(test).dependency({
17
+ const { config } = environment;
18
+ const { sourceMap } = config.output;
19
+ const mergedOptions = {
20
+ sourceMap: 'boolean' == typeof sourceMap ? sourceMap : sourceMap.css,
21
+ ...options
22
+ };
23
+ const test = /\.styl(us)?$/;
24
+ const stylusRule = chain.module.rule(CHAIN_ID.RULE.STYLUS).test(test).dependency({
17
25
  not: 'url'
18
- }).resolve.preferRelative(!0).end();
19
- isV1 && (chain.module.rule(STYLUS_RAW).test(test), chain.module.rule(STYLUS_INLINE).test(test));
20
- let getRule = (id)=>isV1 ? chain.module.rule(id) : (id.startsWith('stylus') ? stylusRule : chain.module.rule(CHAIN_ID.RULE.CSS)).oneOf(id), stylusInlineRule = getRule(STYLUS_INLINE);
21
- getRule(STYLUS_RAW).type('asset/source').resourceQuery(getRule('css-raw').get('resourceQuery'));
22
- let stylusMainRule = getRule('stylus');
23
- (callback = (rule, cssBranchRule)=>{
24
- for (let id of (rule.sideEffects(!0).resourceQuery(cssBranchRule.get('resourceQuery')), Object.keys(cssBranchRule.uses.entries()))){
25
- let loader = cssBranchRule.uses.get(id), clonedOptions = deepmerge({}, loader.get('options') ?? {});
26
- id === CHAIN_ID.USE.CSS && (clonedOptions.importLoaders += 1), rule.use(id).loader(loader.get('loader')).options(clonedOptions);
26
+ }).resolve.preferRelative(true).end();
27
+ const cssRule = chain.module.rule(CHAIN_ID.RULE.CSS);
28
+ const cssUrlRuleId = CHAIN_ID.ONE_OF.CSS_URL;
29
+ const hasCssUrlRule = cssUrlRuleId && cssRule.oneOfs.has(cssUrlRuleId);
30
+ if (isV1) {
31
+ chain.module.rule(STYLUS_RAW).test(test);
32
+ chain.module.rule(STYLUS_INLINE).test(test);
33
+ }
34
+ const getRule = (id)=>{
35
+ if (isV1) return chain.module.rule(id);
36
+ return (id.startsWith('stylus') ? stylusRule : cssRule).oneOf(id);
37
+ };
38
+ const stylusUrlRule = hasCssUrlRule && getRule(STYLUS_URL);
39
+ const stylusInlineRule = getRule(STYLUS_INLINE);
40
+ getRule(STYLUS_RAW).type('asset/source').resourceQuery(getRule(CSS_RAW).get('resourceQuery'));
41
+ const stylusMainRule = getRule(STYLUS_MAIN);
42
+ const updateRules = (callback)=>{
43
+ if (stylusUrlRule) callback(stylusUrlRule, getRule(cssUrlRuleId), 'url');
44
+ callback(stylusMainRule, getRule(CSS_MAIN), 'main');
45
+ callback(stylusInlineRule, getRule(CSS_INLINE), 'inline');
46
+ };
47
+ updateRules((rule, cssBranchRule, type)=>{
48
+ if ('url' !== type) rule.sideEffects(true);
49
+ rule.resourceQuery(cssBranchRule.get('resourceQuery'));
50
+ for (const id of Object.keys(cssBranchRule.uses.entries())){
51
+ const loader = cssBranchRule.uses.get(id);
52
+ const options = loader.get('options') ?? {};
53
+ const clonedOptions = deepmerge({}, options);
54
+ if (id === CHAIN_ID.USE.CSS) {
55
+ const importLoaders = clonedOptions.importLoaders;
56
+ clonedOptions.importLoaders = 'number' == typeof importLoaders ? importLoaders + 1 : 1;
57
+ }
58
+ rule.use(id).loader(loader.get('loader')).options(clonedOptions);
27
59
  }
28
60
  rule.use(CHAIN_ID.USE.STYLUS).loader(src_require.resolve('stylus-loader')).options(mergedOptions);
29
- })(stylusMainRule, getRule('css')), callback(stylusInlineRule, getRule('css-inline'));
61
+ });
30
62
  });
31
63
  }
32
64
  });
package/package.json CHANGED
@@ -1,13 +1,8 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-stylus",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "description": "Stylus plugin for Rsbuild",
5
- "homepage": "https://rsbuild.rs",
6
- "repository": {
7
- "type": "git",
8
- "url": "https://github.com/web-infra-dev/rsbuild",
9
- "directory": "packages/plugin-stylus"
10
- },
5
+ "repository": "https://github.com/rstackjs/rsbuild-plugin-stylus",
11
6
  "license": "MIT",
12
7
  "type": "module",
13
8
  "exports": {
@@ -17,24 +12,39 @@
17
12
  "require": "./dist/index.cjs"
18
13
  }
19
14
  },
20
- "main": "./dist/index.cjs",
21
15
  "types": "./dist/index.d.ts",
22
16
  "files": [
23
17
  "dist"
24
18
  ],
19
+ "scripts": {
20
+ "build": "rslib",
21
+ "dev": "rslib -w",
22
+ "lint": "rslint && prettier -c .",
23
+ "lint:write": "rslint --fix && prettier -w .",
24
+ "prepare": "simple-git-hooks && pnpm run build",
25
+ "test": "playwright test",
26
+ "bump": "pnpx bumpp"
27
+ },
28
+ "simple-git-hooks": {
29
+ "pre-commit": "pnpm run lint:write"
30
+ },
25
31
  "dependencies": {
26
32
  "deepmerge": "^4.3.1",
27
- "reduce-configs": "^1.1.1",
28
33
  "stylus": "0.64.0",
29
34
  "stylus-loader": "8.1.3"
30
35
  },
31
36
  "devDependencies": {
32
- "@rsbuild/core-v1": "npm:@rsbuild/core@^1.7.3",
33
- "@rslib/core": "0.20.0",
34
- "@types/node": "^24.12.0",
35
- "typescript": "^5.9.3",
36
- "@rsbuild/core": "2.0.0-beta.8",
37
- "@scripts/test-helper": "1.0.0"
37
+ "@playwright/test": "^1.60.0",
38
+ "@rsbuild/core": "^2.0.6",
39
+ "@rsbuild/core-v1": "npm:@rsbuild/core@^1.7.5",
40
+ "@rsbuild/plugin-rem": "^1.0.5",
41
+ "@rslib/core": "^0.21.5",
42
+ "@rslint/core": "^0.5.3",
43
+ "@types/node": "^24.12.4",
44
+ "playwright": "^1.60.0",
45
+ "prettier": "^3.8.3",
46
+ "simple-git-hooks": "^2.13.1",
47
+ "typescript": "^6.0.3"
38
48
  },
39
49
  "peerDependencies": {
40
50
  "@rsbuild/core": "^1.3.0 || ^2.0.0-0"
@@ -44,13 +54,9 @@
44
54
  "optional": true
45
55
  }
46
56
  },
57
+ "packageManager": "pnpm@11.1.2",
47
58
  "publishConfig": {
48
59
  "access": "public",
49
60
  "registry": "https://registry.npmjs.org/"
50
- },
51
- "scripts": {
52
- "build": "rslib build",
53
- "dev": "rslib build -w",
54
- "bump": "pnpx bumpp --no-tag"
55
61
  }
56
- }
62
+ }