@rsbuild/plugin-stylus 1.3.2 → 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 +1 -1
- package/README.md +87 -5
- package/dist/index.cjs +96 -44
- package/dist/index.d.ts +1 -1
- package/dist/index.js +53 -21
- package/package.json +26 -18
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
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
|
-
|
|
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
|
-
##
|
|
13
|
+
## Usage
|
|
14
14
|
|
|
15
|
-
|
|
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](
|
|
101
|
+
[MIT](./LICENSE).
|
package/dist/index.cjs
CHANGED
|
@@ -1,63 +1,115 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const __rslib_import_meta_url__ =
|
|
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
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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__)
|
|
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")
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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
|
-
}
|
|
103
|
+
});
|
|
54
104
|
});
|
|
55
105
|
}
|
|
56
106
|
});
|
|
57
|
-
|
|
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)
|
|
112
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
61
113
|
Object.defineProperty(exports, '__esModule', {
|
|
62
|
-
value:
|
|
114
|
+
value: true
|
|
63
115
|
});
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,32 +1,64 @@
|
|
|
1
1
|
import { createRequire } from "node:module";
|
|
2
2
|
import deepmerge from "deepmerge";
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
}
|
|
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.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"description": "Stylus plugin for Rsbuild",
|
|
5
|
-
"
|
|
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": {
|
|
@@ -21,19 +16,35 @@
|
|
|
21
16
|
"files": [
|
|
22
17
|
"dist"
|
|
23
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
|
+
},
|
|
24
31
|
"dependencies": {
|
|
25
32
|
"deepmerge": "^4.3.1",
|
|
26
|
-
"reduce-configs": "^1.1.2",
|
|
27
33
|
"stylus": "0.64.0",
|
|
28
34
|
"stylus-loader": "8.1.3"
|
|
29
35
|
},
|
|
30
36
|
"devDependencies": {
|
|
37
|
+
"@playwright/test": "^1.60.0",
|
|
38
|
+
"@rsbuild/core": "^2.0.6",
|
|
31
39
|
"@rsbuild/core-v1": "npm:@rsbuild/core@^1.7.5",
|
|
32
|
-
"@
|
|
33
|
-
"@
|
|
34
|
-
"
|
|
35
|
-
"@
|
|
36
|
-
"
|
|
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"
|
|
37
48
|
},
|
|
38
49
|
"peerDependencies": {
|
|
39
50
|
"@rsbuild/core": "^1.3.0 || ^2.0.0-0"
|
|
@@ -43,12 +54,9 @@
|
|
|
43
54
|
"optional": true
|
|
44
55
|
}
|
|
45
56
|
},
|
|
57
|
+
"packageManager": "pnpm@11.1.2",
|
|
46
58
|
"publishConfig": {
|
|
47
59
|
"access": "public",
|
|
48
60
|
"registry": "https://registry.npmjs.org/"
|
|
49
|
-
},
|
|
50
|
-
"scripts": {
|
|
51
|
-
"build": "rslib",
|
|
52
|
-
"dev": "rslib -w"
|
|
53
61
|
}
|
|
54
|
-
}
|
|
62
|
+
}
|