@moluoxixi/css-module-global-root-plugin 0.0.5 → 0.0.9
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/README.md +4 -4
- package/es/index.d.ts +68 -4
- package/es/index.mjs +8 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,7 +31,7 @@ pnpm add @moluoxixi/utils
|
|
|
31
31
|
|
|
32
32
|
```typescript
|
|
33
33
|
import { defineConfig } from 'vite'
|
|
34
|
-
import cssModuleGlobalRootPlugin from '@moluoxixi/
|
|
34
|
+
import cssModuleGlobalRootPlugin from '@moluoxixi/css-module-global-root-plugin'
|
|
35
35
|
|
|
36
36
|
export default defineConfig({
|
|
37
37
|
css: {
|
|
@@ -48,7 +48,7 @@ export default defineConfig({
|
|
|
48
48
|
|
|
49
49
|
```typescript
|
|
50
50
|
import { defineConfig } from 'vite'
|
|
51
|
-
import cssModuleGlobalRootPlugin from '@moluoxixi/
|
|
51
|
+
import cssModuleGlobalRootPlugin from '@moluoxixi/css-module-global-root-plugin'
|
|
52
52
|
|
|
53
53
|
export default defineConfig({
|
|
54
54
|
css: {
|
|
@@ -150,7 +150,7 @@ export default defineConfig({
|
|
|
150
150
|
|
|
151
151
|
```typescript
|
|
152
152
|
import { defineConfig } from 'vite'
|
|
153
|
-
import cssModuleGlobalRootPlugin from '@moluoxixi/
|
|
153
|
+
import cssModuleGlobalRootPlugin from '@moluoxixi/css-module-global-root-plugin'
|
|
154
154
|
|
|
155
155
|
export default defineConfig({
|
|
156
156
|
css: {
|
|
@@ -193,7 +193,7 @@ export default defineConfig({
|
|
|
193
193
|
|
|
194
194
|
```typescript
|
|
195
195
|
import { defineConfig } from 'vite'
|
|
196
|
-
import cssModuleGlobalRootPlugin from '@moluoxixi/
|
|
196
|
+
import cssModuleGlobalRootPlugin from '@moluoxixi/css-module-global-root-plugin'
|
|
197
197
|
|
|
198
198
|
export default defineConfig({
|
|
199
199
|
css: {
|
package/es/index.d.ts
CHANGED
|
@@ -1,9 +1,73 @@
|
|
|
1
1
|
import { Plugin } from 'postcss';
|
|
2
|
+
/**
|
|
3
|
+
* PostCSS 插件配置选项
|
|
4
|
+
*/
|
|
2
5
|
export interface CssModuleGlobalRootPluginOptions {
|
|
6
|
+
/**
|
|
7
|
+
* 是否移除 :root
|
|
8
|
+
* - true: 移除 :root，查找选择器中的 `:global :root`，替换为 `:global`（默认）
|
|
9
|
+
* 例如：.root :global :root -> .root :global
|
|
10
|
+
* - false: 将 :root 替换为 *
|
|
11
|
+
* 例如：.root :root -> .root *
|
|
12
|
+
*/
|
|
3
13
|
removeRoot?: boolean;
|
|
4
14
|
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
15
|
+
type cssModuleGlobalRootPluginType = (config?: CssModuleGlobalRootPluginOptions) => Plugin;
|
|
16
|
+
/**
|
|
17
|
+
* PostCSS 插件：处理 CSS Module 文件中的 :root 选择器
|
|
18
|
+
*
|
|
19
|
+
* 功能说明：
|
|
20
|
+
* - 仅处理后缀为 .module.css/.module.scss/.module.less/.module.sass/.module.styl 的 CSS Module 文件
|
|
21
|
+
* - 如果选择器是 `:global :root` 开头，则不处理（保持原样）
|
|
22
|
+
* - 根据配置进行替换：
|
|
23
|
+
* - removeRoot = true: 查找选择器中的 `:global :root`，替换为 `:global`（移除 `:root`）（默认）
|
|
24
|
+
* - removeRoot = false: 直接替换所有 `:root` 为 `*`
|
|
25
|
+
* - 不修改其他任何选择器、CSS 变量、样式属性等内容
|
|
26
|
+
*
|
|
27
|
+
* 使用场景：
|
|
28
|
+
* 在 CSS Module 中，当需要在 :global() 作用域内定义全局 CSS 变量时，
|
|
29
|
+
* 使用 :root 会导致选择器过于具体，可以通过替换为 * 或直接移除 :root 来调整作用域。
|
|
30
|
+
*
|
|
31
|
+
* 示例（removeRoot = true，默认）：
|
|
32
|
+
* 输入（CSS Module 处理后）：
|
|
33
|
+
* .root :global :root {
|
|
34
|
+
* --primary: #007bff;
|
|
35
|
+
* }
|
|
36
|
+
* .root :root {
|
|
37
|
+
* --secondary: #6c757d;
|
|
38
|
+
* }
|
|
39
|
+
*
|
|
40
|
+
* 输出：
|
|
41
|
+
* .root :global {
|
|
42
|
+
* --primary: #007bff;
|
|
43
|
+
* }
|
|
44
|
+
* .root {
|
|
45
|
+
* --secondary: #6c757d;
|
|
46
|
+
* }
|
|
47
|
+
*
|
|
48
|
+
* 示例（removeRoot = false）：
|
|
49
|
+
* 输入（CSS Module 处理后）：
|
|
50
|
+
* .root :global :root {
|
|
51
|
+
* --primary: #007bff;
|
|
52
|
+
* }
|
|
53
|
+
* .root :root {
|
|
54
|
+
* --secondary: #6c757d;
|
|
55
|
+
* }
|
|
56
|
+
*
|
|
57
|
+
* 输出：
|
|
58
|
+
* .root :global * {
|
|
59
|
+
* --primary: #007bff;
|
|
60
|
+
* }
|
|
61
|
+
* .root * {
|
|
62
|
+
* --secondary: #6c757d;
|
|
63
|
+
* }
|
|
64
|
+
*
|
|
65
|
+
* 注意：
|
|
66
|
+
* - `:global :root` 开头的选择器不会被处理，保持原样
|
|
67
|
+
* - 只处理 CSS Module 文件，不影响其他文件中的 :global 使用
|
|
68
|
+
*
|
|
69
|
+
* @param options 插件配置选项
|
|
70
|
+
* @returns {Plugin} PostCSS 插件实例
|
|
71
|
+
*/
|
|
72
|
+
declare const cssModuleGlobalRootPlugin: cssModuleGlobalRootPluginType;
|
|
9
73
|
export default cssModuleGlobalRootPlugin;
|
package/es/index.mjs
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
const cssModuleGlobalRootPlugin = (options = {}) => {
|
|
2
2
|
const { removeRoot = true } = options;
|
|
3
3
|
return {
|
|
4
4
|
postcssPlugin: "css-module-global-root",
|
|
5
|
+
/**
|
|
6
|
+
* 使用 Once 钩子，在 PostCSS 处理完所有规则后执行
|
|
7
|
+
* 只处理 CSS Module 处理完毕后的代码，如 .root :root
|
|
8
|
+
*/
|
|
5
9
|
Once(root, { result }) {
|
|
6
10
|
var _a;
|
|
7
11
|
const filePath = ((_a = result.root.source) == null ? void 0 : _a.input.from) || "";
|
|
@@ -11,6 +15,8 @@ function cssModuleGlobalRootPlugin(options = {}) {
|
|
|
11
15
|
}
|
|
12
16
|
const specialRules = [
|
|
13
17
|
/^\s*:global\s+:root/
|
|
18
|
+
// 以 :global :root 开头
|
|
19
|
+
// 未来可以在这里添加更多特殊规则
|
|
14
20
|
];
|
|
15
21
|
function isSpecialRule(selector) {
|
|
16
22
|
const trimmed = selector.trim();
|
|
@@ -46,7 +52,7 @@ function cssModuleGlobalRootPlugin(options = {}) {
|
|
|
46
52
|
});
|
|
47
53
|
}
|
|
48
54
|
};
|
|
49
|
-
}
|
|
55
|
+
};
|
|
50
56
|
cssModuleGlobalRootPlugin.postcss = true;
|
|
51
57
|
export {
|
|
52
58
|
cssModuleGlobalRootPlugin as default
|