rollup-plugin-react-scoped-css 0.5.2 → 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

@@ -16,4 +16,5 @@ jobs:
           cache: 'npm'
       - run: npm ci
       - run: npm run build --if-present
-      - run: npm test
+      - run: npm test
+      - run: npm run lint

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

@@ -25,19 +25,44 @@ export default function Sub() {
   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'
@@ -50,7 +75,7 @@ export default defineConfig({
 ```
 
 in rollup:
-```
+```js
 // rollup.config.js
 import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css';
 
@@ -63,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
@@ -107,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.js

@@ -41,10 +41,10 @@ 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';
+    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;
@@ -64,7 +64,7 @@ var astIterator = function (ast) {
                 if (!!_b.done) return [3 /*break*/, 10];
                 key = _b.value;
                 // Skip useless keys
-                if (['end', 'start', 'type'].includes(key)) {
+                if (["end", "start", "type"].includes(key)) {
                     return [3 /*break*/, 9];
                 }
                 if (!Array.isArray(ast[key])) return [3 /*break*/, 7];

package/dist/ast-transformer.d.ts

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

package/dist/ast-transformer.js

@@ -14,17 +14,17 @@ 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';
+    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)) {
+            if (["end", "start", "type"].includes(key)) {
                 continue;
             }
             if (Array.isArray(ast[key])) {
@@ -45,6 +45,6 @@ var astTransformer = function (ast, callback) {
         finally { if (e_1) throw e_1.error; }
     }
     var result = callback(ast);
-    return typeof result !== 'undefined' ? result : ast;
+    return typeof result !== "undefined" ? result : ast;
 };
 exports.astTransformer = astTransformer;

package/dist/ast.utils.js

@@ -27,13 +27,13 @@ var findImplementation = function (program) {
     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') {
+            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 ["_jsxDEV", "jsxRuntime"].includes(n.local.name);
+            }) ||
+                ["react/jsx-dev-runtime", "react/jsx-runtime"].includes(node.source.value)) {
                 return jsx_parser_model_1.ParserImplementations.new;
             }
         }

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

package/dist/index.js

@@ -30,6 +30,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-useless-escape */
 var path = __importStar(require("path"));
 var js_xxhash_1 = require("js-xxhash");
 var pluginutils_1 = require("@rollup/pluginutils");
@@ -37,17 +38,17 @@ var component_compiler_utils_1 = require("@vue/component-compiler-utils");
 var escodegen_1 = require("escodegen");
 var ast_utils_1 = require("./ast.utils");
 var getFilenameFromPath = function (filePath) {
-    var parts = filePath.split('/');
-    return parts[parts.length - 1].split('?')[0];
+    var parts = filePath.split("/");
+    return parts[parts.length - 1].split("?")[0];
 };
 var getHashFromPath = function (filePath) {
-    var search = '?scope=';
+    var search = "?scope=";
     var hash = filePath.slice(filePath.indexOf(search) + search.length);
     return hash;
 };
 var generateHash = function (input, seed) {
     if (seed === void 0) { seed = 0; }
-    var hashNum = (0, js_xxhash_1.xxHash32)(Buffer.from(input, 'utf8'), seed);
+    var hashNum = (0, js_xxhash_1.xxHash32)(Buffer.from(input, "utf8"), seed);
     return hashNum.toString(16);
 };
 var addAttributesToCss = function (src, fileName, hash) {
@@ -62,24 +63,24 @@ var addAttributesToCss = function (src, fileName, hash) {
 };
 function reactScopedCssPlugin(optionsIn) {
     if (optionsIn === void 0) { optionsIn = {}; }
-    var options = __assign({ hashPrefix: 'v', styleFileSuffix: 'scoped', styleFileExtensions: ['scss', 'css', 'sass', 'less'], jsxFileExtensions: ['jsx', 'tsx'] }, optionsIn);
+    var options = __assign({ hashPrefix: "v", styleFileSuffix: "scoped", styleFileExtensions: ["scss", "css", "sass", "less"], jsxFileExtensions: ["jsx", "tsx"] }, optionsIn);
     if (!options.styleFileExtensions || !options.styleFileExtensions.length) {
-        throw new Error('You need to provide at least one style file extension');
+        throw new Error("You need to provide at least one style file extension");
     }
     if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
-        throw new Error('You need to provide at least one jsx file extension');
+        throw new Error("You need to provide at least one jsx file extension");
     }
     var filter = (0, pluginutils_1.createFilter)(options.include, options.exclude);
     var scopedCssRegex = options.styleFileSuffix
-        ? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join('|'), ")$"))
-        : new RegExp(".(".concat(options.styleFileExtensions.join('|'), ")$"));
+        ? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join("|"), ")$"))
+        : new RegExp(".(".concat(options.styleFileExtensions.join("|"), ")$"));
     var scopedCssInFileRegex = options.styleFileSuffix
-        ? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join('|'), ")(\"|')"))
-        : new RegExp(".(".concat(options.styleFileExtensions.join('|'), ")(\"|')"));
-    var jsxRegex = new RegExp(".(".concat(options.jsxFileExtensions.join('|'), ")$"));
+        ? new RegExp(".".concat(options.styleFileSuffix, ".(").concat(options.styleFileExtensions.join("|"), ")(\"|')"))
+        : new RegExp(".(".concat(options.styleFileExtensions.join("|"), ")(\"|')"));
+    var jsxRegex = new RegExp(".(".concat(options.jsxFileExtensions.join("|"), ")$"));
     return [
         {
-            name: 'rollup-plugin-react-scoped-css:pre',
+            name: "rollup-plugin-react-scoped-css:pre",
             resolveId: function (source, importer) {
                 if (!importer) {
                     return;
@@ -90,10 +91,10 @@ function reactScopedCssPlugin(optionsIn) {
                     return url;
                 }
             },
-            enforce: 'pre'
+            enforce: "pre",
         },
         {
-            name: 'rollup-plugin-react-scoped-css:post',
+            name: "rollup-plugin-react-scoped-css:post",
             transform: function (code, id) {
                 if (!filter(id)) {
                     return;
@@ -108,8 +109,8 @@ function reactScopedCssPlugin(optionsIn) {
                     var importerHash = getHashFromPath(id);
                     return addAttributesToCss(code, getFilenameFromPath(id), "data-".concat(options.hashPrefix, "-").concat(importerHash));
                 }
-            }
-        }
+            },
+        },
     ];
 }
 exports.default = reactScopedCssPlugin;

package/dist/parsers/classic-parser.js

@@ -42,14 +42,14 @@ var ClassicJsxParser = /** @class */ (function () {
     }
     ClassicJsxParser.prototype.isNodeReactFragment = function (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";
+        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");
     };
     ClassicJsxParser.prototype.isNodeReactElement = function (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';
+        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");
     };
     ClassicJsxParser.prototype.extendNodeWithAttributes = function (node, attr) {
         var _this = this;
@@ -57,15 +57,21 @@ var ClassicJsxParser = /** @class */ (function () {
         var arg = (_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([], __read(arg.properties), false), [
-                                _this.createAttributeNode(attr)
-                            ], false) });
+                    if (v.type === "ObjectExpression") {
+                        return __assign(__assign({}, v), { properties: __spreadArray(__spreadArray([], __read(arg.properties), false), [_this.createAttributeNode(attr)], false) });
+                    }
+                    else if (v.type === "CallExpression" &&
+                        v.callee.name === "_objectSpread") {
+                        var args = __spreadArray([], __read(v.arguments), false);
+                        args[0].properties = __spreadArray(__spreadArray([], __read(args[0].properties), false), [
+                            _this.createAttributeNode(attr),
+                        ], false);
+                        return __assign(__assign({}, v), { arguments: args });
                     }
                     else {
                         return {
-                            type: 'ObjectExpression',
-                            properties: [_this.createAttributeNode(attr)]
+                            type: "ObjectExpression",
+                            properties: [_this.createAttributeNode(attr)],
                         };
                     }
                 }
@@ -74,20 +80,20 @@ var ClassicJsxParser = /** @class */ (function () {
     };
     ClassicJsxParser.prototype.createAttributeNode = function (attr) {
         return {
-            type: 'Property',
+            type: "Property",
             method: false,
             shorthand: false,
             computed: false,
             key: {
-                type: 'Identifier',
-                name: "\"".concat(attr, "\"")
+                type: "Identifier",
+                name: "\"".concat(attr, "\""),
             },
             value: {
-                type: 'Literal',
+                type: "Literal",
                 value: true,
-                raw: "true"
+                raw: "true",
             },
-            kind: 'init'
+            kind: "init",
         };
     };
     return ClassicJsxParser;

package/dist/parsers/new-parser.js

@@ -42,13 +42,13 @@ var NewJsxParser = /** @class */ (function () {
     }
     NewJsxParser.prototype.isNodeReactFragment = function (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" &&
-            ['_Fragment', 'Fragment'].includes((_d = (_c = node.arguments) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name);
+        return (((_b = (_a = node.arguments) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type) === "Identifier" &&
+            ["_Fragment", "Fragment"].includes((_d = (_c = node.arguments) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name));
     };
     NewJsxParser.prototype.isNodeReactElement = function (node) {
         var _a;
-        return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
-            ['_jsxDEV', '_jsx', '_jsxs', 'jsxDev', 'jsx', 'jsxs'].includes((_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.name);
+        return ((node === null || node === void 0 ? void 0 : node.type) === "CallExpression" &&
+            ["_jsxDEV", "_jsx", "_jsxs", "jsxDev", "jsx", "jsxs"].includes((_a = node === null || node === void 0 ? void 0 : node.callee) === null || _a === void 0 ? void 0 : _a.name));
     };
     NewJsxParser.prototype.extendNodeWithAttributes = function (node, attr) {
         var _this = this;
@@ -56,15 +56,21 @@ var NewJsxParser = /** @class */ (function () {
         var arg = (_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([], __read(arg.properties), false), [
-                                _this.createAttributeNode(attr)
-                            ], false) });
+                    if (v.type === "ObjectExpression") {
+                        return __assign(__assign({}, v), { properties: __spreadArray(__spreadArray([], __read(arg.properties), false), [_this.createAttributeNode(attr)], false) });
+                    }
+                    else if (v.type === "CallExpression" &&
+                        v.callee.name === "_objectSpread") {
+                        var args = __spreadArray([], __read(v.arguments), false);
+                        args[0].properties = __spreadArray(__spreadArray([], __read(args[0].properties), false), [
+                            _this.createAttributeNode(attr),
+                        ], false);
+                        return __assign(__assign({}, v), { arguments: args });
                     }
                     else {
                         return {
-                            type: 'ObjectExpression',
-                            properties: [_this.createAttributeNode(attr)]
+                            type: "ObjectExpression",
+                            properties: [_this.createAttributeNode(attr)],
                         };
                     }
                 }
@@ -73,20 +79,20 @@ var NewJsxParser = /** @class */ (function () {
     };
     NewJsxParser.prototype.createAttributeNode = function (attr) {
         return {
-            type: 'Property',
+            type: "Property",
             method: false,
             shorthand: false,
             computed: false,
             key: {
-                type: 'Identifier',
-                name: "\"".concat(attr, "\"")
+                type: "Identifier",
+                name: "\"".concat(attr, "\""),
             },
             value: {
-                type: 'Literal',
+                type: "Literal",
                 value: true,
-                raw: "true"
+                raw: "true",
             },
-            kind: 'init'
+            kind: "init",
         };
     };
     return NewJsxParser;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "A rollup plugin designed to allow scoped css to be run in react (Compatible with vite and rollup)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
+    "lint": "eslint '*/**/*.{js,jsx,ts,tsx}'",
     "test": "jest"
   },
   "repository": {
@@ -49,7 +50,15 @@
     "@types/escodegen": "0.0.7",
     "@types/estree": "0.0.50",
     "@types/jest": "^27.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "acorn": "^8.6.0",
+    "eslint": "^8.3.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
     "jest": "^27.0.6",
     "semantic-release": "^18.0.1"
   }

package/src/ast-iterator.spec.ts

@@ -3,11 +3,14 @@ import { resolve } from "path";
 import { parse } from "acorn";
 import { astIterator } from "./ast-iterator";
 
-describe('astIterator', () => {
-  it('should iterate through all nodes', async () => {
+describe("astIterator", () => {
+  it("should iterate through all nodes", async () => {
     let iterationCount = 0;
-    const file = await readFile(resolve(__dirname, './__mocks__/sample-code-file.js'), { encoding: 'utf-8' })
-    const ast = parse(file, { sourceType: 'module', ecmaVersion: 2022 });
+    const file = await readFile(
+      resolve(__dirname, "./__mocks__/sample-code-file.js"),
+      { encoding: "utf-8" }
+    );
+    const ast = parse(file, { sourceType: "module", ecmaVersion: 2022 });
 
     for (const node of astIterator(ast)) {
       iterationCount++;
@@ -16,4 +19,4 @@ describe('astIterator', () => {
 
     expect(iterationCount).toBe(28);
   });
-})
+});

package/src/ast-iterator.ts

@@ -1,27 +1,32 @@
-
 const isNode = (obj: any) => {
-  return typeof obj === 'object' && 
-      typeof (obj as any)?.end === 'number' && 
-      typeof (obj as any)?.start === 'number' && 
-      typeof (obj as any)?.type === 'string'
-}
+  return (
+    typeof obj === "object" &&
+    typeof (obj as any)?.end === "number" &&
+    typeof (obj as any)?.start === "number" &&
+    typeof (obj as any)?.type === "string"
+  );
+};
 
 export const astIterator = function* (ast: any): IterableIterator<any> {
-  if (!ast) { return }
+  if (!ast) {
+    return;
+  }
 
-  for (let key of Object.keys(ast)) {
+  for (const key of Object.keys(ast)) {
     // Skip useless keys
-    if (['end', 'start', 'type'].includes(key)) { continue; }
+    if (["end", "start", "type"].includes(key)) {
+      continue;
+    }
 
     // If key value is an array, iterate over it
     if (Array.isArray(ast[key])) {
-      for (let nodeIndex in ast[key]) {
-        yield *astIterator(ast[key][nodeIndex])
+      for (const nodeIndex in ast[key]) {
+        yield* astIterator(ast[key][nodeIndex]);
       }
-    } else if(isNode(ast[key])) {
-      yield *astIterator(ast[key])
+    } else if (isNode(ast[key])) {
+      yield* astIterator(ast[key]);
     }
   }
 
-  yield ast
-}
+  yield ast;
+};

package/src/ast-transformer.spec.ts

@@ -3,18 +3,21 @@ import { resolve } from "path";
 import { parse } from "acorn";
 import { astTransformer } from "./ast-transformer";
 
-describe('astTransformer', () => {
-  it('should iterate through all nodes', async () => {
+describe("astTransformer", () => {
+  it("should iterate through all nodes", async () => {
     let iterationCount = 0;
-    const file = await readFile(resolve(__dirname, './__mocks__/sample-code-file.js'), { encoding: 'utf-8' })
-    const ast = parse(file, { sourceType: 'module', ecmaVersion: 2022 });
+    const file = await readFile(
+      resolve(__dirname, "./__mocks__/sample-code-file.js"),
+      { encoding: "utf-8" }
+    );
+    const ast = parse(file, { sourceType: "module", ecmaVersion: 2022 });
 
     const newAst = astTransformer(ast, (node) => {
       iterationCount++;
       expect(node).toBeTruthy();
-    })
+    });
 
     expect(newAst).toBeDefined();
     expect(iterationCount).toBe(28);
   });
-})
+});

package/src/ast-transformer.ts

@@ -1,24 +1,28 @@
 const isNode = (obj: any) => {
-  return typeof obj === 'object' && 
-      typeof (obj as any)?.end === 'number' && 
-      typeof (obj as any)?.start === 'number' && 
-      typeof (obj as any)?.type === 'string'
-}
+  return (
+    typeof obj === "object" &&
+    typeof (obj as any)?.end === "number" &&
+    typeof (obj as any)?.start === "number" &&
+    typeof (obj as any)?.type === "string"
+  );
+};
 
-export const astTransformer = (ast: any, callback: Function) => {
-  for (let key of Object.keys(ast)) {
-    if (['end', 'start', 'type'].includes(key)) { continue; }
+export const astTransformer = (ast: any, callback: (ast: any) => any) => {
+  for (const key of Object.keys(ast)) {
+    if (["end", "start", "type"].includes(key)) {
+      continue;
+    }
 
     if (Array.isArray(ast[key])) {
-      for (let nodeIndex in ast[key]) {
-        ast[key][nodeIndex] = astTransformer(ast[key][nodeIndex], callback)
+      for (const nodeIndex in ast[key]) {
+        ast[key][nodeIndex] = astTransformer(ast[key][nodeIndex], callback);
       }
-    } else if(isNode(ast[key])) {
-      ast[key] = astTransformer(ast[key], callback)
+    } else if (isNode(ast[key])) {
+      ast[key] = astTransformer(ast[key], callback);
     }
   }
 
   const result = callback(ast);
 
-  return typeof result !== 'undefined' ? result : ast
-}
+  return typeof result !== "undefined" ? result : ast;
+};

package/src/ast.utils.spec.ts

@@ -1,46 +1,61 @@
-import { resolve } from 'path'
-import { readFile } from 'fs/promises'
-import { parse } from 'acorn'
-import { generate } from 'escodegen'
-import { addHashAttributesToJsxTagsAst } from './ast.utils'
+import { resolve } from "path";
+import { readFile } from "fs/promises";
+import { parse } from "acorn";
+import { generate } from "escodegen";
+import { addHashAttributesToJsxTagsAst } from "./ast.utils";
 
-describe('AST Utils', () => {
+describe("AST Utils", () => {
   beforeEach(() => {
-    global.implementation = null
-  })
+    global.implementation = null;
+  });
 
-  describe('classic implementation', () => {
-    it('Should add the attr to the right elements', async () => {
-      const compiled = await readFile(resolve(__dirname, './__mocks__/classic-compiled-jsx.js'), { encoding: 'utf-8' })
-      const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/classic-compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
-      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
-      const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
-      const modifiedCompiled = generate(modifiedAst, { format: {
-        indent: {
-          style: '  ',
+  describe("classic implementation", () => {
+    it("Should add the attr to the right elements", async () => {
+      const compiled = await readFile(
+        resolve(__dirname, "./__mocks__/classic-compiled-jsx.js"),
+        { encoding: "utf-8" }
+      );
+      const compiledWithAttr = await readFile(
+        resolve(__dirname, "./__mocks__/classic-compiled-jsx-with-attr.js"),
+        { encoding: "utf-8" }
+      );
+      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" });
+      const modifiedAst = addHashAttributesToJsxTagsAst(ast, "data-v-123456");
+      const modifiedCompiled = generate(modifiedAst, {
+        format: {
+          indent: {
+            style: "  ",
+          },
+          quotes: "double",
         },
-        quotes: 'double',
-      } })
-  
-      expect(modifiedCompiled).toEqual(compiledWithAttr)
-    })
-  })
-  
-  describe('new implementation', () => {
-    it('Should add the attr to the right elements', async () => {
-      const compiled = await readFile(resolve(__dirname, './__mocks__/new-compiled-jsx.js'), { encoding: 'utf-8' })
-      const compiledWithAttr = await readFile(resolve(__dirname, './__mocks__/new-compiled-jsx-with-attr.js'), { encoding: 'utf-8' })
-      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" })
-      const modifiedAst = addHashAttributesToJsxTagsAst(ast, 'data-v-123456')
-      const modifiedCompiled = generate(modifiedAst, { format: {
-        indent: {
-          style: '  ',
+      });
+
+      expect(modifiedCompiled).toEqual(compiledWithAttr);
+    });
+  });
+
+  describe("new implementation", () => {
+    it("Should add the attr to the right elements", async () => {
+      const compiled = await readFile(
+        resolve(__dirname, "./__mocks__/new-compiled-jsx.js"),
+        { encoding: "utf-8" }
+      );
+      const compiledWithAttr = await readFile(
+        resolve(__dirname, "./__mocks__/new-compiled-jsx-with-attr.js"),
+        { encoding: "utf-8" }
+      );
+      const ast = parse(compiled, { ecmaVersion: 2021, sourceType: "module" });
+      const modifiedAst = addHashAttributesToJsxTagsAst(ast, "data-v-123456");
+      const modifiedCompiled = generate(modifiedAst, {
+        format: {
+          indent: {
+            style: "  ",
+          },
+          quotes: "double",
         },
-        quotes: 'double',
-      } })
-  
-      expect(modifiedCompiled).toEqual(compiledWithAttr)
-    })
-  })
-  
-})
+      });
+
+      expect(modifiedCompiled).toEqual(compiledWithAttr);
+    });
+  });
+});

package/src/ast.utils.ts

@@ -1,52 +1,53 @@
-import { astIterator } from "./ast-iterator"
-import { astTransformer } from "./ast-transformer"
-import { ClassicJsxParser } from "./parsers/classic-parser"
-import { JsxParser, ParserImplementations } from "./parsers/jsx-parser.model"
-import { NewJsxParser } from "./parsers/new-parser"
+import { astIterator } from "./ast-iterator";
+import { astTransformer } from "./ast-transformer";
+import { ClassicJsxParser } from "./parsers/classic-parser";
+import { JsxParser, ParserImplementations } from "./parsers/jsx-parser.model";
+import { NewJsxParser } from "./parsers/new-parser";
 
 declare global {
-  var implementation: null | ParserImplementations
+  // eslint-disable-next-line
+  var implementation: null | ParserImplementations;
 }
 
-global.implementation = null
+global.implementation = null;
 
-const classicParser = new ClassicJsxParser()
-const newParser = new NewJsxParser()
+const classicParser = new ClassicJsxParser();
+const newParser = new NewJsxParser();
 
 let parser: JsxParser = classicParser;
 
 const findImplementation = (program: any) => {
-  let implementation: ParserImplementations = ParserImplementations.classic;
-  for (let node of astIterator(program)) {
-    if (node.type !== 'ImportDeclaration') {
+  const implementation: ParserImplementations = ParserImplementations.classic;
+  for (const node of astIterator(program)) {
+    if (node.type !== "ImportDeclaration") {
       continue;
     }
 
     if (
-      node.specifiers.some((n: any) => 
-        ['_jsxDEV', 'jsxRuntime'].includes(n.local.name))
-      || ['react/jsx-dev-runtime', 'react/jsx-runtime'].includes(node.source.value)
+      node.specifiers.some((n: any) =>
+        ["_jsxDEV", "jsxRuntime"].includes(n.local.name)
+      ) ||
+      ["react/jsx-dev-runtime", "react/jsx-runtime"].includes(node.source.value)
     ) {
-      return ParserImplementations.new
+      return ParserImplementations.new;
     }
   }
-  return implementation
-}
+  return implementation;
+};
 
 export function addHashAttributesToJsxTagsAst(program: any, attr: string) {
-
   // Once in the program, we can determine which parser to use
   if (global.implementation === null) {
-    global.implementation = findImplementation(program)
+    global.implementation = findImplementation(program);
 
     if (global.implementation === ParserImplementations.new) {
-      parser = newParser
+      parser = newParser;
     }
   }
 
   return astTransformer(program, (node: any) => {
     if (parser.isNodeReactElement(node) && !parser.isNodeReactFragment(node)) {
-      return parser.extendNodeWithAttributes(node, attr)
+      return parser.extendNodeWithAttributes(node, attr);
     }
-  })
-}
+  });
+}

package/src/index.ts

@@ -1,27 +1,28 @@
-import * as path from 'path';
-import { xxHash32 } from 'js-xxhash';
-import { createFilter, FilterPattern } from '@rollup/pluginutils';
-import { compileStyle } from '@vue/component-compiler-utils'
-import { generate } from 'escodegen'
+/* eslint-disable no-useless-escape */
+import * as path from "path";
+import { xxHash32 } from "js-xxhash";
+import { createFilter, FilterPattern } from "@rollup/pluginutils";
+import { compileStyle } from "@vue/component-compiler-utils";
+import { generate } from "escodegen";
 
-import type { Plugin } from 'rollup'
-import { addHashAttributesToJsxTagsAst } from './ast.utils';
+import type { Plugin } from "rollup";
+import { addHashAttributesToJsxTagsAst } from "./ast.utils";
 
 const getFilenameFromPath = (filePath: string) => {
-  const parts = filePath.split('/')
-  return parts[parts.length - 1].split('?')[0]
-}
+  const parts = filePath.split("/");
+  return parts[parts.length - 1].split("?")[0];
+};
 
 const getHashFromPath = (filePath: string) => {
-  const search = '?scope='
-  const hash = filePath.slice(filePath.indexOf(search) + search.length)
-  return hash
-}
+  const search = "?scope=";
+  const hash = filePath.slice(filePath.indexOf(search) + search.length);
+  return hash;
+};
 
-const generateHash = (input: string, seed: number = 0) => {
-  let hashNum = xxHash32(Buffer.from(input, 'utf8'), seed);
+const generateHash = (input: string, seed = 0) => {
+  const hashNum = xxHash32(Buffer.from(input, "utf8"), seed);
   return hashNum.toString(16);
-}
+};
 
 const addAttributesToCss = (src: string, fileName: string, hash: string) => {
   const { code } = compileStyle({
@@ -30,83 +31,93 @@ const addAttributesToCss = (src: string, fileName: string, hash: string) => {
     id: hash,
     scoped: true,
     trim: true,
-  })
+  });
 
-  return code
-}
+  return code;
+};
 
 export interface ReactScopedCssPluginOptions {
   /**
    * Which files should be included and parsed by the plugin
    * Default: undefined
    */
-  include?: FilterPattern
+  include?: FilterPattern;
 
   /**
    * Which files should be exluded and that should not be parsed by the plugin
    * Default: undefined
    */
-  exclude?: FilterPattern
+  exclude?: FilterPattern;
 
   /**
    * If you want to customize the stylesheet file pattern
    * if undefined or '' is passed, all files will be evaluated
    * Default: 'scoped'
    */
-  styleFileSuffix?: string
+  styleFileSuffix?: string;
 
   /**
    * If you want to customize the attribute prefix that is added to the jsx elements
    * Default: 'v'
    */
-  hashPrefix?: string
+  hashPrefix?: string;
 
   /**
    * If you want to customize the stylesheet extensions
    * Default: ['scss', 'css', 'sass', 'less']
    */
-   styleFileExtensions?: string[]
+  styleFileExtensions?: string[];
 
   /**
    * If you have jsx in other file extensions
    * Default: ['jsx', 'tsx']
    */
-  jsxFileExtensions?: string[]
+  jsxFileExtensions?: string[];
 }
 
 export interface VitePartialPlugin extends Plugin {
-  enforce?: "pre" | "post"
+  enforce?: "pre" | "post";
 }
 
-export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOptions = {}): VitePartialPlugin[] {
+export default function reactScopedCssPlugin(
+  optionsIn: ReactScopedCssPluginOptions = {}
+): VitePartialPlugin[] {
   const options: Partial<ReactScopedCssPluginOptions> = {
-    hashPrefix: 'v',
-    styleFileSuffix: 'scoped',
-    styleFileExtensions: ['scss', 'css', 'sass', 'less'],
-    jsxFileExtensions: ['jsx', 'tsx'],
-    ...optionsIn
-  }
+    hashPrefix: "v",
+    styleFileSuffix: "scoped",
+    styleFileExtensions: ["scss", "css", "sass", "less"],
+    jsxFileExtensions: ["jsx", "tsx"],
+    ...optionsIn,
+  };
 
   if (!options.styleFileExtensions || !options.styleFileExtensions.length) {
-    throw new Error('You need to provide at least one style file extension')
+    throw new Error("You need to provide at least one style file extension");
   }
 
   if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
-    throw new Error('You need to provide at least one jsx file extension')
+    throw new Error("You need to provide at least one jsx file extension");
   }
 
-  const filter = createFilter( options.include, options.exclude );
-  const scopedCssRegex = options.styleFileSuffix 
-    ? new RegExp(`\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join('|')})$`)
-    : new RegExp(`\.(${options.styleFileExtensions.join('|')})$`)
+  const filter = createFilter(options.include, options.exclude);
+  const scopedCssRegex = options.styleFileSuffix
+    ? new RegExp(
+        `\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join(
+          "|"
+        )})$`
+      )
+    : new RegExp(`\.(${options.styleFileExtensions.join("|")})$`);
   const scopedCssInFileRegex = options.styleFileSuffix
-    ? new RegExp(`\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join('|')})(\"|\')`)
-    : new RegExp(`\.(${options.styleFileExtensions.join('|')})(\"|\')`)
-  const jsxRegex = new RegExp(`\.(${options.jsxFileExtensions.join('|')})$`)
+    ? new RegExp(
+        `\.${options.styleFileSuffix}\.(${options.styleFileExtensions.join(
+          "|"
+        )})(\"|\')`
+      )
+    : new RegExp(`\.(${options.styleFileExtensions.join("|")})(\"|\')`);
+  const jsxRegex = new RegExp(`\.(${options.jsxFileExtensions.join("|")})$`);
 
   return [
     {
-      name: 'rollup-plugin-react-scoped-css:pre',
+      name: "rollup-plugin-react-scoped-css:pre",
       resolveId(source, importer) {
         if (!importer) {
           return;
@@ -114,30 +125,40 @@ export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOpti
 
         if (scopedCssRegex.test(source) && jsxRegex.test(importer)) {
           const importerHash = generateHash(importer);
-          const url = path.resolve(path.dirname(importer), `${source}?scope=${importerHash}`)
-          return url
+          const url = path.resolve(
+            path.dirname(importer),
+            `${source}?scope=${importerHash}`
+          );
+          return url;
         }
       },
-      enforce: 'pre'
+      enforce: "pre",
     },
     {
-      name: 'rollup-plugin-react-scoped-css:post',
+      name: "rollup-plugin-react-scoped-css:post",
       transform(code, id) {
         if (!filter(id)) {
           return;
         }
         if (scopedCssInFileRegex.test(code)) {
           const importerHash = generateHash(id);
-          const program = this.parse(code)
-          const newAst = addHashAttributesToJsxTagsAst(program, `data-${options.hashPrefix}-${importerHash}`)
-          return generate(newAst)
+          const program = this.parse(code);
+          const newAst = addHashAttributesToJsxTagsAst(
+            program,
+            `data-${options.hashPrefix}-${importerHash}`
+          );
+          return generate(newAst);
         }
 
         if (scopedCssRegex.test(getFilenameFromPath(id))) {
           const importerHash = getHashFromPath(id);
-          return addAttributesToCss(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`)
+          return addAttributesToCss(
+            code,
+            getFilenameFromPath(id),
+            `data-${options.hashPrefix}-${importerHash}`
+          );
         }
-      }
-    }
-  ]
-}
+      },
+    },
+  ];
+}

package/src/parsers/classic-parser.ts

@@ -2,57 +2,71 @@ import { JsxParser } from "./jsx-parser.model";
 
 export class ClassicJsxParser implements JsxParser {
   isNodeReactFragment(node: any) {
-    return node?.arguments?.[0]?.object?.name === "React" && 
+    return (
+      node?.arguments?.[0]?.object?.name === "React" &&
       node?.arguments?.[0]?.property?.name === "Fragment"
+    );
   }
   isNodeReactElement(node: any) {
-    return node?.type === 'CallExpression' && 
-      node?.callee?.object?.name === 'React' &&
-      node?.callee?.property?.name === 'createElement'
+    return (
+      node?.type === "CallExpression" &&
+      node?.callee?.object?.name === "React" &&
+      node?.callee?.property?.name === "createElement"
+    );
   }
 
   public extendNodeWithAttributes(node: any, attr: string) {
-    const arg = node?.arguments?.[1]
+    const arg = node?.arguments?.[1];
     return {
       ...node,
       arguments: node?.arguments.map((v: any, i: number) => {
         if (i === 1) {
-            if (v.type === 'ObjectExpression') {
-              return {
-                ...v,
-                properties: [
-                  ...arg.properties,
-                  this.createAttributeNode(attr)
-                ]
-              }
-            } else {
-              return {
-                type: 'ObjectExpression',
-                properties: [this.createAttributeNode(attr)]
-              }
-            }
+          if (v.type === "ObjectExpression") {
+            return {
+              ...v,
+              properties: [...arg.properties, this.createAttributeNode(attr)],
+            };
+          } else if (
+            v.type === "CallExpression" &&
+            v.callee.name === "_objectSpread"
+          ) {
+            const args = [...v.arguments];
+            args[0].properties = [
+              ...args[0].properties,
+              this.createAttributeNode(attr),
+            ];
+            return {
+              ...v,
+              arguments: args,
+            };
+          } else {
+            return {
+              type: "ObjectExpression",
+              properties: [this.createAttributeNode(attr)],
+            };
           }
-          return v
-        })
-      }
+        }
+        return v;
+      }),
+    };
   }
 
   private createAttributeNode(attr: string) {
     return {
-      type: 'Property',
+      type: "Property",
       method: false,
       shorthand: false,
       computed: false,
       key: {
-        type: 'Identifier',
-        name: `"${attr}"`
+        type: "Identifier",
+        name: `"${attr}"`,
       },
       value: {
-        type: 'Literal',
+        type: "Literal",
         value: true,
-        raw: "true"
+        raw: "true",
       },
-      kind: 'init'
-    }
+      kind: "init",
+    };
   }
-}
+}

package/src/parsers/jsx-parser.model.ts

@@ -1,10 +1,10 @@
 export interface JsxParser {
-  isNodeReactElement: (node: any) => boolean
-  isNodeReactFragment: (node: any) => boolean
-  extendNodeWithAttributes: (node: any, attr: string) => any
+  isNodeReactElement: (node: any) => boolean;
+  isNodeReactFragment: (node: any) => boolean;
+  extendNodeWithAttributes: (node: any, attr: string) => any;
 }
 
 export enum ParserImplementations {
-  new = 'new',
-  classic = 'classic'
-}
+  new = "new",
+  classic = "classic",
+}

package/src/parsers/new-parser.ts

@@ -2,57 +2,73 @@ import { JsxParser } from "./jsx-parser.model";
 
 export class NewJsxParser implements JsxParser {
   isNodeReactFragment(node: any) {
-    return node.arguments?.[0]?.type === "Identifier" &&
-    ['_Fragment', 'Fragment'].includes(node.arguments?.[0]?.name)
+    return (
+      node.arguments?.[0]?.type === "Identifier" &&
+      ["_Fragment", "Fragment"].includes(node.arguments?.[0]?.name)
+    );
   }
-  
+
   isNodeReactElement(node: any) {
-    return node?.type === 'CallExpression' &&
-      ['_jsxDEV', '_jsx', '_jsxs', 'jsxDev', 'jsx', 'jsxs'].includes(node?.callee?.name)
+    return (
+      node?.type === "CallExpression" &&
+      ["_jsxDEV", "_jsx", "_jsxs", "jsxDev", "jsx", "jsxs"].includes(
+        node?.callee?.name
+      )
+    );
   }
 
   public extendNodeWithAttributes(node: any, attr: string) {
-    const arg = node?.arguments?.[1]
+    const arg = node?.arguments?.[1];
     return {
       ...node,
       arguments: node?.arguments.map((v: any, i: number) => {
         if (i === 1) {
-            if (v.type === 'ObjectExpression') {
-              return {
-                ...v,
-                properties: [
-                  ...arg.properties,
-                  this.createAttributeNode(attr)
-                ]
-              }
-            } else {
-              return {
-                type: 'ObjectExpression',
-                properties: [this.createAttributeNode(attr)]
-              }
-            }
+          if (v.type === "ObjectExpression") {
+            return {
+              ...v,
+              properties: [...arg.properties, this.createAttributeNode(attr)],
+            };
+          } else if (
+            v.type === "CallExpression" &&
+            v.callee.name === "_objectSpread"
+          ) {
+            const args = [...v.arguments];
+            args[0].properties = [
+              ...args[0].properties,
+              this.createAttributeNode(attr),
+            ];
+            return {
+              ...v,
+              arguments: args,
+            };
+          } else {
+            return {
+              type: "ObjectExpression",
+              properties: [this.createAttributeNode(attr)],
+            };
           }
-          return v
-        })
-      }
+        }
+        return v;
+      }),
+    };
   }
 
   private createAttributeNode(attr: string) {
     return {
-      type: 'Property',
+      type: "Property",
       method: false,
       shorthand: false,
       computed: false,
       key: {
-        type: 'Identifier',
-        name: `"${attr}"`
+        type: "Identifier",
+        name: `"${attr}"`,
       },
       value: {
-        type: 'Literal',
+        type: "Literal",
         value: true,
-        raw: "true"
+        raw: "true",
       },
-      kind: 'init'
-    }
+      kind: "init",
+    };
   }
-}
+}