rollup-plugin-react-scoped-css 1.2.1 → 1.2.2
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 +12 -4
- package/dist/ast-iterator.js +3 -7
- package/dist/ast-program.d.ts +1 -1
- package/dist/ast-program.js +16 -19
- package/dist/ast-transformer.js +3 -7
- package/dist/ast.utils.js +18 -33
- package/dist/css/scope-css.js +4 -7
- package/dist/index.js +15 -18
- package/dist/parsers/jsx-parser.model.js +2 -5
- package/dist/parsers/legacy-jsx-parser.d.ts +1 -1
- package/dist/parsers/legacy-jsx-parser.js +9 -13
- package/dist/parsers/modern-jsx-parser.d.ts +1 -1
- package/dist/parsers/modern-jsx-parser.js +9 -13
- package/dist/utils/getImportDeclarationsValue.js +6 -10
- package/package.json +34 -27
package/README.md
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
# rollup-plugin-react-scoped-css
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/rollup-plugin-react-scoped-css)
|
|
4
|
+
[](https://www.npmjs.com/package/rollup-plugin-react-scoped-css)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
3
7
|
## Motivations
|
|
4
|
-
While using react in a professional context, I realized that it was lacking the
|
|
8
|
+
While using react in a professional context, I realized that it was lacking the scoped css feature that I learned to love from Vue and Angular. After some research I came across good plugins, but sadly were not compatible with vite and/or rollup. Thus, I decided to create this plugin.
|
|
5
9
|
|
|
6
10
|
## Requirements
|
|
7
11
|
+ **node** >= 18
|
|
@@ -53,7 +57,7 @@ There are a few options available to customize how the plugin works
|
|
|
53
57
|
include?: FilterPattern;
|
|
54
58
|
|
|
55
59
|
/**
|
|
56
|
-
* Which files should be
|
|
60
|
+
* Which files should be excluded and that should not be parsed by the plugin
|
|
57
61
|
* Default: undefined
|
|
58
62
|
*/
|
|
59
63
|
exclude?: FilterPattern;
|
|
@@ -145,11 +149,11 @@ The above will be compiled into:
|
|
|
145
149
|
```css
|
|
146
150
|
.a[data-f3f3eg9] .b { /* ... */ }
|
|
147
151
|
```
|
|
148
|
-
Another
|
|
152
|
+
Another expected format, which will generate the same result, is:
|
|
149
153
|
```scss
|
|
150
154
|
.a::v-deep .b { /* ... */ }
|
|
151
155
|
```
|
|
152
|
-
This is
|
|
156
|
+
This is primarily for backwards compatibility, we recommend the `::deep` selector.
|
|
153
157
|
### Dynamically Generated Content
|
|
154
158
|
DOM content created with dangerouslySetInnerHTML are not affected by scoped styles, but you can still style them using deep selectors.
|
|
155
159
|
|
|
@@ -160,3 +164,7 @@ Be careful with descendant selectors in recursive components! For a CSS rule wit
|
|
|
160
164
|
|
|
161
165
|
## Contributing
|
|
162
166
|
Anyone is free to open a PR and contribute to this project... just be civilized!
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
## Credits
|
|
170
|
+
Inspired by [react-scoped-css](https://github.com/gaoxiaoliangz/react-scoped-css).
|
package/dist/ast-iterator.js
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.astIterator = void 0;
|
|
4
1
|
const isNode = (key, value) => {
|
|
5
2
|
if (key === "loc")
|
|
6
3
|
return false;
|
|
@@ -9,7 +6,7 @@ const isNode = (key, value) => {
|
|
|
9
6
|
typeof value?.start === "number" &&
|
|
10
7
|
typeof value?.type === "string");
|
|
11
8
|
};
|
|
12
|
-
const astIterator = function* (ast) {
|
|
9
|
+
export const astIterator = function* (ast) {
|
|
13
10
|
if (!ast) {
|
|
14
11
|
return;
|
|
15
12
|
}
|
|
@@ -21,13 +18,12 @@ const astIterator = function* (ast) {
|
|
|
21
18
|
// If key value is an array, iterate over it
|
|
22
19
|
if (Array.isArray(ast[key])) {
|
|
23
20
|
for (const nodeIndex in ast[key]) {
|
|
24
|
-
yield*
|
|
21
|
+
yield* astIterator(ast[key][nodeIndex]);
|
|
25
22
|
}
|
|
26
23
|
}
|
|
27
24
|
else if (isNode(key, ast[key])) {
|
|
28
|
-
yield*
|
|
25
|
+
yield* astIterator(ast[key]);
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
28
|
yield ast;
|
|
32
29
|
};
|
|
33
|
-
exports.astIterator = astIterator;
|
package/dist/ast-program.d.ts
CHANGED
package/dist/ast-program.js
CHANGED
|
@@ -1,38 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const legacy_jsx_parser_1 = require("./parsers/legacy-jsx-parser");
|
|
8
|
-
const modern_jsx_parser_1 = require("./parsers/modern-jsx-parser");
|
|
9
|
-
const jsx_parser_model_1 = require("./parsers/jsx-parser.model");
|
|
1
|
+
import { astIterator } from "./ast-iterator.js";
|
|
2
|
+
import { astTransformer } from "./ast-transformer.js";
|
|
3
|
+
import { getSrcFromImportOrRequire, isNodeImportOrRequire, } from "./ast.utils.js";
|
|
4
|
+
import { LegacyJsxParser } from "./parsers/legacy-jsx-parser.js";
|
|
5
|
+
import { ModernJsxParser } from "./parsers/modern-jsx-parser.js";
|
|
6
|
+
import { ParserImplementations, } from "./parsers/jsx-parser.model.js";
|
|
10
7
|
global.implementation = null;
|
|
11
|
-
const legacyJsxParser = new
|
|
12
|
-
const modernJsxParser = new
|
|
8
|
+
const legacyJsxParser = new LegacyJsxParser();
|
|
9
|
+
const modernJsxParser = new ModernJsxParser();
|
|
13
10
|
let parser = legacyJsxParser;
|
|
14
11
|
const findImplementation = (program) => {
|
|
15
|
-
const implementation =
|
|
16
|
-
for (const node of
|
|
17
|
-
if (!
|
|
12
|
+
const implementation = ParserImplementations.legacy;
|
|
13
|
+
for (const node of astIterator(program)) {
|
|
14
|
+
if (!isNodeImportOrRequire(node)) {
|
|
18
15
|
continue;
|
|
19
16
|
}
|
|
20
|
-
const src =
|
|
17
|
+
const src = getSrcFromImportOrRequire(node);
|
|
21
18
|
if (["react/jsx-dev-runtime", "react/jsx-runtime"].includes(src)) {
|
|
22
|
-
return
|
|
19
|
+
return ParserImplementations.modern;
|
|
23
20
|
}
|
|
24
21
|
}
|
|
25
22
|
return implementation;
|
|
26
23
|
};
|
|
27
|
-
function addHashAttributesToJsxTagsAst(program, attr) {
|
|
24
|
+
export function addHashAttributesToJsxTagsAst(program, attr) {
|
|
28
25
|
// Once in the program, we can determine which parser to use
|
|
29
26
|
if (global.implementation === null) {
|
|
30
27
|
global.implementation = findImplementation(program);
|
|
31
|
-
if (global.implementation ===
|
|
28
|
+
if (global.implementation === ParserImplementations.modern) {
|
|
32
29
|
parser = modernJsxParser;
|
|
33
30
|
}
|
|
34
31
|
}
|
|
35
|
-
return
|
|
32
|
+
return astTransformer(program, (node) => {
|
|
36
33
|
if (parser.isNodeReactElement(node) && !parser.isNodeReactFragment(node)) {
|
|
37
34
|
return parser.extendNodeWithAttributes(node, attr);
|
|
38
35
|
}
|
package/dist/ast-transformer.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.astTransformer = void 0;
|
|
4
1
|
const isNode = (obj) => {
|
|
5
2
|
return (typeof obj === "object" &&
|
|
6
3
|
typeof obj?.end === "number" &&
|
|
7
4
|
typeof obj?.start === "number" &&
|
|
8
5
|
typeof obj?.type === "string");
|
|
9
6
|
};
|
|
10
|
-
const astTransformer = (ast, callback) => {
|
|
7
|
+
export const astTransformer = (ast, callback) => {
|
|
11
8
|
if (!ast) {
|
|
12
9
|
return ast;
|
|
13
10
|
}
|
|
@@ -17,14 +14,13 @@ const astTransformer = (ast, callback) => {
|
|
|
17
14
|
}
|
|
18
15
|
if (Array.isArray(ast[key])) {
|
|
19
16
|
for (const nodeIndex in ast[key]) {
|
|
20
|
-
ast[key][nodeIndex] =
|
|
17
|
+
ast[key][nodeIndex] = astTransformer(ast[key][nodeIndex], callback);
|
|
21
18
|
}
|
|
22
19
|
}
|
|
23
20
|
else if (isNode(ast[key])) {
|
|
24
|
-
ast[key] =
|
|
21
|
+
ast[key] = astTransformer(ast[key], callback);
|
|
25
22
|
}
|
|
26
23
|
}
|
|
27
24
|
const result = callback(ast);
|
|
28
25
|
return typeof result !== "undefined" ? result : ast;
|
|
29
26
|
};
|
|
30
|
-
exports.astTransformer = astTransformer;
|
package/dist/ast.utils.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getSrcFromImportOrRequire = exports.isNodeImportOrRequire = exports.isNodeRequireCallExpression = exports.isNodeImportDeclaration = exports.isNodeIdentifier = exports.isNodeExtender = exports.isNodeObjectExpression = exports.isNodeCallExpression = exports.hackIntoExtenderCallExpression = exports.extendObjectExpression = exports.createObjectExpressionWithAttr = exports.createObjectAssignCallExpressionWithIdentifier = void 0;
|
|
4
|
-
const createObjectAssignCallExpressionWithIdentifier = (identifier, objectExpression) => {
|
|
1
|
+
export const createObjectAssignCallExpressionWithIdentifier = (identifier, objectExpression) => {
|
|
5
2
|
return {
|
|
6
3
|
type: "CallExpression",
|
|
7
4
|
callee: {
|
|
@@ -30,69 +27,57 @@ const createObjectAssignCallExpressionWithIdentifier = (identifier, objectExpres
|
|
|
30
27
|
optional: false,
|
|
31
28
|
};
|
|
32
29
|
};
|
|
33
|
-
|
|
34
|
-
const createObjectExpressionWithAttr = (attrNode) => {
|
|
30
|
+
export const createObjectExpressionWithAttr = (attrNode) => {
|
|
35
31
|
return {
|
|
36
32
|
type: "ObjectExpression",
|
|
37
33
|
properties: [attrNode],
|
|
38
34
|
};
|
|
39
35
|
};
|
|
40
|
-
|
|
41
|
-
const extendObjectExpression = (objectExpression, prop) => {
|
|
36
|
+
export const extendObjectExpression = (objectExpression, prop) => {
|
|
42
37
|
return {
|
|
43
38
|
...objectExpression,
|
|
44
39
|
properties: [...objectExpression.properties, prop],
|
|
45
40
|
};
|
|
46
41
|
};
|
|
47
|
-
|
|
48
|
-
const hackIntoExtenderCallExpression = (callExpression, prop) => {
|
|
42
|
+
export const hackIntoExtenderCallExpression = (callExpression, prop) => {
|
|
49
43
|
return {
|
|
50
44
|
...callExpression,
|
|
51
45
|
arguments: [
|
|
52
46
|
...callExpression.arguments,
|
|
53
|
-
|
|
47
|
+
createObjectExpressionWithAttr(prop),
|
|
54
48
|
],
|
|
55
49
|
};
|
|
56
50
|
};
|
|
57
|
-
|
|
58
|
-
const isNodeCallExpression = (node) => {
|
|
51
|
+
export const isNodeCallExpression = (node) => {
|
|
59
52
|
return node.type === "CallExpression";
|
|
60
53
|
};
|
|
61
|
-
|
|
62
|
-
const isNodeObjectExpression = (node) => {
|
|
54
|
+
export const isNodeObjectExpression = (node) => {
|
|
63
55
|
return node.type === "ObjectExpression";
|
|
64
56
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
return ((0, exports.isNodeCallExpression)(node) &&
|
|
57
|
+
export const isNodeExtender = (node) => {
|
|
58
|
+
return (isNodeCallExpression(node) &&
|
|
68
59
|
(node.callee.name === "_objectSpread" || node.callee.name === "_extends"));
|
|
69
60
|
};
|
|
70
|
-
|
|
71
|
-
const isNodeIdentifier = (node) => {
|
|
61
|
+
export const isNodeIdentifier = (node) => {
|
|
72
62
|
return node.type === "Identifier";
|
|
73
63
|
};
|
|
74
|
-
|
|
75
|
-
const isNodeImportDeclaration = (node) => {
|
|
64
|
+
export const isNodeImportDeclaration = (node) => {
|
|
76
65
|
return node.type === "ImportDeclaration";
|
|
77
66
|
};
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return ((0, exports.isNodeCallExpression)(node) &&
|
|
67
|
+
export const isNodeRequireCallExpression = (node) => {
|
|
68
|
+
return (isNodeCallExpression(node) &&
|
|
81
69
|
node.callee.name === "require" &&
|
|
82
70
|
node.arguments.length === 1);
|
|
83
71
|
};
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return (0, exports.isNodeImportDeclaration)(node) || (0, exports.isNodeRequireCallExpression)(node);
|
|
72
|
+
export const isNodeImportOrRequire = (node) => {
|
|
73
|
+
return isNodeImportDeclaration(node) || isNodeRequireCallExpression(node);
|
|
87
74
|
};
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
if ((0, exports.isNodeImportDeclaration)(node)) {
|
|
75
|
+
export const getSrcFromImportOrRequire = (node) => {
|
|
76
|
+
if (isNodeImportDeclaration(node)) {
|
|
91
77
|
return node.source.value;
|
|
92
78
|
}
|
|
93
|
-
if (
|
|
79
|
+
if (isNodeRequireCallExpression(node)) {
|
|
94
80
|
return node.arguments[0].value;
|
|
95
81
|
}
|
|
96
82
|
return null;
|
|
97
83
|
};
|
|
98
|
-
exports.getSrcFromImportOrRequire = getSrcFromImportOrRequire;
|
package/dist/css/scope-css.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.scopeCss = scopeCss;
|
|
4
|
-
const css_tree_1 = require("css-tree");
|
|
1
|
+
import { parse, generate, } from "css-tree";
|
|
5
2
|
const getSelectors = (items) => {
|
|
6
3
|
const selectorLists = items.reduce((acc, node) => {
|
|
7
4
|
if (node.type === "Rule" && node?.prelude?.type === "SelectorList") {
|
|
@@ -33,9 +30,9 @@ const isPseudoSelector = (item) => {
|
|
|
33
30
|
const isCombinator = (item) => {
|
|
34
31
|
return item?.data?.type === "Combinator";
|
|
35
32
|
};
|
|
36
|
-
function scopeCss(css, filename, hash) {
|
|
33
|
+
export function scopeCss(css, filename, hash) {
|
|
37
34
|
try {
|
|
38
|
-
const ast =
|
|
35
|
+
const ast = parse(css);
|
|
39
36
|
const selectorLists = getSelectors(ast.children);
|
|
40
37
|
const attributeSelector = {
|
|
41
38
|
type: "AttributeSelector",
|
|
@@ -78,7 +75,7 @@ function scopeCss(css, filename, hash) {
|
|
|
78
75
|
});
|
|
79
76
|
});
|
|
80
77
|
});
|
|
81
|
-
return
|
|
78
|
+
return generate(ast);
|
|
82
79
|
}
|
|
83
80
|
catch (e) {
|
|
84
81
|
console.log(`Failed scoping css of file: ${filename}\n\nError:\n`, e);
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const ast_program_1 = require("./ast-program");
|
|
9
|
-
const scope_css_1 = require("./css/scope-css");
|
|
10
|
-
const getImportDeclarationsValue_1 = require("./utils/getImportDeclarationsValue");
|
|
1
|
+
import { resolve, dirname } from "path";
|
|
2
|
+
import { xxHash32 } from "js-xxhash";
|
|
3
|
+
import { createFilter } from "@rollup/pluginutils";
|
|
4
|
+
import { generate } from "escodegen";
|
|
5
|
+
import { addHashAttributesToJsxTagsAst } from "./ast-program.js";
|
|
6
|
+
import { scopeCss } from "./css/scope-css.js";
|
|
7
|
+
import { getImportDeclarationsValue } from "./utils/getImportDeclarationsValue.js";
|
|
11
8
|
const getFilenameFromPath = (filePath) => {
|
|
12
9
|
const parts = filePath.split("/");
|
|
13
10
|
return parts[parts.length - 1].split("?")[0];
|
|
@@ -18,10 +15,10 @@ const getHashFromPath = (filePath) => {
|
|
|
18
15
|
return hash;
|
|
19
16
|
};
|
|
20
17
|
const generateHash = (input, seed = 0) => {
|
|
21
|
-
const hashNum =
|
|
18
|
+
const hashNum = xxHash32(Buffer.from(input, "utf8"), seed);
|
|
22
19
|
return hashNum.toString(16);
|
|
23
20
|
};
|
|
24
|
-
function reactScopedCssPlugin(optionsIn = {}) {
|
|
21
|
+
export function reactScopedCssPlugin(optionsIn = {}) {
|
|
25
22
|
const options = {
|
|
26
23
|
scopeStyleByDefault: false,
|
|
27
24
|
scopedStyleSuffix: "scoped",
|
|
@@ -37,7 +34,7 @@ function reactScopedCssPlugin(optionsIn = {}) {
|
|
|
37
34
|
if (!jsxFileExtensions || !jsxFileExtensions.length) {
|
|
38
35
|
throw new Error("You need to provide at least one jsx file extension");
|
|
39
36
|
}
|
|
40
|
-
const filter =
|
|
37
|
+
const filter = createFilter(include, exclude);
|
|
41
38
|
const scopedCssRegex = new RegExp(!scopeStyleByDefault
|
|
42
39
|
? `([^\.]+\.${scopedStyleSuffix}\.(${styleFileExtensions.join("|")}))$`
|
|
43
40
|
: `([^\.]+\.(${styleFileExtensions.join("|")}))$`);
|
|
@@ -55,7 +52,7 @@ function reactScopedCssPlugin(optionsIn = {}) {
|
|
|
55
52
|
return;
|
|
56
53
|
}
|
|
57
54
|
const importerHash = generateHash(importer);
|
|
58
|
-
const url =
|
|
55
|
+
const url = resolve(dirname(importer), `${source}?scope=${importerHash}`);
|
|
59
56
|
return url;
|
|
60
57
|
}
|
|
61
58
|
},
|
|
@@ -69,7 +66,7 @@ function reactScopedCssPlugin(optionsIn = {}) {
|
|
|
69
66
|
}
|
|
70
67
|
if (jsxRegex.test(id)) {
|
|
71
68
|
const rootNode = this.parse(code);
|
|
72
|
-
const imports =
|
|
69
|
+
const imports = getImportDeclarationsValue(rootNode);
|
|
73
70
|
const shouldScope = !!imports?.some((match) => {
|
|
74
71
|
if (scopeStyleByDefault) {
|
|
75
72
|
return scopedCssRegex.test(match) && !globalCssRegex.test(match);
|
|
@@ -83,8 +80,8 @@ function reactScopedCssPlugin(optionsIn = {}) {
|
|
|
83
80
|
const scopedAttr = hashPrefix
|
|
84
81
|
? `data-${hashPrefix}-${importerHash}`
|
|
85
82
|
: `data-${importerHash}`;
|
|
86
|
-
const newAst =
|
|
87
|
-
const newCode =
|
|
83
|
+
const newAst = addHashAttributesToJsxTagsAst(rootNode, scopedAttr);
|
|
84
|
+
const newCode = generate(newAst);
|
|
88
85
|
return newCode;
|
|
89
86
|
}
|
|
90
87
|
}
|
|
@@ -97,7 +94,7 @@ function reactScopedCssPlugin(optionsIn = {}) {
|
|
|
97
94
|
const scopedAttr = options.hashPrefix
|
|
98
95
|
? `data-${options.hashPrefix}-${importerHash}`
|
|
99
96
|
: `data-${importerHash}`;
|
|
100
|
-
return
|
|
97
|
+
return scopeCss(code, getFilenameFromPath(id), scopedAttr);
|
|
101
98
|
}
|
|
102
99
|
}
|
|
103
100
|
},
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ParserImplementations = void 0;
|
|
4
|
-
var ParserImplementations;
|
|
1
|
+
export var ParserImplementations;
|
|
5
2
|
(function (ParserImplementations) {
|
|
6
3
|
ParserImplementations["modern"] = "modern";
|
|
7
4
|
ParserImplementations["legacy"] = "legacy";
|
|
8
|
-
})(ParserImplementations || (
|
|
5
|
+
})(ParserImplementations || (ParserImplementations = {}));
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.LegacyJsxParser = void 0;
|
|
4
|
-
const ast_utils_1 = require("../ast.utils");
|
|
5
|
-
class LegacyJsxParser {
|
|
1
|
+
import { createObjectAssignCallExpressionWithIdentifier, createObjectExpressionWithAttr, extendObjectExpression, hackIntoExtenderCallExpression, isNodeExtender, isNodeIdentifier, isNodeObjectExpression, } from "../ast.utils.js";
|
|
2
|
+
export class LegacyJsxParser {
|
|
6
3
|
isNodeReactFragment(node) {
|
|
7
4
|
return ((node?.callee?.object?.name === "React" ||
|
|
8
5
|
node?.callee?.object?.object?.name === "_react") &&
|
|
@@ -24,19 +21,19 @@ class LegacyJsxParser {
|
|
|
24
21
|
}
|
|
25
22
|
const attrNode = this.createAttributeNode(attr);
|
|
26
23
|
// If it's an object expression, extend it
|
|
27
|
-
if (
|
|
28
|
-
return
|
|
24
|
+
if (isNodeObjectExpression(v)) {
|
|
25
|
+
return extendObjectExpression(v, attrNode);
|
|
29
26
|
}
|
|
30
27
|
// If it's an extender, hack into it
|
|
31
|
-
if (
|
|
32
|
-
return
|
|
28
|
+
if (isNodeExtender(v)) {
|
|
29
|
+
return hackIntoExtenderCallExpression(v, attrNode);
|
|
33
30
|
}
|
|
34
31
|
// If it's an identifier, do Object.assign to be safe
|
|
35
|
-
if (
|
|
36
|
-
return
|
|
32
|
+
if (isNodeIdentifier(v)) {
|
|
33
|
+
return createObjectAssignCallExpressionWithIdentifier(v, createObjectExpressionWithAttr(attrNode));
|
|
37
34
|
}
|
|
38
35
|
// Worst case override with
|
|
39
|
-
return
|
|
36
|
+
return createObjectExpressionWithAttr(attrNode);
|
|
40
37
|
}),
|
|
41
38
|
};
|
|
42
39
|
}
|
|
@@ -59,4 +56,3 @@ class LegacyJsxParser {
|
|
|
59
56
|
};
|
|
60
57
|
}
|
|
61
58
|
}
|
|
62
|
-
exports.LegacyJsxParser = LegacyJsxParser;
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.ModernJsxParser = void 0;
|
|
4
|
-
const ast_utils_1 = require("../ast.utils");
|
|
5
|
-
class ModernJsxParser {
|
|
1
|
+
import { createObjectAssignCallExpressionWithIdentifier, createObjectExpressionWithAttr, extendObjectExpression, hackIntoExtenderCallExpression, isNodeExtender, isNodeIdentifier, isNodeObjectExpression, } from "../ast.utils.js";
|
|
2
|
+
export class ModernJsxParser {
|
|
6
3
|
constructor() {
|
|
7
4
|
this.reactCalleeNames = [
|
|
8
5
|
"_jsxDEV",
|
|
@@ -53,19 +50,19 @@ class ModernJsxParser {
|
|
|
53
50
|
}
|
|
54
51
|
const attrNode = this.createAttributeNode(attr);
|
|
55
52
|
// If it's an object expression, extend it
|
|
56
|
-
if (
|
|
57
|
-
return
|
|
53
|
+
if (isNodeObjectExpression(v)) {
|
|
54
|
+
return extendObjectExpression(v, attrNode);
|
|
58
55
|
}
|
|
59
56
|
// If it's an extender, hack into it
|
|
60
|
-
if (
|
|
61
|
-
return
|
|
57
|
+
if (isNodeExtender(v)) {
|
|
58
|
+
return hackIntoExtenderCallExpression(v, attrNode);
|
|
62
59
|
}
|
|
63
60
|
// If it's an identifier, do Object.assign to be safe
|
|
64
|
-
if (
|
|
65
|
-
return
|
|
61
|
+
if (isNodeIdentifier(v)) {
|
|
62
|
+
return createObjectAssignCallExpressionWithIdentifier(v, createObjectExpressionWithAttr(attrNode));
|
|
66
63
|
}
|
|
67
64
|
// Worst case override with
|
|
68
|
-
return
|
|
65
|
+
return createObjectExpressionWithAttr(attrNode);
|
|
69
66
|
}),
|
|
70
67
|
};
|
|
71
68
|
}
|
|
@@ -88,4 +85,3 @@ class ModernJsxParser {
|
|
|
88
85
|
};
|
|
89
86
|
}
|
|
90
87
|
}
|
|
91
|
-
exports.ModernJsxParser = ModernJsxParser;
|
|
@@ -1,17 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const ast_iterator_1 = require("../ast-iterator");
|
|
5
|
-
const ast_utils_1 = require("../ast.utils");
|
|
6
|
-
const getImportDeclarationsValue = (root) => {
|
|
1
|
+
import { astIterator } from "../ast-iterator.js";
|
|
2
|
+
import { getSrcFromImportOrRequire, isNodeImportOrRequire, } from "../ast.utils.js";
|
|
3
|
+
export const getImportDeclarationsValue = (root) => {
|
|
7
4
|
const urls = [];
|
|
8
|
-
for (const node of
|
|
9
|
-
if (!
|
|
5
|
+
for (const node of astIterator(root)) {
|
|
6
|
+
if (!isNodeImportOrRequire(node)) {
|
|
10
7
|
continue;
|
|
11
8
|
}
|
|
12
|
-
const src =
|
|
9
|
+
const src = getSrcFromImportOrRequire(node);
|
|
13
10
|
urls.push(src);
|
|
14
11
|
}
|
|
15
12
|
return urls;
|
|
16
13
|
};
|
|
17
|
-
exports.getImportDeclarationsValue = getImportDeclarationsValue;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rollup-plugin-react-scoped-css",
|
|
3
|
-
"version": "1.2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.2.2",
|
|
4
|
+
"description": "Bring scoped CSS to React with Vite & Rollup. Lightweight component-level style isolation similar to Vue and Angular.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
@@ -24,48 +24,55 @@
|
|
|
24
24
|
"rollup",
|
|
25
25
|
"react",
|
|
26
26
|
"css",
|
|
27
|
-
"
|
|
27
|
+
"styles",
|
|
28
28
|
"vite",
|
|
29
|
-
"vitejs"
|
|
29
|
+
"vitejs",
|
|
30
|
+
"plugin",
|
|
31
|
+
"vite-plugin",
|
|
32
|
+
"rollup-plugin",
|
|
33
|
+
"css-modules",
|
|
34
|
+
"scoped-styles",
|
|
35
|
+
"component-styles",
|
|
36
|
+
"isolation"
|
|
30
37
|
],
|
|
31
|
-
"license": "
|
|
38
|
+
"license": "MIT",
|
|
32
39
|
"bugs": {
|
|
33
40
|
"url": "https://github.com/cmseguin/rollup-plugin-react-scoped-css/issues"
|
|
34
41
|
},
|
|
35
42
|
"homepage": "https://github.com/cmseguin/rollup-plugin-react-scoped-css#readme",
|
|
36
43
|
"dependencies": {
|
|
37
|
-
"@rollup/pluginutils": "^5.
|
|
38
|
-
"css-tree": "3.
|
|
44
|
+
"@rollup/pluginutils": "^5.3.0",
|
|
45
|
+
"css-tree": "3.2.1",
|
|
39
46
|
"escodegen": "2.1.0",
|
|
40
|
-
"js-xxhash": "
|
|
41
|
-
"rollup": "^4.
|
|
47
|
+
"js-xxhash": "5.0.1",
|
|
48
|
+
"rollup": "^4.59.0"
|
|
42
49
|
},
|
|
43
50
|
"devDependencies": {
|
|
44
|
-
"@babel/core": "7.
|
|
45
|
-
"@babel/preset-env": "7.
|
|
46
|
-
"@babel/preset-react": "7.
|
|
47
|
-
"@babel/preset-typescript": "7.
|
|
48
|
-
"@semantic-release/commit-analyzer": "13.0.
|
|
51
|
+
"@babel/core": "7.29.0",
|
|
52
|
+
"@babel/preset-env": "7.29.0",
|
|
53
|
+
"@babel/preset-react": "7.28.5",
|
|
54
|
+
"@babel/preset-typescript": "7.28.5",
|
|
55
|
+
"@semantic-release/commit-analyzer": "13.0.1",
|
|
49
56
|
"@semantic-release/git": "10.0.1",
|
|
50
|
-
"@semantic-release/github": "
|
|
51
|
-
"@semantic-release/npm": "
|
|
52
|
-
"@semantic-release/release-notes-generator": "14.0
|
|
53
|
-
"@types/css-tree": "2.3.
|
|
57
|
+
"@semantic-release/github": "12.0.6",
|
|
58
|
+
"@semantic-release/npm": "13.1.5",
|
|
59
|
+
"@semantic-release/release-notes-generator": "14.1.0",
|
|
60
|
+
"@types/css-tree": "2.3.11",
|
|
54
61
|
"@types/escodegen": "0.0.10",
|
|
55
|
-
"@types/estree": "1.0.
|
|
56
|
-
"@types/jest": "
|
|
57
|
-
"@types/node": "
|
|
58
|
-
"@typescript-eslint/eslint-plugin": "8.
|
|
59
|
-
"@typescript-eslint/parser": "8.
|
|
60
|
-
"acorn": "8.
|
|
62
|
+
"@types/estree": "1.0.8",
|
|
63
|
+
"@types/jest": "30.0.0",
|
|
64
|
+
"@types/node": "25.3.5",
|
|
65
|
+
"@typescript-eslint/eslint-plugin": "8.56.1",
|
|
66
|
+
"@typescript-eslint/parser": "8.56.1",
|
|
67
|
+
"acorn": "8.16.0",
|
|
61
68
|
"eslint": "9.12.0",
|
|
62
69
|
"eslint-config-prettier": "9.1.0",
|
|
63
70
|
"eslint-plugin-import": "2.31.0",
|
|
64
71
|
"eslint-plugin-node": "11.1.0",
|
|
65
72
|
"eslint-plugin-prettier": "5.2.1",
|
|
66
73
|
"eslint-plugin-react": "7.37.1",
|
|
67
|
-
"jest": "
|
|
68
|
-
"semantic-release": "
|
|
69
|
-
"typescript": "5.
|
|
74
|
+
"jest": "30.2.0",
|
|
75
|
+
"semantic-release": "25.0.3",
|
|
76
|
+
"typescript": "5.9.3"
|
|
70
77
|
}
|
|
71
78
|
}
|