rollup-plugin-react-scoped-css 0.3.0 → 0.5.1

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

@@ -0,0 +1,19 @@
+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

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/README.md

@@ -1,10 +1,33 @@
 # 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.
+
 ## How to install
 
 ```sh
@@ -56,6 +79,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
@@ -70,12 +94,18 @@ There are a few options available to customize how the plugin works
    * If you want to customize the preprocessors
    * Default: ['scss', 'css', 'sass', 'less']
    */
-  preProcessors?: string[]
+  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()
@@ -86,6 +116,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-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: Function) => 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,103 +1,60 @@
 "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;
-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, _e;
-    return ( // with React.createElement
-    (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') || ( // with babel jsx runtime
-    (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' &&
-        ((_e = node === null || node === void 0 ? void 0 : node.callee) === null || _e === void 0 ? void 0 : _e.name) === '_jsxDEV');
-}
-function isFragmentCallExpression(node) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return ( // with React.createElement
-    ((_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") || ( // with babel jsx runtime
-    ((_h = (_g = node.arguments) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.type) === "Identifier" &&
-        ((_k = (_j = node.arguments) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.name) === "_Fragment");
-}
-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 n.local.name === 'jsxRuntime'; }) || node.source.value === 'react/jsx-runtime') {
+                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 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 (isReactCreateElementCallExpression(node) && !isFragmentCallExpression(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,11 +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;
-    preProcessors?: 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

@@ -47,11 +47,11 @@ var getHashFromPath = function (filePath) {
 };
 var generateHash = function (input, seed) {
     if (seed === void 0) { seed = 0; }
-    var hashNum = 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) {
-    var code = component_compiler_utils_1.compileStyle({
+    var code = (0, component_compiler_utils_1.compileStyle)({
         source: src,
         filename: fileName,
         id: hash,
@@ -62,11 +62,21 @@ var addAttributesToCss = function (src, fileName, hash) {
 };
 function reactScopedCssPlugin(optionsIn) {
     if (optionsIn === void 0) { optionsIn = {}; }
-    var options = __assign({ styleFileSuffix: 'scoped', hashPrefix: 'v', preProcessors: ['scss', 'css', 'sass', 'less'] }, optionsIn);
-    var filter = pluginutils_1.createFilter(options.include, options.exclude);
-    var scopedCssRegex = new RegExp("." + options.styleFileSuffix + ".(" + options.preProcessors.join('|') + ")$");
-    var scopedCssInFileRegex = new RegExp("." + options.styleFileSuffix + ".(" + options.preProcessors.join('|') + ")(\"|')");
-    var jsxRegex = /\.(tsx|jsx)$/;
+    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 = (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('|'), ")$"));
+    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('|'), ")$"));
     return [
         {
             name: 'rollup-plugin-react-scoped-css:pre',
@@ -76,7 +86,7 @@ function reactScopedCssPlugin(optionsIn) {
                 }
                 if (scopedCssRegex.test(source) && jsxRegex.test(importer)) {
                     var importerHash = generateHash(importer);
-                    var url = path.resolve(path.dirname(importer), source + "?scope=" + importerHash);
+                    var url = path.resolve(path.dirname(importer), "".concat(source, "?scope=").concat(importerHash));
                     return url;
                 }
             },
@@ -91,12 +101,12 @@ function reactScopedCssPlugin(optionsIn) {
                 if (scopedCssInFileRegex.test(code)) {
                     var importerHash = generateHash(id);
                     var program = this.parse(code);
-                    var newAst = ast_utils_1.addHashAttributesToJsxTagsAst(program, "data-" + options.hashPrefix + "-" + importerHash);
-                    return escodegen_1.generate(newAst);
+                    var newAst = (0, ast_utils_1.addHashAttributesToJsxTagsAst)(program, "data-".concat(options.hashPrefix, "-").concat(importerHash));
+                    return (0, escodegen_1.generate)(newAst);
                 }
                 if (scopedCssRegex.test(getFilenameFromPath(id))) {
                     var importerHash = getHashFromPath(id);
-                    return addAttributesToCss(code, getFilenameFromPath(id), "data-" + options.hashPrefix + "-" + importerHash);
+                    return addAttributesToCss(code, getFilenameFromPath(id), "data-".concat(options.hashPrefix, "-").concat(importerHash));
                 }
             }
         }

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

@@ -0,0 +1,7 @@
+import { JsxParser } from "./jsx-parser.model";
+export declare class ClassicJsxParser implements JsxParser {
+    isNodeReactFragment(node: any): boolean;
+    isNodeReactElement(node: any): boolean;
+    extendNodeWithAttributes(node: any, attr: string): any;
+    private createAttributeNode;
+}