rollup-plugin-react-scoped-css 0.5.0 → 0.6.1
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/.eslintrc.yml +29 -0
- package/.releaserc +3 -2
- package/README.md +36 -8
- package/dist/ast-iterator.js +5 -5
- package/dist/ast-program.d.ts +5 -0
- package/dist/ast-program.js +63 -0
- package/dist/ast-transformer.d.ts +1 -1
- package/dist/ast-transformer.js +6 -6
- package/dist/ast.utils.d.ts +32 -5
- package/dist/ast.utils.js +115 -49
- package/dist/index.d.ts +2 -2
- package/dist/index.js +20 -19
- package/dist/parsers/classic-parser.js +34 -53
- package/dist/parsers/new-parser.js +52 -52
- package/package.json +13 -1
- package/.github/workflows/pull-request.yml +0 -19
- package/.github/workflows/release.yml +0 -30
- package/babel.config.js +0 -3
- package/src/__mocks__/classic-compiled-jsx-with-attr.js +0 -37
- package/src/__mocks__/classic-compiled-jsx.js +0 -31
- package/src/__mocks__/new-compiled-jsx-with-attr.js +0 -101
- package/src/__mocks__/new-compiled-jsx.js +0 -64
- package/src/__mocks__/sample-code-file.js +0 -4
- package/src/ast-iterator.spec.ts +0 -19
- package/src/ast-iterator.ts +0 -27
- package/src/ast-transformer.spec.ts +0 -20
- package/src/ast-transformer.ts +0 -24
- package/src/ast.utils.spec.ts +0 -46
- package/src/ast.utils.ts +0 -48
- package/src/index.ts +0 -144
- package/src/parsers/classic-parser.ts +0 -58
- package/src/parsers/jsx-parser.model.ts +0 -10
- package/src/parsers/new-parser.ts +0 -58
package/.eslintrc.yml
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
env:
|
|
2
|
+
browser: true
|
|
3
|
+
es2021: true
|
|
4
|
+
extends:
|
|
5
|
+
- eslint:recommended
|
|
6
|
+
- plugin:@typescript-eslint/eslint-recommended
|
|
7
|
+
- plugin:@typescript-eslint/recommended
|
|
8
|
+
- plugin:react/recommended
|
|
9
|
+
- plugin:prettier/recommended
|
|
10
|
+
- plugin:react/jsx-runtime
|
|
11
|
+
parser: '@typescript-eslint/parser'
|
|
12
|
+
parserOptions:
|
|
13
|
+
ecmaFeatures:
|
|
14
|
+
jsx: true
|
|
15
|
+
ecmaVersion: "latest"
|
|
16
|
+
sourceType: module
|
|
17
|
+
plugins:
|
|
18
|
+
- react
|
|
19
|
+
- '@typescript-eslint'
|
|
20
|
+
settings:
|
|
21
|
+
react:
|
|
22
|
+
version: "detect"
|
|
23
|
+
ignorePatterns:
|
|
24
|
+
- "**/node_modules/**"
|
|
25
|
+
- "**/__mocks__/**/*.js"
|
|
26
|
+
- "**/dist/**"
|
|
27
|
+
rules: {
|
|
28
|
+
"react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
|
|
29
|
+
}
|
package/.releaserc
CHANGED
|
@@ -5,8 +5,9 @@
|
|
|
5
5
|
"@semantic-release/release-notes-generator",
|
|
6
6
|
"@semantic-release/npm",
|
|
7
7
|
["@semantic-release/git", {
|
|
8
|
-
"assets": ["
|
|
8
|
+
"assets": ["package.json"],
|
|
9
9
|
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
|
|
10
|
-
}]
|
|
10
|
+
}],
|
|
11
|
+
"@semantic-release/github"
|
|
11
12
|
]
|
|
12
13
|
}
|
package/README.md
CHANGED
|
@@ -18,26 +18,54 @@ export default function Sub() {
|
|
|
18
18
|
}
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
```
|
|
22
|
-
// Component.scoped.
|
|
21
|
+
```scss
|
|
22
|
+
// Component.scoped.scss
|
|
23
23
|
.wrap {
|
|
24
24
|
width: 500px;
|
|
25
25
|
h1 { color: red; }
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
|
-
|
|
29
28
|
And just like that the styles will be scoped to the component.
|
|
30
29
|
|
|
30
|
+
## Limitations
|
|
31
|
+
Due to the way this plugin is working, it will apply the scope to the file and not the component individually... This may differ from other frameworks since they don't really let you define multiple components in the same file. This then means that if you have 2 components in the same file, the styles might conflict.
|
|
32
|
+
|
|
33
|
+
## Technicality
|
|
34
|
+
since this plugin uses the engine of vue to scope the css to the components, the following sections come straight from the [vue documentation](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors).
|
|
35
|
+
|
|
36
|
+
### Deep selector
|
|
37
|
+
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:
|
|
38
|
+
```css
|
|
39
|
+
.a >>> .b { /* ... */ }
|
|
40
|
+
```
|
|
41
|
+
The above will be compiled into:
|
|
42
|
+
```css
|
|
43
|
+
.a[data-v-f3f3eg9] .b { /* ... */ }
|
|
44
|
+
```
|
|
45
|
+
Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or ::v-deep combinator instead - both are aliases for >>> and work exactly the same. Based on the example above these two expressions will be compiled to the same output:
|
|
46
|
+
```scss
|
|
47
|
+
.a::v-deep .b { /* ... */ }
|
|
48
|
+
/* or */
|
|
49
|
+
.a /deep/ .b { /* ... */ }
|
|
50
|
+
```
|
|
51
|
+
### Dynamically Generated Content
|
|
52
|
+
DOM content created with dangerouslySetInnerHTML are not affected by scoped styles, but you can still style them using deep selectors.
|
|
53
|
+
|
|
54
|
+
### Also Keep in Mind
|
|
55
|
+
Scoped styles do not eliminate the need for classes. Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit.
|
|
56
|
+
|
|
57
|
+
Be careful with descendant selectors in recursive components! For a CSS rule with the selector .a .b, if the element that matches .a contains a recursive child component, then all .b in that child component will be matched by the rule.
|
|
58
|
+
|
|
31
59
|
## How to install
|
|
32
60
|
|
|
33
61
|
```sh
|
|
34
|
-
npm i rollup-plugin-react-scoped-css
|
|
62
|
+
$ npm i rollup-plugin-react-scoped-css
|
|
35
63
|
```
|
|
36
64
|
|
|
37
65
|
### Simple Configuration
|
|
38
66
|
|
|
39
67
|
in vite:
|
|
40
|
-
```
|
|
68
|
+
```js
|
|
41
69
|
// vite.config.js
|
|
42
70
|
import { defineConfig } from 'vite'
|
|
43
71
|
import reactRefresh from '@vitejs/plugin-react-refresh'
|
|
@@ -50,7 +78,7 @@ export default defineConfig({
|
|
|
50
78
|
```
|
|
51
79
|
|
|
52
80
|
in rollup:
|
|
53
|
-
```
|
|
81
|
+
```js
|
|
54
82
|
// rollup.config.js
|
|
55
83
|
import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css';
|
|
56
84
|
|
|
@@ -63,7 +91,7 @@ export default {
|
|
|
63
91
|
|
|
64
92
|
### Customizing the plugin
|
|
65
93
|
There are a few options available to customize how the plugin works
|
|
66
|
-
```
|
|
94
|
+
```ts
|
|
67
95
|
{
|
|
68
96
|
/**
|
|
69
97
|
* Which files should be included and parsed by the plugin
|
|
@@ -107,7 +135,7 @@ There are a few options available to customize how the plugin works
|
|
|
107
135
|
### With other rollup plugins
|
|
108
136
|
Since this plugin works in two parts, you might need to expose the first part, then add any other plugin, and then expose the second part of the plugin. This part is automatically handled with vite thanks to the enforce attribute.
|
|
109
137
|
|
|
110
|
-
```
|
|
138
|
+
```js
|
|
111
139
|
const reactScopedPlugins = reactScopedCssPlugin()
|
|
112
140
|
export default {
|
|
113
141
|
//...
|
package/dist/ast-iterator.js
CHANGED
|
@@ -41,10 +41,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
41
41
|
exports.astIterator = void 0;
|
|
42
42
|
var isNode = function (obj) {
|
|
43
43
|
var _a, _b, _c;
|
|
44
|
-
return typeof obj ===
|
|
45
|
-
typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) ===
|
|
46
|
-
typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) ===
|
|
47
|
-
typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) ===
|
|
44
|
+
return (typeof obj === "object" &&
|
|
45
|
+
typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) === "number" &&
|
|
46
|
+
typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) === "number" &&
|
|
47
|
+
typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) === "string");
|
|
48
48
|
};
|
|
49
49
|
var astIterator = function (ast) {
|
|
50
50
|
var _a, _b, key, _c, _d, _i, nodeIndex, e_1_1;
|
|
@@ -64,7 +64,7 @@ var astIterator = function (ast) {
|
|
|
64
64
|
if (!!_b.done) return [3 /*break*/, 10];
|
|
65
65
|
key = _b.value;
|
|
66
66
|
// Skip useless keys
|
|
67
|
-
if ([
|
|
67
|
+
if (["end", "start", "type"].includes(key)) {
|
|
68
68
|
return [3 /*break*/, 9];
|
|
69
69
|
}
|
|
70
70
|
if (!Array.isArray(ast[key])) return [3 /*break*/, 7];
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __values = (this && this.__values) || function(o) {
|
|
3
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
4
|
+
if (m) return m.call(o);
|
|
5
|
+
if (o && typeof o.length === "number") return {
|
|
6
|
+
next: function () {
|
|
7
|
+
if (o && i >= o.length) o = void 0;
|
|
8
|
+
return { value: o && o[i++], done: !o };
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.addHashAttributesToJsxTagsAst = void 0;
|
|
15
|
+
var ast_iterator_1 = require("./ast-iterator");
|
|
16
|
+
var ast_transformer_1 = require("./ast-transformer");
|
|
17
|
+
var ast_utils_1 = require("./ast.utils");
|
|
18
|
+
var classic_parser_1 = require("./parsers/classic-parser");
|
|
19
|
+
var jsx_parser_model_1 = require("./parsers/jsx-parser.model");
|
|
20
|
+
var new_parser_1 = require("./parsers/new-parser");
|
|
21
|
+
global.implementation = null;
|
|
22
|
+
var classicParser = new classic_parser_1.ClassicJsxParser();
|
|
23
|
+
var newParser = new new_parser_1.NewJsxParser();
|
|
24
|
+
var parser = classicParser;
|
|
25
|
+
var findImplementation = function (program) {
|
|
26
|
+
var e_1, _a;
|
|
27
|
+
var implementation = jsx_parser_model_1.ParserImplementations.classic;
|
|
28
|
+
try {
|
|
29
|
+
for (var _b = __values((0, ast_iterator_1.astIterator)(program)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
30
|
+
var node = _c.value;
|
|
31
|
+
if (!(0, ast_utils_1.isNodeImportOrRequire)(node)) {
|
|
32
|
+
continue;
|
|
33
|
+
}
|
|
34
|
+
var src = (0, ast_utils_1.getSrcFromImportOrRequire)(node);
|
|
35
|
+
if (["react/jsx-dev-runtime", "react/jsx-runtime"].includes(src)) {
|
|
36
|
+
return jsx_parser_model_1.ParserImplementations.new;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
41
|
+
finally {
|
|
42
|
+
try {
|
|
43
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
44
|
+
}
|
|
45
|
+
finally { if (e_1) throw e_1.error; }
|
|
46
|
+
}
|
|
47
|
+
return implementation;
|
|
48
|
+
};
|
|
49
|
+
function addHashAttributesToJsxTagsAst(program, attr) {
|
|
50
|
+
// Once in the program, we can determine which parser to use
|
|
51
|
+
if (global.implementation === null) {
|
|
52
|
+
global.implementation = findImplementation(program);
|
|
53
|
+
if (global.implementation === jsx_parser_model_1.ParserImplementations.new) {
|
|
54
|
+
parser = newParser;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return (0, ast_transformer_1.astTransformer)(program, function (node) {
|
|
58
|
+
if (parser.isNodeReactElement(node) && !parser.isNodeReactFragment(node)) {
|
|
59
|
+
return parser.extendNodeWithAttributes(node, attr);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
exports.addHashAttributesToJsxTagsAst = addHashAttributesToJsxTagsAst;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const astTransformer: (ast: any, callback:
|
|
1
|
+
export declare const astTransformer: (ast: any, callback: (ast: any) => any) => any;
|
package/dist/ast-transformer.js
CHANGED
|
@@ -14,17 +14,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
exports.astTransformer = void 0;
|
|
15
15
|
var isNode = function (obj) {
|
|
16
16
|
var _a, _b, _c;
|
|
17
|
-
return typeof obj ===
|
|
18
|
-
typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) ===
|
|
19
|
-
typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) ===
|
|
20
|
-
typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) ===
|
|
17
|
+
return (typeof obj === "object" &&
|
|
18
|
+
typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) === "number" &&
|
|
19
|
+
typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) === "number" &&
|
|
20
|
+
typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) === "string");
|
|
21
21
|
};
|
|
22
22
|
var astTransformer = function (ast, callback) {
|
|
23
23
|
var e_1, _a;
|
|
24
24
|
try {
|
|
25
25
|
for (var _b = __values(Object.keys(ast)), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
26
26
|
var key = _c.value;
|
|
27
|
-
if ([
|
|
27
|
+
if (["end", "start", "type"].includes(key)) {
|
|
28
28
|
continue;
|
|
29
29
|
}
|
|
30
30
|
if (Array.isArray(ast[key])) {
|
|
@@ -45,6 +45,6 @@ var astTransformer = function (ast, callback) {
|
|
|
45
45
|
finally { if (e_1) throw e_1.error; }
|
|
46
46
|
}
|
|
47
47
|
var result = callback(ast);
|
|
48
|
-
return typeof result !==
|
|
48
|
+
return typeof result !== "undefined" ? result : ast;
|
|
49
49
|
};
|
|
50
50
|
exports.astTransformer = astTransformer;
|
package/dist/ast.utils.d.ts
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
export declare const createObjectAssignCallExpressionWithIdentifier: (identifier: any, objectExpression: any) => {
|
|
2
|
+
type: string;
|
|
3
|
+
callee: {
|
|
4
|
+
type: string;
|
|
5
|
+
object: {
|
|
6
|
+
type: string;
|
|
7
|
+
name: string;
|
|
8
|
+
};
|
|
9
|
+
property: {
|
|
10
|
+
type: string;
|
|
11
|
+
name: string;
|
|
12
|
+
};
|
|
13
|
+
computed: boolean;
|
|
14
|
+
optional: boolean;
|
|
15
|
+
};
|
|
16
|
+
arguments: any[];
|
|
17
|
+
optional: boolean;
|
|
18
|
+
};
|
|
19
|
+
export declare const createObjectExpressionWithAttr: (attrNode: any) => {
|
|
20
|
+
type: string;
|
|
21
|
+
properties: any[];
|
|
22
|
+
};
|
|
23
|
+
export declare const extendObjectExpression: (objectExpression: any, prop: any) => any;
|
|
24
|
+
export declare const hackIntoExtenderCallExpression: (callExpression: any, prop: any) => any;
|
|
25
|
+
export declare const isNodeCallExpression: (node: any) => boolean;
|
|
26
|
+
export declare const isNodeObjectExpression: (node: any) => boolean;
|
|
27
|
+
export declare const isNodeExtender: (node: any) => boolean;
|
|
28
|
+
export declare const isNodeIdentifier: (node: any) => boolean;
|
|
29
|
+
export declare const isNodeImportDeclaration: (node: any) => boolean;
|
|
30
|
+
export declare const isNodeRequireCallExpression: (node: any) => boolean;
|
|
31
|
+
export declare const isNodeImportOrRequire: (node: any) => boolean;
|
|
32
|
+
export declare const getSrcFromImportOrRequire: (node: any) => any;
|
package/dist/ast.utils.js
CHANGED
|
@@ -1,61 +1,127 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
return { value: o && o[i++], done: !o };
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
9
8
|
}
|
|
9
|
+
return t;
|
|
10
10
|
};
|
|
11
|
-
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var
|
|
17
|
-
var classic_parser_1 = require("./parsers/classic-parser");
|
|
18
|
-
var jsx_parser_model_1 = require("./parsers/jsx-parser.model");
|
|
19
|
-
var new_parser_1 = require("./parsers/new-parser");
|
|
20
|
-
global.implementation = null;
|
|
21
|
-
var classicParser = new classic_parser_1.ClassicJsxParser();
|
|
22
|
-
var newParser = new new_parser_1.NewJsxParser();
|
|
23
|
-
var parser = classicParser;
|
|
24
|
-
var findImplementation = function (program) {
|
|
25
|
-
var e_1, _a;
|
|
26
|
-
var implementation = jsx_parser_model_1.ParserImplementations.classic;
|
|
13
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
14
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
15
|
+
if (!m) return o;
|
|
16
|
+
var i = m.call(o), r, ar = [], e;
|
|
27
17
|
try {
|
|
28
|
-
|
|
29
|
-
var node = _c.value;
|
|
30
|
-
if (node.type !== 'ImportDeclaration') {
|
|
31
|
-
continue;
|
|
32
|
-
}
|
|
33
|
-
if (node.specifiers.some(function (n) { return n.local.name === 'jsxRuntime'; }) || node.source.value === 'react/jsx-runtime') {
|
|
34
|
-
return jsx_parser_model_1.ParserImplementations.new;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
18
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
37
19
|
}
|
|
38
|
-
catch (
|
|
20
|
+
catch (error) { e = { error: error }; }
|
|
39
21
|
finally {
|
|
40
22
|
try {
|
|
41
|
-
if (
|
|
23
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
42
24
|
}
|
|
43
|
-
finally { if (
|
|
25
|
+
finally { if (e) throw e.error; }
|
|
44
26
|
}
|
|
45
|
-
return
|
|
46
|
-
};
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
parser = newParser;
|
|
27
|
+
return ar;
|
|
28
|
+
};
|
|
29
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
30
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
31
|
+
if (ar || !(i in from)) {
|
|
32
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
33
|
+
ar[i] = from[i];
|
|
53
34
|
}
|
|
54
35
|
}
|
|
55
|
-
return
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
36
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
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;
|
|
40
|
+
var createObjectAssignCallExpressionWithIdentifier = function (identifier, objectExpression) {
|
|
41
|
+
return {
|
|
42
|
+
type: "CallExpression",
|
|
43
|
+
callee: {
|
|
44
|
+
type: "MemberExpression",
|
|
45
|
+
object: {
|
|
46
|
+
type: "Identifier",
|
|
47
|
+
name: "Object",
|
|
48
|
+
},
|
|
49
|
+
property: {
|
|
50
|
+
type: "Identifier",
|
|
51
|
+
name: "assign",
|
|
52
|
+
},
|
|
53
|
+
computed: false,
|
|
54
|
+
optional: false,
|
|
55
|
+
},
|
|
56
|
+
arguments: [
|
|
57
|
+
{
|
|
58
|
+
type: "ObjectExpression",
|
|
59
|
+
start: 14,
|
|
60
|
+
end: 16,
|
|
61
|
+
properties: [],
|
|
62
|
+
},
|
|
63
|
+
identifier,
|
|
64
|
+
objectExpression,
|
|
65
|
+
],
|
|
66
|
+
optional: false,
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
exports.createObjectAssignCallExpressionWithIdentifier = createObjectAssignCallExpressionWithIdentifier;
|
|
70
|
+
var createObjectExpressionWithAttr = function (attrNode) {
|
|
71
|
+
return {
|
|
72
|
+
type: "ObjectExpression",
|
|
73
|
+
properties: [attrNode],
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
exports.createObjectExpressionWithAttr = createObjectExpressionWithAttr;
|
|
77
|
+
var extendObjectExpression = function (objectExpression, prop) {
|
|
78
|
+
return __assign(__assign({}, objectExpression), { properties: __spreadArray(__spreadArray([], __read(objectExpression.properties), false), [prop], false) });
|
|
79
|
+
};
|
|
80
|
+
exports.extendObjectExpression = extendObjectExpression;
|
|
81
|
+
var hackIntoExtenderCallExpression = function (callExpression, prop) {
|
|
82
|
+
return __assign(__assign({}, callExpression), { arguments: __spreadArray(__spreadArray([], __read(callExpression.arguments), false), [
|
|
83
|
+
(0, exports.createObjectExpressionWithAttr)(prop),
|
|
84
|
+
], false) });
|
|
85
|
+
};
|
|
86
|
+
exports.hackIntoExtenderCallExpression = hackIntoExtenderCallExpression;
|
|
87
|
+
var isNodeCallExpression = function (node) {
|
|
88
|
+
return node.type === "CallExpression";
|
|
89
|
+
};
|
|
90
|
+
exports.isNodeCallExpression = isNodeCallExpression;
|
|
91
|
+
var isNodeObjectExpression = function (node) {
|
|
92
|
+
return node.type === "ObjectExpression";
|
|
93
|
+
};
|
|
94
|
+
exports.isNodeObjectExpression = isNodeObjectExpression;
|
|
95
|
+
var isNodeExtender = function (node) {
|
|
96
|
+
return ((0, exports.isNodeCallExpression)(node) &&
|
|
97
|
+
(node.callee.name === "_objectSpread" || node.callee.name === "_extends"));
|
|
98
|
+
};
|
|
99
|
+
exports.isNodeExtender = isNodeExtender;
|
|
100
|
+
var isNodeIdentifier = function (node) {
|
|
101
|
+
return node.type === "Identifier";
|
|
102
|
+
};
|
|
103
|
+
exports.isNodeIdentifier = isNodeIdentifier;
|
|
104
|
+
var isNodeImportDeclaration = function (node) {
|
|
105
|
+
return node.type === "ImportDeclaration";
|
|
106
|
+
};
|
|
107
|
+
exports.isNodeImportDeclaration = isNodeImportDeclaration;
|
|
108
|
+
var isNodeRequireCallExpression = function (node) {
|
|
109
|
+
return ((0, exports.isNodeCallExpression)(node) &&
|
|
110
|
+
node.callee.name === "require" &&
|
|
111
|
+
node.arguments.length === 1);
|
|
112
|
+
};
|
|
113
|
+
exports.isNodeRequireCallExpression = isNodeRequireCallExpression;
|
|
114
|
+
var isNodeImportOrRequire = function (node) {
|
|
115
|
+
return (0, exports.isNodeImportDeclaration)(node) || (0, exports.isNodeRequireCallExpression)(node);
|
|
116
|
+
};
|
|
117
|
+
exports.isNodeImportOrRequire = isNodeImportOrRequire;
|
|
118
|
+
var getSrcFromImportOrRequire = function (node) {
|
|
119
|
+
if ((0, exports.isNodeImportDeclaration)(node)) {
|
|
120
|
+
return node.source.value;
|
|
121
|
+
}
|
|
122
|
+
if ((0, exports.isNodeRequireCallExpression)(node)) {
|
|
123
|
+
return node.arguments[0].value;
|
|
124
|
+
}
|
|
125
|
+
return null;
|
|
126
|
+
};
|
|
127
|
+
exports.getSrcFromImportOrRequire = getSrcFromImportOrRequire;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FilterPattern } from
|
|
2
|
-
import type { Plugin } from
|
|
1
|
+
import { FilterPattern } from "@rollup/pluginutils";
|
|
2
|
+
import type { Plugin } from "rollup";
|
|
3
3
|
export interface ReactScopedCssPluginOptions {
|
|
4
4
|
/**
|
|
5
5
|
* Which files should be included and parsed by the plugin
|
package/dist/index.js
CHANGED
|
@@ -30,24 +30,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
30
30
|
return result;
|
|
31
31
|
};
|
|
32
32
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
|
+
/* eslint-disable no-useless-escape */
|
|
33
34
|
var path = __importStar(require("path"));
|
|
34
35
|
var js_xxhash_1 = require("js-xxhash");
|
|
35
36
|
var pluginutils_1 = require("@rollup/pluginutils");
|
|
36
37
|
var component_compiler_utils_1 = require("@vue/component-compiler-utils");
|
|
37
38
|
var escodegen_1 = require("escodegen");
|
|
38
|
-
var
|
|
39
|
+
var ast_program_1 = require("./ast-program");
|
|
39
40
|
var getFilenameFromPath = function (filePath) {
|
|
40
|
-
var parts = filePath.split(
|
|
41
|
-
return parts[parts.length - 1].split(
|
|
41
|
+
var parts = filePath.split("/");
|
|
42
|
+
return parts[parts.length - 1].split("?")[0];
|
|
42
43
|
};
|
|
43
44
|
var getHashFromPath = function (filePath) {
|
|
44
|
-
var search =
|
|
45
|
+
var search = "?scope=";
|
|
45
46
|
var hash = filePath.slice(filePath.indexOf(search) + search.length);
|
|
46
47
|
return hash;
|
|
47
48
|
};
|
|
48
49
|
var generateHash = function (input, seed) {
|
|
49
50
|
if (seed === void 0) { seed = 0; }
|
|
50
|
-
var hashNum = (0, js_xxhash_1.xxHash32)(Buffer.from(input,
|
|
51
|
+
var hashNum = (0, js_xxhash_1.xxHash32)(Buffer.from(input, "utf8"), seed);
|
|
51
52
|
return hashNum.toString(16);
|
|
52
53
|
};
|
|
53
54
|
var addAttributesToCss = function (src, fileName, hash) {
|
|
@@ -62,24 +63,24 @@ var addAttributesToCss = function (src, fileName, hash) {
|
|
|
62
63
|
};
|
|
63
64
|
function reactScopedCssPlugin(optionsIn) {
|
|
64
65
|
if (optionsIn === void 0) { optionsIn = {}; }
|
|
65
|
-
var options = __assign({ hashPrefix:
|
|
66
|
+
var options = __assign({ hashPrefix: "v", styleFileSuffix: "scoped", styleFileExtensions: ["scss", "css", "sass", "less"], jsxFileExtensions: ["jsx", "tsx"] }, optionsIn);
|
|
66
67
|
if (!options.styleFileExtensions || !options.styleFileExtensions.length) {
|
|
67
|
-
throw new Error(
|
|
68
|
+
throw new Error("You need to provide at least one style file extension");
|
|
68
69
|
}
|
|
69
70
|
if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
|
|
70
|
-
throw new Error(
|
|
71
|
+
throw new Error("You need to provide at least one jsx file extension");
|
|
71
72
|
}
|
|
72
73
|
var filter = (0, pluginutils_1.createFilter)(options.include, options.exclude);
|
|
73
74
|
var scopedCssRegex = options.styleFileSuffix
|
|
74
|
-
? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join(
|
|
75
|
-
: new RegExp(".(".concat(options.styleFileExtensions.join(
|
|
75
|
+
? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join("|"), ")$"))
|
|
76
|
+
: new RegExp(".(".concat(options.styleFileExtensions.join("|"), ")$"));
|
|
76
77
|
var scopedCssInFileRegex = options.styleFileSuffix
|
|
77
|
-
? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join(
|
|
78
|
-
: new RegExp(".(".concat(options.styleFileExtensions.join(
|
|
79
|
-
var jsxRegex = new RegExp(".(".concat(options.jsxFileExtensions.join(
|
|
78
|
+
? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join("|"), ")(\"|')"))
|
|
79
|
+
: new RegExp(".(".concat(options.styleFileExtensions.join("|"), ")(\"|')"));
|
|
80
|
+
var jsxRegex = new RegExp(".(".concat(options.jsxFileExtensions.join("|"), ")$"));
|
|
80
81
|
return [
|
|
81
82
|
{
|
|
82
|
-
name:
|
|
83
|
+
name: "rollup-plugin-react-scoped-css:pre",
|
|
83
84
|
resolveId: function (source, importer) {
|
|
84
85
|
if (!importer) {
|
|
85
86
|
return;
|
|
@@ -90,10 +91,10 @@ function reactScopedCssPlugin(optionsIn) {
|
|
|
90
91
|
return url;
|
|
91
92
|
}
|
|
92
93
|
},
|
|
93
|
-
enforce:
|
|
94
|
+
enforce: "pre",
|
|
94
95
|
},
|
|
95
96
|
{
|
|
96
|
-
name:
|
|
97
|
+
name: "rollup-plugin-react-scoped-css:post",
|
|
97
98
|
transform: function (code, id) {
|
|
98
99
|
if (!filter(id)) {
|
|
99
100
|
return;
|
|
@@ -101,15 +102,15 @@ function reactScopedCssPlugin(optionsIn) {
|
|
|
101
102
|
if (scopedCssInFileRegex.test(code)) {
|
|
102
103
|
var importerHash = generateHash(id);
|
|
103
104
|
var program = this.parse(code);
|
|
104
|
-
var newAst = (0,
|
|
105
|
+
var newAst = (0, ast_program_1.addHashAttributesToJsxTagsAst)(program, "data-".concat(options.hashPrefix, "-").concat(importerHash));
|
|
105
106
|
return (0, escodegen_1.generate)(newAst);
|
|
106
107
|
}
|
|
107
108
|
if (scopedCssRegex.test(getFilenameFromPath(id))) {
|
|
108
109
|
var importerHash = getHashFromPath(id);
|
|
109
110
|
return addAttributesToCss(code, getFilenameFromPath(id), "data-".concat(options.hashPrefix, "-").concat(importerHash));
|
|
110
111
|
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
112
|
+
},
|
|
113
|
+
},
|
|
113
114
|
];
|
|
114
115
|
}
|
|
115
116
|
exports.default = reactScopedCssPlugin;
|