giuseppeg / styled-jsx-plugin-postcss

Plugin to add PostCSS support to styled-jsx.
91 stars 17 forks source link

Empty styles or selectors cause error #50

Open KB1RMA opened 3 years ago

KB1RMA commented 3 years ago

Currently If I write the following test it fails:

      it("compiles empty styles", (done) => {
        assert.strictEqual(
          plugin('p { }', {
            compileEnv,
          }),
          "p { }"
        );
      });

We have, for various reasons, a number of css.resolve``; calls in our code which result in the following errors being thrown during compilation.

[styled-jsx-plugin-postcss] did not compile the following CSS:
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)
    at Array.forEach (<anonymous>)

I've started digging into this issue a little bit and it looks as if https://github.com/giuseppeg/styled-jsx-plugin-postcss/blob/master/processor.js#L18 never returns so the compilation times out. The only reason I'm thinking it's a bug here is because if I do postcss().process('p {}', { from: false }) it returns back p {} without issue.

I've started debugging this myself, but wanted to document the behavior in an issue in case there's some backstory on this.

giuseppeg commented 3 years ago

@KB1RMA thanks for reporting this issue. Does this happen with the latest version of styled-jsx-plugin-postcss ? If so which version of Node? Can you check that the error occurs regardless of the value of compileEnv (worker or process)? https://github.com/giuseppeg/styled-jsx-plugin-postcss#compileenv

giuseppeg commented 3 years ago

By the way in your example test your function has done so the test will timeout because you need to call that. Probably though that doesn't explain the issue. I'll take a look in the following days

KB1RMA commented 3 years ago

By the way in your example test your function has done so the test will timeout because you need to call that. Probably though that doesn't explain the issue. I'll take a look in the following days

Whoops - bad copypasta job on my end putting a quick example together - pretend I didn't have that argument in there, sorry! :)

edit: here's what I was doing additional testing with:

      it.only("works with empty styles", (done) => {
        postcss()
          .process('p {}', { from: false })
          .then((result) => {
            console.log(result); 
            done();
          })
      });

@KB1RMA thanks for reporting this issue. Does this happen with the latest version of styled-jsx-plugin-postcss ? If so which version of Node? Can you check that the error occurs regardless of the value of compileEnv (worker or process)? https://github.com/giuseppeg/styled-jsx-plugin-postcss#compileenv

This happens on current master, yes. It also occurs both with worker and process which is what's tripping me up at the moment tracing it through. The promise in processor.js, shared between both, is never resolved.

Node version: v14.15.5 postcss version is: 8.2.8

I discovered this while upgrading from the latest styled-jsx-plugin-postcss@2.0.1 to the latest.

KB1RMA commented 3 years ago

I think I've tracked this down to postcss-csso. When I comment out line 16, [path.resolve(__dirname, "./fixtures/fixture-postcss-plugin.js")]: {},, from the postcss.config.js at the root empty selectors work again.

Not sure if it's technically a bug in the plugin? Or how postcss handles minified css resulting in empty strings because this doesn't fully explain why it's failing in my current project as I don't use postcss-csso at all.