@stylify/bundler does not work since new version 0.6.0

micisse commented 1 year ago

Describe the bug

I updated this stackblitz project from 0.5.0 to the new version 0.6.0 and the bundler does not work anymore. I get the error "RangeError : Invalid string length...".

Capture d’écran_2023-05-17_01-24-52

"selectorsAreas" with an empty array = no problem "selectorsAreas" with an array = problem

Reproduction

https://stackblitz.com/edit/stylify-remix-example-eqmg9w?file=package.json

Logs

❯ npm run stylify:build
$ node stylify.js
01:24:40 AM [stylify] "RangeError: Invalid string length\n    at Compiler.compile (file:///home/projects/stylify-remix-example-eqmg9w/node_modules/@stylify/stylify/lib/index.cjs:502:35)\n    at bundleRunner (file:///home/projects/stylify-remix-example-eqmg9w/node_modules/@stylify/bundler/lib/index.cjs:574:55)\n    at async execBundleRunner (file:///home/projects/stylify-remix-example-eqmg9w/node_modules/@stylify/bundler/lib/index.cjs:665:9)\n    at async Promise.all (index 0)\n    at async Bundler.bundle (file:///home/projects/stylify-remix-example-eqmg9w/node_modules/@stylify/bundler/lib/index.cjs:301:7)" 
01:24:40 AM [stylify] No bundle was processed.

System Info

"@stylify/bundler": "^0.6.0"

Node.js v16.14.2 on stackblitz link (but I use Node v18.12.1 on my local computer and I've the same issue)

Machy8 commented 1 year ago

Hi @micisse.

The 0.6 contains a few changes that are described within the getting started migration guide https://stylifycss.com/en/docs/get-started/releases/

I have updated your example so it works with the 0.6: https://stackblitz.com/edit/stylify-remix-example-cwpuvn?file=stylify.js,index.txt,app%2Fstyles%2Fstylify.css

selectorsAreas These areas are receive regular expression instead of string

    selectorsAreas: [
      /(?:^|\s+)className="([^"]+)"/,
      /(?:^|\s+)className='([^']+)'/,
      /(?:^|\s+)className=\{`((?:.|\n)+)`\}/,
      /(?:^|\s+)className=\{((?:.|\n)+)\)\}/,
      /(["].*["])/,
      /(['].*['])/,
      /(?:^|\s+)backdropClassName="([^"]+)"/,
    ],

stylify.js In the Stylify config you have in the example, update the line with mangling, so it mangles selectors only, when not in a watch mode (this actually should work automatically, but it seems like a small bug in the bundler config, I will fix it today in 0.6.1).

mangleSelectors: !isDev,

I have tested the build and dev commands and it seems it all works after these changes.

Please try it out and let me know, if it works for you as well.

micisse commented 1 year ago

Hi @Machy8

I was able to read the changelog and apply the changes but nothing is said about the changes to do for the "selectorAreas". Maybe it should be mentioned in the changelog also. Compared to version 0.5 where you had to use strings. The documentation is also not up to date as I write this comment (https://stylifycss.com/en/docs/stylify/compiler/#selectorsareas).

Capture d’écran_2023-05-17_13-12-55

I've tested and it's ok 👍 ! I close the ticket

Machy8 commented 1 year ago

Sorry, I have overlooked that. I will add that into the changelog. Thanks. And ok.

stylify / packages