rollup-plugin-react-scoped-css 0.4.1 → 0.6.0

package/.eslintrc.yml

@@ -0,0 +1,29 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/eslint-recommended
+  - plugin:@typescript-eslint/recommended
+  - plugin:react/recommended
+  - plugin:prettier/recommended
+  - plugin:react/jsx-runtime
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: "latest"
+  sourceType: module
+plugins:
+  - react
+  - '@typescript-eslint'
+settings:
+  react:
+    version: "detect"
+ignorePatterns:
+  - "**/node_modules/**"
+  - "**/__mocks__/**/*.js"
+  - "**/dist/**"
+rules: {
+  "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
+}

package/.github/workflows/pull-request.yml

@@ -0,0 +1,20 @@
+name: Pull Request Workflow
+
+on:
+  - pull_request
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test
+      - run: npm run lint

package/.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release Workflow
+
+on:
+  push:
+    branches:
+      - 'main'
+    paths-ignore:
+      - '.github/**'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release
+      
+  

package/.releaserc

@@ -0,0 +1,13 @@
+{
+  "branches": ["main", "next"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    ["@semantic-release/git", {
+      "assets": ["package.json"],
+      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+    }],
+    "@semantic-release/github"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll": false
+  },
+  "editor.formatOnSave": false,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+}

package/README.md

@@ -1,20 +1,68 @@
 # rollup-plugin-react-scoped-css
 
-**IMPORTANT: This plugin is still in its early phase, use at your own risk, but feel free to contribute.**
-
 ## Motivations
 While using react in a professional context, I realized that it was lacking the scopped css feature that I learned to love from Vue and Angular. After some reasearch I came across good plugins, but sadly were not compatible with vite and/or rollup. Thus, I decided to create this plugin which was greatly inspired by the amazing work of [gaoxiaoliangz](https://github.com/gaoxiaoliangz) with his [react-scoped-css plugin](https://github.com/gaoxiaoliangz/react-scoped-css).
 
+## Usage
+
+```jsx
+// Component.jsx
+import './Component.scoped.scss'
+
+export default function Sub() {
+  return (
+    <div className="wrap">
+      <h1>My Component</h1>
+    </div>
+  )
+}
+```
+
+```scss
+// Component.scoped.scss
+.wrap {
+  width: 500px;
+  h1 { color: red; }
+}
+```
+And just like that the styles will be scoped to the component.
+
+## Technicality
+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).
+
+### Deep selector
+If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:
+```css
+.a >>> .b { /* ... */ }
+```
+The above will be compiled into:
+```css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+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:
+```scss
+.a::v-deep .b { /* ... */ }
+/* or */
+.a /deep/ .b { /* ... */ }
+```
+### Dynamically Generated Content
+DOM content created with dangerouslySetInnerHTML are not affected by scoped styles, but you can still style them using deep selectors.
+
+### Also Keep in Mind
+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.
+
+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.
+
 ## How to install
 
 ```sh
-npm i rollup-plugin-react-scoped-css
+$ npm i rollup-plugin-react-scoped-css
 ```
 
 ### Simple Configuration
 
 in vite:
-```
+```js
 // vite.config.js
 import { defineConfig } from 'vite'
 import reactRefresh from '@vitejs/plugin-react-refresh'
@@ -27,7 +75,7 @@ export default defineConfig({
 ```
 
 in rollup:
-```
+```js
 // rollup.config.js
 import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css';
 
