Plugins: Resolve breaks certain css files

[dkumor]

This looks like an issue with the interaction of resolve and postcss. Certain imported css files are included without an issue, but others disappear without a trace. Note that this happens only when using resolve (see details), so I have submitted it here. I hope that this is the right place for it!

The issue appears when trying to import vuetify's css with resolve and postcss.

• Node-Resolve Plugin Version: 5.2.0
• Rollup Version: 1.20.2
• Operating System (or Browser): archlinux
• Node Version: 12.9.1

How Do We Reproduce?

When trying to import vuetify css with resolve, it simply is not included, as if the import didn't exist

// test.js
import 'vuetify/dist/vuetify.css';

npm i rollup rollup-plugin-node-resolve rollup-plugin-postcss vuetify codemirror

// rollup.config.js
import resolve from "rollup-plugin-node-resolve"
import postcss from "rollup-plugin-postcss"

export default {
  input: "test.js",
  output: {
    file: "test.mjs",
    format: "es"
  },
  plugins: [resolve(),postcss()]
}

Running rollup with rollup -c

Expected Behavior

Importing certain files with resolve works fine

// test.js
import 'codemirror/lib/codemirror.css';

Importing the problematic file directly (without resolve) also works without issue

cp node_modules/vuetify/dist/vuetify.css ./vuetify.css

```js
// test.js
import "./vuetify.css"

Trying to import a file that does not exist gives the expected error
```js
import "doesnotexist.css"; // as expected, fails with "Unresolved dependencies" error

Actual Behavior

// test.js
import 'vuetify/dist/vuetify.css';

An empty bundle is generated, without any error.

[hiendv]

Can you install [email protected] and see if it works?

[dkumor]

5.0.3 worked! I'll use that for now, thanks!

[hiendv]

It's because of d49e257. It has a problem with sideEffects and filter. I will open an issue soon.

[shellscape]

Hey folks (this is a canned reply, but we mean it!). Thanks to everyone who participated in this issue. We're getting ready to move this plugin to a new home at https://github.com/rollup/plugins, and we have to do some spring cleaning of the issues to make that happen. We're going to close this one, but it doesn't mean that it's not still valid. We've got some time yet before the move while we resolve pending Pull Requests, so if this issue is still relevant, please @ me and I'll make sure it gets transferred to the new repo. :beer:

[hiendv]

@shellscape The bug remains when setting up the project with lerna.

[shellscape]

@hiendv @dkumor I've finally got the bandwidth to take a look at this. Can either of you break this down into a minimal reproduction using a repo or the repl? If possible, without using the postcss plugin.

[dkumor]

While I haven't looked into why the issue is happening, so I'm not sure how to reproduce without postcss, I have recreated the minimal reproduction above (with postcss): https://repl.it/repls/EcstaticFaithfulPolygon

As mentioned above, the issue is not present in 5.0.3.

[hiendv]

@dkumor's problem is caused by the vuetify sideEffects setting.

• vuetify intends to mark sideEffects for node_modules/vuetify/**/*.css
• @rollup/plugin-node-resolve reads it as node_modules/vuetify/*.css
• The actual file is located at node_modules/vuetify/dist/vuetify.css

You can try modifying node_modules/vuetify/package.json sideEffects to */*.css and see if it works.

Mine is another problem with lerna symlink and stuff. I'm trying to reproduce asap.

[dkumor]

@hiendv yes, looks like that was the issue! If I understand correctly, this means there are two bugs here:

• vuetify has incorrect sideEffects setting for css files, which needs to be fixed on their end.
• plugin-node-resolve silently fails when a file is loaded that is not in sideEffects, without giving any indication that something went wrong. I'm not sure why the file needs to be in sideEffects to be resolved when explicitly referenced, but if this is intentional, would be nice to get an error message.

Is my understanding correct?

[hiendv]

@dkumor

• Not really vuetify problem because the translation of sideEffects vary between rollup and webpack. It works fine when bundling with webpack I believe.
• I don't have any idea about plugin-replace but I find it understandable to mark css files as "side-effects" so the tree-shaking works correctly.

[dkumor]

oops, sorry - not plugin-replace, but node-resolve (edited comment to fix)! Thanks for your help in figuring out this problem @hiendv!

In general, I guess my issue can be boiled down to the fact that plugin-node-resolve is unable to import the explicitly referenced css if it is outside of sideEffects - and it does not notify of the error. The current behavior of silently failing caused me quite a bit of confusion!

[hiendv]

@dkumor I guess you should keep this issue open because of the difference between rollup and webpack on resolving "*.css" :D

[shellscape]

Hey folks, this one has gone quite stale. We're going to close for housekeeping but we'd happily review any PRs that pop up to resolve this issue.

[mjsgreen01]

I had a similar issue with @rollup/plugin-node-resolve where my nested CSS files were not being included in the output bundle.

Fixed by changing my package.json's sideEffects field to "sideEffects": [ "**/*.css", "**/*.scss" ],