SyntaxError: Invalid regular expression

[klimashkin]

If install escodegen manually and import const processJs = require('rename-css-selectors/lib/processJs/processJs') I got error

/~/rcs-core/lib/options/replace.js:237
    const foundStringRegex = new RegExp(tokens.join('|'), 'g')
                             ^
SyntaxError: Invalid regular expression: /.../ :Range out of order in character class

[klimashkin]

I think the most reliable solution is to use AST (babel for instance) to find and replace strings instead of manually building regexp - it's hardly possible to take into account all possible variants there

[JPeer264]

tokens are already coming from an AST parser (espree by eslint). I was researching to transpile AST to code again (I really found nothing after hours).

But I guess I found my solution with babylon and babel-generate. Thanks for the hint with babel.

[klimashkin]

Hi, @JPeer264!
Still looking forward to that enhancement!
Find out that node-rcs-core doesn't work after js bundle minification.

[JPeer264]

Hey,
which version do you use atm?

[klimashkin]

I'm still on rename-css-selectors 1.2.3 because if I update to 1.3.1 js bundle fails in browser even without minification. Maybe because 1.3.1 depends on "rcs-core": "1.0.0-alpha.1"
I get

Uncaught SyntaxError: Invalid regular expression: /^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$/: Range out of order in character class

Seems like rcs-core transforms that code
https://github.com/facebook/react/blob/b1768b5a48d1f82e4ef4150e0036c5f846d3758a/src/renderers/dom/shared/DOMProperty.js#L167
into

ATTRIBUTE_NAME_CHAR: ATTRIBUTE_NAME_START_CHAR + "\\\\-.0-9\\\\u00B7\\\\u0300-\\\\u036F\\\\u203F-\\\\u2040",

[JPeer264]

I actually wonder where this comes from:

Uncaught SyntaxError: Invalid regular expression: /^(data|aria)-[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$/: Range out of order in character class

Because in rcs-core or in rename-css-selectors there is no regular regex starting with ^(data|aria)-.

The second issue, with the double escape, seems like it comes from recast. I will check if this behavior is wanted or a bug.

[klimashkin]

It comes from
https://github.com/facebook/react/blob/d7157651f7b72d9888c0123e191f9b88cd8f41e9/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L26

[JPeer264]

Alright, I got it. This seems like a bug in recast. I will check out this library in try to fix this.

[JPeer264]

@klimashkin I will try to update rename-css-selectors as soon as I have time, please be patient.

[JPeer264]

@klimashkin please try it again with rename-css-selectors@1.3.2

[klimashkin]

Seems like it works now both on minified and not minified .js files. 🎉
Thanks for hard work!!