@@ -40,7 +88,7 @@ export default {
 
 ### Customizing the plugin
 There are a few options available to customize how the plugin works
-```
+```ts
 {
   /**
    * Which files should be included and parsed by the plugin
@@ -84,7 +132,7 @@ There are a few options available to customize how the plugin works
 ### With other rollup plugins
 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.
 
-```
+```js
 const reactScopedPlugins = reactScopedCssPlugin()
 export default {
   //...

package/babel.config.js

@@ -1,3 +1,7 @@
+// eslint-disable-next-line no-undef
 module.exports = {
-  presets: [['@babel/preset-env', {targets: {node: 'current'}}],'@babel/preset-typescript'],
-};
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

package/dist/ast-iterator.d.ts

@@ -0,0 +1 @@
+export declare const astIterator: (ast: any) => IterableIterator<any>;

package/dist/ast-iterator.js

@@ -0,0 +1,114 @@
+"use strict";
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.astIterator = void 0;
+var isNode = function (obj) {
+    var _a, _b, _c;
+    return (typeof obj === "object" &&
+        typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) === "number" &&
+        typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) === "number" &&
+        typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) === "string");
+};
+var astIterator = function (ast) {
+    var _a, _b, key, _c, _d, _i, nodeIndex, e_1_1;
+    var e_1, _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
+            case 0:
+                if (!ast) {
+                    return [2 /*return*/];
+                }
+                _f.label = 1;
+            case 1:
+                _f.trys.push([1, 11, 12, 13]);
+                _a = __values(Object.keys(ast)), _b = _a.next();
+                _f.label = 2;
+            case 2:
+                if (!!_b.done) return [3 /*break*/, 10];
+                key = _b.value;
+                // Skip useless keys
+                if (["end", "start", "type"].includes(key)) {
+                    return [3 /*break*/, 9];
+                }
+                if (!Array.isArray(ast[key])) return [3 /*break*/, 7];
+                _c = [];
+                for (_d in ast[key])
+                    _c.push(_d);
+                _i = 0;
+                _f.label = 3;
+            case 3:
+                if (!(_i < _c.length)) return [3 /*break*/, 6];
+                nodeIndex = _c[_i];
+                return [5 /*yield**/, __values((0, exports.astIterator)(ast[key][nodeIndex]))];
+            case 4:
+                _f.sent();
+                _f.label = 5;
+            case 5:
+                _i++;
+                return [3 /*break*/, 3];
+            case 6: return [3 /*break*/, 9];
+            case 7:
+                if (!isNode(ast[key])) return [3 /*break*/, 9];
+                return [5 /*yield**/, __values((0, exports.astIterator)(ast[key]))];
+            case 8:
+                _f.sent();
+                _f.label = 9;
+            case 9:
+                _b = _a.next();
+                return [3 /*break*/, 2];
+            case 10: return [3 /*break*/, 13];
+            case 11:
+                e_1_1 = _f.sent();
+                e_1 = { error: e_1_1 };
+                return [3 /*break*/, 13];
+            case 12:
+                try {
+                    if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
+                }
+                finally { if (e_1) throw e_1.error; }
+                return [7 /*endfinally*/];
+            case 13: return [4 /*yield*/, ast];
+            case 14:
+                _f.sent();
+                return [2 /*return*/];
+        }
+    });
+};
+exports.astIterator = astIterator;

package/dist/ast-transformer.d.ts

@@ -0,0 +1 @@
+export declare const astTransformer: (ast: any, callback: (ast: any) => any) => any;

package/dist/ast-transformer.js

