Compatibility with yarn v2

[crubier]

When running in the context of Yarn v2 Pnp, this plugin fails with the error.

Example with react-grid-layout:

[!] (plugin postcss) Error: EISDIR: illegal operation on a directory, read
../../../.yarn/$$virtual/react-grid-layout-virtual-663c3a9629/0/cache/react-grid-layout-npm-0.16.6-5842f88c2d-2.zip/node_modules/react-grid-layout/css/styles.css

The only workaround is to yarn unplug react-grid-layout

[himself65]

I haven't tried yarn 2.x yet, PR welcome

[crubier]

@arcanis is this a common bug that is solvable easily ?

[SASUKE40]

When running in the context of Yarn v2 Pnp, this plugin fails with the error.

Example with react-grid-layout:

[!] (plugin postcss) Error: EISDIR: illegal operation on a directory, read
../../../.yarn/$$virtual/react-grid-layout-virtual-663c3a9629/0/cache/react-grid-layout-npm-0.16.6-5842f88c2d-2.zip/node_modules/react-grid-layout/css/styles.css

The only workaround is to yarn unplug react-grid-layout

What is the exact problem with rollup-plugin-postcss and yarn v2? react-grid-layout does not dependent rollup-plugin-postcss as I can see.

[crubier]

@SASUKE40 This build error happens when I use rollup to bundle a module that I made, and which uses react-grid-layout.

But the same problem happens whenever I import a css file from a third-party module installed with yarn v2.

The problem is that yarn v2 stores installed npm module in zip files, not directly in node_modules, and rollup-plugin-postcss does not take this into account and tries to load the CSS file as if it was not in a zip file.

The workaround is to yarn unplug the modules in questions that I need to import css from. But it is not ideal.

[arcanis]

Something I find curious is that the error message doesn't make much sense:

[!] (plugin postcss) Error: EISDIR: illegal operation on a directory, read
../../../.yarn/$$virtual/react-grid-layout-virtual-663c3a9629/0/cache/react-grid-layout-npm-0.16.6-5842f88c2d-2.zip/node_modules/react-grid-layout/css/styles.css

It says that a read operation was done on styles.css, but failed because it's a directory? That's unexpected. At worst I would expect the opposite: a ENOENT error because $$virtual doesn't exist.

Do you know what's the exact place that's throwing this error? And/or a small repro?

[crubier]

Here is a repro with another package than react-grid-layout just to show that this is a general problem, not specific to a particular module.

https://github.com/crubier/repro-rollup-css

[telaoumatenyanis]

I explored a bit this repo and also postcss-load-config repo.

The bug starts here:

https://github.com/egoist/rollup-plugin-postcss/blob/026504ef0480910e830873c30c5b133e2a130a64/src/postcss-loader.js#L23

Here, as there is no configPath, id is used to set the configPath variable. This variable is then passed as the path argument of findPostcssConfig (from postcss-load-config). Its value is the path of the folder of the required file (e.g.: .yarn/$$virtual/react-grid-layout-virtual-663c3a9629/0/cache/react-grid-layout-npm-0.16.6-5842f88c2d-2.zip/node_modules/react-grid-layout/css/).

This path is then passed to cosmiconfig as the search path.

https://github.com/michael-ciniawsky/postcss-load-config/blob/bdaf431ef1142b5d0253aeb534aad8f42e46877e/src/index.js#L85-L95

This is where the error happens, I didn't go deeper then here.

I am not an expert in yarn nor in cosmiconfig so I wouldn't be able to tell you who is wrong here.

If you don't need a postcss config, a workaround is:

      postcss({
        config: false
      })

If you still need one:

      postcss({
        config: {
          path: "./postcss.config.js"
        }
      })

[arcanis]

Funnily the responsibility for this bug is shared by both Yarn and cosmiconfig, as you can still reproduce it by creating a folder named "package.json". But who does that? 😛

Anyway, I've fixed the Yarn part of the problem: https://github.com/yarnpkg/berry/pull/1204 🙂

[telaoumatenyanis]

Nice, thanks a lot @arcanis for fixing this 🙏

I believe now cosmiconfig will get ENOENT right? I think this should be fine as they seem to handle this error.

https://github.com/davidtheclark/cosmiconfig/blob/d26b10550df566648c5a9a05d893d800c9b129c6/src/readFile.ts#L49-L55

I tested with a yarn set version from sources and it worked fine. I think the issue can be closed.