plugins: Resolve breaks certain css files

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
// test.js
import "./vuetify.css"

Trying to import a file that does not exist gives the expected error

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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 15

Most upvoted comments

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!

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

Can you install rollup-plugin-node-resolve@5.0.3 and see if it works?

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" ],

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