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

package/README.md

@@ -56,6 +56,7 @@ There are a few options available to customize how the plugin works
 
   /**
    * If you want to customize the stylesheet file pattern
+   * if undefined or '' is passed, all files will be evaluated
    * Default: 'scoped'
    */
   styleFileSuffix?: string
@@ -65,11 +66,23 @@ There are a few options available to customize how the plugin works
    * Default: 'v'
    */
   hashPrefix?: string
+
+  /**
+   * If you want to customize the preprocessors
+   * Default: ['scss', 'css', 'sass', 'less']
+   */
+  styleFileExtensions?: string[]
+
+  /**
+   * If you have jsx in other file extensions
+   * Default: ['jsx', 'tsx']
+   */
+  jsxFileExtensions?: string[]
 }
 ```
 
 ### With other rollup plugins
-Since this plugin works in two parts, you might need to expose the first part, then add any styling plugin, and then expose the second part of the plugin. This part is automatically handled with vite thanks to the enforce attribute.
+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.
 
 ```
 const reactScopedPlugins = reactScopedCssPlugin()
@@ -80,6 +93,4 @@ export default {
 ```
 
 ## Contributing
-Anyone is free to open a PR and contribute to this project... I, by no means, am the best, and I am sure someone smarter than me can bring a lot to this project. 
-
-The only rules is: Don't be a dick
+Anyone is free to open a PR and contribute to this project... just be civilized!

package/dist/ast.utils.js

@@ -17,23 +17,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addHashAttributesToJsxTagsAst = void 0;
-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 isReactCreateElementCallExpression(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 isLiteralCallExpression(node) {
-    var _a;
-    return ((_a = node === null || node === void 0 ? void 0 : node.arguments) === null || _a === void 0 ? void 0 : _a[0].type) === 'Literal';
-}
+/**
+ * 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];
@@ -52,6 +42,42 @@ function traverse(ast, callback) {
     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',
@@ -73,7 +99,7 @@ function createAttributeNode(attr) {
 function addHashAttributesToJsxTagsAst(program, attr) {
     return traverse(program, function (node) {
         var _a;
-        if (isReactCreateElementCallExpression(node) && isLiteralCallExpression(node)) {
+        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) {

package/dist/index.d.ts

@@ -1,10 +1,37 @@
 import { FilterPattern } from '@rollup/pluginutils';
 import type { Plugin } from 'rollup';
 export interface ReactScopedCssPluginOptions {
+    /**
+     * Which files should be included and parsed by the plugin
+     * Default: undefined
+     */
     include?: FilterPattern;
+    /**
+     * Which files should be exluded and that should not be parsed by the plugin
+     * Default: undefined
+     */
     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;
+    /**
+     * If you want to customize the attribute prefix that is added to the jsx elements
+     * Default: 'v'
+     */
     hashPrefix?: string;
+    /**
+     * If you want to customize the stylesheet extensions
+     * Default: ['scss', 'css', 'sass', 'less']
+     */
+    styleFileExtensions?: string[];
+    /**
+     * If you have jsx in other file extensions
+     * Default: ['jsx', 'tsx']
+     */
+    jsxFileExtensions?: string[];
 }
 export interface VitePartialPlugin extends Plugin {
     enforce?: "pre" | "post";

package/dist/index.js

@@ -50,32 +50,33 @@ var generateHash = function (input, seed) {
     var hashNum = js_xxhash_1.xxHash32(Buffer.from(input, 'utf8'), seed);
     return hashNum.toString(16);
 };
-var addAttributesToCss = function (src, fileName, hash, prefix) {
+var addAttributesToCss = function (src, fileName, hash) {
     var code = component_compiler_utils_1.compileStyle({
         source: src,
         filename: fileName,
-        id: "data-" + prefix + "-" + hash,
+        id: hash,
         scoped: true,
         trim: true,
     }).code;
     return code;
 };
-var addAttributesToJsx = function (src, hash, prefix) {
-    return src.replace(/<[^/][^>]*>/g, function (tag) { return tag.replace(/([^=<])(\/?>)/, function (m) {
-        var sm = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            sm[_i - 1] = arguments[_i];
-        }
-        return sm[0] + " data-" + prefix + "-" + hash + sm[1];
-    }); });
-};
 function reactScopedCssPlugin(optionsIn) {
     if (optionsIn === void 0) { optionsIn = {}; }
-    var options = __assign({ styleFileSuffix: 'scoped', hashPrefix: 'v' }, 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');
+    }
+    if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
+        throw new Error('You need to provide at least one jsx file extension');
+    }
     var filter = pluginutils_1.createFilter(options.include, options.exclude);
-    var scopedCssRegex = new RegExp("." + options.styleFileSuffix + ".(scss|css|sass)$");
-    var scopedCssInFileRegex = new RegExp("." + options.styleFileSuffix + ".(scss|css|sass)(\"|')");
-    var jsxRegex = /\.(tsx|jsx)$/;
+    var scopedCssRegex = options.styleFileSuffix
+        ? new RegExp("." + options.styleFileSuffix + ".(" + options.styleFileExtensions.join('|') + ")$")
+        : new RegExp(".(" + options.styleFileExtensions.join('|') + ")$");
+    var scopedCssInFileRegex = options.styleFileSuffix
+        ? new RegExp("." + options.styleFileSuffix + ".(" + options.styleFileExtensions.join('|') + ")(\"|')")
+        : new RegExp(".(" + options.styleFileExtensions.join('|') + ")(\"|')");
+    var jsxRegex = new RegExp(".(" + options.jsxFileExtensions.join('|') + ")$");
     return [
         {
             name: 'rollup-plugin-react-scoped-css:pre',
@@ -105,7 +106,7 @@ function reactScopedCssPlugin(optionsIn) {
                 }
                 if (scopedCssRegex.test(getFilenameFromPath(id))) {
                     var importerHash = getHashFromPath(id);
-                    return addAttributesToCss(code, getFilenameFromPath(id), importerHash, options.hashPrefix);
+                    return addAttributesToCss(code, getFilenameFromPath(id), "data-" + options.hashPrefix + "-" + importerHash);
                 }
             }
         }

package/dist/parsers/base-parser.d.ts

@@ -0,0 +1,15 @@
+import { JsxParser, ParserImplementations } from "./jsx-parser.model";
+export declare class BaseParser implements Pick<JsxParser, 'isNode' & 'traverse'> {
+    isNode(obj: any): boolean;
+    /**
+     * 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
+     */
+    traverse(ast: any, callback: Function): any;
+    findImplementation(ast: any): ParserImplementations.classic;
+    extendNodeWithAttributes(node: any, attr: string): any;
+    private createAttributeNode;
+}

package/dist/parsers/base-parser.js

@@ -0,0 +1,109 @@
+"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];
+        }
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseParser = void 0;
+var jsx_parser_model_1 = require("./jsx-parser.model");
+var BaseParser = /** @class */ (function () {
+    function BaseParser() {
+    }
+    BaseParser.prototype.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';
+    };
+    /**
+     * 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
+     */
+    BaseParser.prototype.traverse = function (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] = this.traverse(ast[key][nodeIndex], callback);
+                }
+            }
+            else if (this.isNode(ast[key])) {
+                ast[key] = this.traverse(ast[key], callback);
+            }
+        }
+        var result = callback(ast);
+        return typeof result !== 'undefined' ? result : ast;
+    };
+    BaseParser.prototype.findImplementation = function (ast) {
+        var implementation = jsx_parser_model_1.ParserImplementations.classic;
+        this.traverse(ast, function (node) {
+            if (node.type !== 'ImportDeclaration') {
+                return;
+            }
+            if (node.source.value === 'react/jsx-runtime') {
+                implementation = jsx_parser_model_1.ParserImplementations.new;
+            }
+        });
+        return implementation;
+    };
+    BaseParser.prototype.extendNodeWithAttributes = function (node, attr) {
+        var _this = this;
+        var _a;
+        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([], arg.properties), [
+                                _this.createAttributeNode(attr)
+                            ]) });
+                    }
+                    else {
+                        return {
+                            type: 'ObjectExpression',
+                            properties: [_this.createAttributeNode(attr)]
+                        };
+                    }
+                }
+                return v;
+            }) });
+    };
+    BaseParser.prototype.createAttributeNode = function (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 BaseParser;
+}());
+exports.BaseParser = BaseParser;

package/dist/parsers/classic-parser.d.ts

@@ -0,0 +1,6 @@
+import { BaseParser } from "./base-parser";
+import { JsxParser } from "./jsx-parser.model";
+export declare class ClassicJsxParser extends BaseParser implements JsxParser {
+    isNodeReactFragment(node: any): boolean;
+    isNodeReactElement(node: any): boolean;
+}

package/dist/parsers/classic-parser.js

@@ -0,0 +1,38 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassicJsxParser = void 0;
+var base_parser_1 = require("./base-parser");
+var ClassicJsxParser = /** @class */ (function (_super) {
+    __extends(ClassicJsxParser, _super);
+    function ClassicJsxParser() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    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";
+    };
+    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 ClassicJsxParser;
+}(base_parser_1.BaseParser));
+exports.ClassicJsxParser = ClassicJsxParser;

package/dist/parsers/jsx-parser.interface.d.ts

@@ -0,0 +1,6 @@
+export interface JsxParser {
+    isNode: (node: any) => boolean;
+    isNodeReactElement: (node: any) => boolean;
+    isNodeReactFragment: (node: any) => boolean;
+    traverse: (ast: any, callback: (ast: any) => void) => void;
+}

package/dist/parsers/jsx-parser.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/parsers/jsx-parser.model.d.ts

@@ -0,0 +1,12 @@
+export interface JsxParser {
+    isNodeReactElement: (node: any) => boolean;
+    isNodeReactFragment: (node: any) => boolean;
+    isNode: (node: any) => boolean;
+    traverse: (ast: any, callback: (ast: any) => void) => void;
+    findImplementation: (ast: any) => ParserImplementations;
+    extendNodeWithAttributes: (node: any, attr: string) => any;
+}
+export declare enum ParserImplementations {
+    new = "new",
+    classic = "classic"
+}

package/dist/parsers/jsx-parser.model.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParserImplementations = void 0;
+var ParserImplementations;
+(function (ParserImplementations) {
+    ParserImplementations["new"] = "new";
+    ParserImplementations["classic"] = "classic";
+})(ParserImplementations = exports.ParserImplementations || (exports.ParserImplementations = {}));

package/dist/parsers/new-parser.d.ts

@@ -0,0 +1,6 @@
+import { BaseParser } from "./base-parser";
+import { JsxParser } from "./jsx-parser.model";
+export declare class NewJsxParser extends BaseParser implements JsxParser {
+    isNodeReactFragment(node: any): boolean;
+    isNodeReactElement(node: any): boolean;
+}

package/dist/parsers/new-parser.js

@@ -0,0 +1,37 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewJsxParser = void 0;
+var base_parser_1 = require("./base-parser");
+var NewJsxParser = /** @class */ (function (_super) {
+    __extends(NewJsxParser, _super);
+    function NewJsxParser() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    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" &&
+            ((_d = (_c = node.arguments) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) === "_Fragment";
+    };
+    NewJsxParser.prototype.isNodeReactElement = function (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);
+    };
+    return NewJsxParser;
+}(base_parser_1.BaseParser));
+exports.NewJsxParser = NewJsxParser;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "rollup-plugin-react-scoped-css",
-  "version": "0.2.2",
+  "version": "0.4.1",
   "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",
     "prepare": "npm run build && npm test",
     "test": "jest"
   },
@@ -14,6 +15,18 @@
     "url": "git+https://github.com/cmseguin/rollup-plugin-react-scoped-css.git"
   },
   "author": "cmseguin",
+  "contributors": [
+    "cmseguin (https://github.com/cmseguin)",
+    "helianthuswhite (https://github.com/helianthuswhite)"
+  ],
+  "keywords": [
+    "rollup",
+    "react",
+    "css",
+    "scoped",
+    "vite",
+    "vitejs"
+  ],
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/cmseguin/rollup-plugin-react-scoped-css/issues"

package/src/__mocks__/compiled-jsx-with-attr.js

@@ -32,6 +32,6 @@ function App() {
     target: "_blank",
     rel: "noopener noreferrer",
     "data-v-123456": true
-  }, "Vite Docs"))), React.createElement(Sub, null)));
+  }, "Vite Docs"))), React.createElement(Sub, { "data-v-123456": true })));
 }
 export default App;

package/src/ast.utils.ts

@@ -1,3 +1,28 @@
+/**
+ * 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: any, callback: Function) {
+  for (let 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] = traverse(ast[key][nodeIndex], callback)
+      }
+    } else if(isNode(ast[key])) {
+      ast[key] = traverse(ast[key], callback)
+    }
+  }
+
+  const result = callback(ast);
+
+  return typeof result !== 'undefined' ? result : ast
+}
+
 function isNode(obj: unknown) {
   return typeof obj === 'object' && 
       typeof (obj as any)?.end === 'number' && 
@@ -5,32 +30,35 @@ function isNode(obj: unknown) {
       typeof (obj as any)?.type === 'string'
 }
 
-function isReactCreateElementCallExpression(node: any) {
+function isElementWithOldJsxTransform(node: any) {
   return node?.type === 'CallExpression' && 
     node?.callee?.object?.name === 'React' &&
     node?.callee?.property?.name === 'createElement'
 }
 
-function isLiteralCallExpression(node: any) {
-  return node?.arguments?.[0].type === 'Literal'
+function isElementWithNewJsxTransform(node: any) {
+  return node?.type === 'CallExpression' &&
+    ['_jsxDEV', '_jsx', '_jsxs'].includes(node?.callee?.name)
 }
 
-function traverse(ast: any, callback: Function) {
-  for (let key of Object.keys(ast)) {
-    if (['end', 'start', 'type'].includes(key)) { continue; }
+function isFragmentWithOldJsxTransform(node: any) {
+  return node?.arguments?.[0]?.object?.name === "React" && 
+    node?.arguments?.[0]?.property?.name === "Fragment"
+}
 
-    if (Array.isArray(ast[key])) {
-      for (let nodeIndex in ast[key]) {
-        ast[key][nodeIndex] = traverse(ast[key][nodeIndex], callback)
-      }
-    } else if(isNode(ast[key])) {
-      ast[key] = traverse(ast[key], callback)
-    }
-  }
+function isFragmentWithNewJsxTransform(node: any) {
+  return node.arguments?.[0]?.type === "Identifier" &&
+    node.arguments?.[0]?.name === "_Fragment"
+}
 
-  const result = callback(ast);
+function isFragment(node: any) {
+  return isFragmentWithOldJsxTransform(node) ||
+  isFragmentWithNewJsxTransform(node)
+}
 
-  return typeof result !== 'undefined' ? result : ast
+function isReactElement(node: any) {
+  return isElementWithOldJsxTransform(node) ||
+  isElementWithNewJsxTransform(node)
 }
 
 function createAttributeNode(attr: string) {
@@ -54,7 +82,7 @@ function createAttributeNode(attr: string) {
 
 export function addHashAttributesToJsxTagsAst(program: any, attr: string) {
   return traverse(program, (node: any) => {
-    if (isReactCreateElementCallExpression(node) && isLiteralCallExpression(node)) {
+    if (isReactElement(node) && !isFragment(node)) {
       const arg = node?.arguments?.[1]
       return {
         ...node,

package/src/index.ts

@@ -23,11 +23,11 @@ const generateHash = (input: string, seed: number = 0) => {
   return hashNum.toString(16);
 }
 
-const addAttributesToCss = (src: string, fileName: string, hash: string, prefix: string) => {
+const addAttributesToCss = (src: string, fileName: string, hash: string) => {
   const { code } = compileStyle({
     source: src,
     filename: fileName,
-    id: `data-${prefix}-${hash}`,
+    id: hash,
     scoped: true,
     trim: true,
   })
@@ -35,32 +35,74 @@ const addAttributesToCss = (src: string, fileName: string, hash: string, prefix:
   return code
 }
 
-const addAttributesToJsx = (src: string, hash: string, prefix: string) => {
-  return src.replace(/<[^/][^>]*>/g, (tag) => tag.replace(/([^=<])(\/?>)/, (m, ...sm) => `${sm[0]} data-${prefix}-${hash}${sm[1]}`))
-}
-
 export interface ReactScopedCssPluginOptions {
+  /**
+   * Which files should be included and parsed by the plugin
+   * Default: undefined
+   */
   include?: FilterPattern
+
+  /**
+   * Which files should be exluded and that should not be parsed by the plugin
+   * Default: undefined
+   */
   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
+
+  /**
+   * If you want to customize the attribute prefix that is added to the jsx elements
+   * Default: 'v'
+   */
   hashPrefix?: string
+
+  /**
+   * If you want to customize the stylesheet extensions
+   * Default: ['scss', 'css', 'sass', 'less']
+   */
+   styleFileExtensions?: string[]
+
+  /**
+   * If you have jsx in other file extensions
+   * Default: ['jsx', 'tsx']
+   */
+  jsxFileExtensions?: string[]
 }
 
 export interface VitePartialPlugin extends Plugin {
   enforce?: "pre" | "post"
 }
 
-export default function reactScopedCssPlugin(optionsIn:ReactScopedCssPluginOptions = {}): VitePartialPlugin[] {
-  const options = {
-    styleFileSuffix: 'scoped',
+export default function reactScopedCssPlugin(optionsIn: ReactScopedCssPluginOptions = {}): VitePartialPlugin[] {
+  const options: Partial<ReactScopedCssPluginOptions> = {
     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')
+  }
+
+  if (!options.jsxFileExtensions || !options.jsxFileExtensions.length) {
+    throw new Error('You need to provide at least one jsx file extension')
+  }
+
   const filter = createFilter( options.include, options.exclude );
-  const scopedCssRegex = new RegExp(`\.${options.styleFileSuffix}\.(scss|css|sass)$`)
-  const scopedCssInFileRegex = new RegExp(`\.${options.styleFileSuffix}\.(scss|css|sass)(\"|\')`)
-  const jsxRegex = /\.(tsx|jsx)$/
+  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('|')})$`)
 
   return [
     {
@@ -94,7 +136,7 @@ export default function reactScopedCssPlugin(optionsIn:ReactScopedCssPluginOptio
 
         if (scopedCssRegex.test(getFilenameFromPath(id))) {
           const importerHash = getHashFromPath(id);
-          return addAttributesToCss(code, getFilenameFromPath(id), importerHash, options.hashPrefix)
+          return addAttributesToCss(code, getFilenameFromPath(id), `data-${options.hashPrefix}-${importerHash}`)
         }
       }
     }