@@ -0,0 +1,50 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.astTransformer = void 0;
+var isNode = function (obj) {
+    var _a, _b, _c;
+    return (typeof obj === "object" &&
+        typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) === "number" &&
+        typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) === "number" &&
+        typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) === "string");
+};
+var astTransformer = function (ast, callback) {
+    var e_1, _a;
+    try {
+        for (var _b = __values(Object.keys(ast)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var key = _c.value;
+            if (["end", "start", "type"].includes(key)) {
+                continue;
+            }
+            if (Array.isArray(ast[key])) {
+                for (var nodeIndex in ast[key]) {
+                    ast[key][nodeIndex] = (0, exports.astTransformer)(ast[key][nodeIndex], callback);
+                }
+            }
+            else if (isNode(ast[key])) {
+                ast[key] = (0, exports.astTransformer)(ast[key], callback);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    var result = callback(ast);
+    return typeof result !== "undefined" ? result : ast;
+};
+exports.astTransformer = astTransformer;

package/dist/ast.utils.d.ts

@@ -1 +1,5 @@
+import { ParserImplementations } from "./parsers/jsx-parser.model";
+declare global {
+    var implementation: null | ParserImplementations;
+}
 export declare function addHashAttributesToJsxTagsAst(program: any, attr: string): any;

package/dist/ast.utils.js

@@ -1,122 +1,63 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
         }
-        return t;
     };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addHashAttributesToJsxTagsAst = void 0;
-/**
- * Traverses the AST tree and calls callback for each node.
- * -
- * @param ast The ast tree
- * @param callback Callback function to be called for each node
- * @returns
- */
-function traverse(ast, callback) {
-    for (var _i = 0, _a = Object.keys(ast); _i < _a.length; _i++) {
-        var key = _a[_i];
-        if (['end', 'start', 'type'].includes(key)) {
-            continue;
-        }
-        if (Array.isArray(ast[key])) {
-            for (var nodeIndex in ast[key]) {
-                ast[key][nodeIndex] = traverse(ast[key][nodeIndex], callback);
+var ast_iterator_1 = require("./ast-iterator");
+var ast_transformer_1 = require("./ast-transformer");
+var classic_parser_1 = require("./parsers/classic-parser");
+var jsx_parser_model_1 = require("./parsers/jsx-parser.model");
+var new_parser_1 = require("./parsers/new-parser");
+global.implementation = null;
+var classicParser = new classic_parser_1.ClassicJsxParser();
+var newParser = new new_parser_1.NewJsxParser();
+var parser = classicParser;
+var findImplementation = function (program) {
+    var e_1, _a;
+    var implementation = jsx_parser_model_1.ParserImplementations.classic;
+    try {
+        for (var _b = __values((0, ast_iterator_1.astIterator)(program)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var node = _c.value;
+            if (node.type !== "ImportDeclaration") {
+                continue;
+            }
+            if (node.specifiers.some(function (n) {
+                return ["_jsxDEV", "jsxRuntime"].includes(n.local.name);
+            }) ||
+                ["react/jsx-dev-runtime", "react/jsx-runtime"].includes(node.source.value)) {
+                return jsx_parser_model_1.ParserImplementations.new;
             }
         }
-        else if (isNode(ast[key])) {
-            ast[key] = traverse(ast[key], callback);
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
         }
+        finally { if (e_1) throw e_1.error; }
     }
-    var result = callback(ast);
-    return typeof result !== 'undefined' ? result : ast;
-}
-function isNode(obj) {
-    var _a, _b, _c;
-    return typeof obj === 'object' &&
-        typeof ((_a = obj) === null || _a === void 0 ? void 0 : _a.end) === 'number' &&
-        typeof ((_b = obj) === null || _b === void 0 ? void 0 : _b.start) === 'number' &&
-        typeof ((_c = obj) === null || _c === void 0 ? void 0 : _c.type) === 'string';
-}
-function isElementWithOldJsxTransform(node) {
-    var _a, _b, _c, _d;
-    return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
-        ((_b = (_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.object) === null || _b === void 0 ? void 0 : _b.name) === 'React' &&
-        ((_d = (_c = node === null || node === void 0 ? void 0 : node.callee) === null || _c === void 0 ? void 0 : _c.property) === null || _d === void 0 ? void 0 : _d.name) === 'createElement';
-}
-function isElementWithNewJsxTransform(node) {
-    var _a;
-    return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
-        ['_jsxDEV', '_jsx', '_jsxs'].includes((_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.name);
-}
-function isFragmentWithOldJsxTransform(node) {
-    var _a, _b, _c, _d, _e, _f;
-    return ((_c = (_b = (_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.object) === null || _c === void 0 ? void 0 : _c.name) === "React" &&
-        ((_f = (_e = (_d = node === null || node === void 0 ? void 0 : node.arguments) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.property) === null || _f === void 0 ? void 0 : _f.name) === "Fragment";
-}
-function isFragmentWithNewJsxTransform(node) {
-    var _a, _b, _c, _d;
-    return ((_b = (_a = node.arguments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type) === "Identifier" &&
-        ((_d = (_c = node.arguments) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) === "_Fragment";
-}
-function isFragment(node) {
-    return isFragmentWithOldJsxTransform(node) ||
-        isFragmentWithNewJsxTransform(node);
-}
-function isReactElement(node) {
-    return isElementWithOldJsxTransform(node) ||
-        isElementWithNewJsxTransform(node);
-}
-function createAttributeNode(attr) {
-    return {
-        type: 'Property',
-        method: false,
-        shorthand: false,
-        computed: false,
-        key: {
-            type: 'Identifier',
-            name: "\"" + attr + "\""
-        },
-        value: {
-            type: 'Literal',
-            value: true,
-            raw: "true"
-        },
-        kind: 'init'
-    };
-}
+    return implementation;
+};
 function addHashAttributesToJsxTagsAst(program, attr) {
-    return traverse(program, function (node) {
-        var _a;
-        if (isReactElement(node) && !isFragment(node)) {
-            var arg_1 = (_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[1];
-            return __assign(__assign({}, node), { arguments: node === null || node === void 0 ? void 0 : node.arguments.map(function (v, i) {
-                    if (i === 1) {
-                        if (v.type === 'ObjectExpression') {
-                            return __assign(__assign({}, v), { properties: __spreadArray(__spreadArray([], arg_1.properties), [
-                                    createAttributeNode(attr)
-                                ]) });
-                        }
-                        else {
-                            return {
-                                type: 'ObjectExpression',
-                                properties: [createAttributeNode(attr)]
-                            };
-                        }
-                    }
-                    return v;
-                }) });
+    // Once in the program, we can determine which parser to use
+    if (global.implementation === null) {
+        global.implementation = findImplementation(program);
+        if (global.implementation === jsx_parser_model_1.ParserImplementations.new) {
+            parser = newParser;
+        }
+    }
+    return (0, ast_transformer_1.astTransformer)(program, function (node) {
+        if (parser.isNodeReactElement(node) && !parser.isNodeReactFragment(node)) {
+            return parser.extendNodeWithAttributes(node, attr);
         }
     });
 }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { FilterPattern } from '@rollup/pluginutils';
-import type { Plugin } from 'rollup';
+import { FilterPattern } from "@rollup/pluginutils";
+import type { Plugin } from "rollup";
 export interface ReactScopedCssPluginOptions {
     /**
      * Which files should be included and parsed by the plugin