CSS @import does not work with absolute paths (`node_modules`)

[rschristian]

Edit: Problem was more widespread than I thought.

Describe the bug CSS @import syntax only works with relative paths within the public directory. Anything else is a no-go. For example:

• [ ] Importing from node_modules
• [x] Importing from src (alias)
• [x] Having a dependency that uses @import

are all things that you cannot do with WMR.

To Reproduce Created a simple repo that shows off with the src alias: https://github.com/rschristian/wmr-css-import-syntax-paths

Obviously other methods fail too, though they fail for the same reason.

Expected behavior @import syntax is supported fully. The biggest problem is with node_modules using it breaking, as that's mostly out of the control of the user. They'd need to slip in with a post-install script and cut that out else WMR will have issues.

Desktop (please complete the following information):

• Node Version: 14.16.0
• WMR Version: 2.1.0

[makoven]

import "./style.module.css" doesn't work either. I have a module with GUI components that has import "./styles.module.css" in the index.js. When I try to use this module in my program, I get an error:

Could not load ./node_modules/my-gui-toolkit/styles.module.css (imported by npm/[email protected]/index.js): local access not allowed

[rschristian]

@makoven Is that something in node_modules using import "./style.module.css"? If so that's an invalid import and the error is expected and not an issue. Node modules shouldn't be shipped with imports that require a CSS loader like that.

[makoven]

@rschristian It's illegal to import css file in js too :) But this does not stop anyone. There is no other way to distribute a components library with real CSS modules other than to leave them in their original form. So why not?

[rschristian]

@makoven It's acceptable to use CSS imports for web apps, yes, as you know the environment in which it will be used. You can't distribute a module knowing where it's used, however, so that is not something you can do. The error is correct here.

The correct way to distribute a component built with CSS modules is to replaces usages with generated hashes for the class names. Replacing in the component and in the CSS file means you can consume as if it's any other CSS, while ensuring no collisions due to the hashes. Take a look at microbundle if you'd like an example of a tool that'll handle this.

[makoven]

@rschristian thanks for pointing out the microbundle

[marvinhagemeister]

FYI: The aliasing or importing modules outside the public directory feature has landed in main. It will be released as part of 3.0.0. The node_module resolution will take a bit more work to get right, but it's on my mind 👍

[zgoda]

Importing CSS from node_modules does not work in SASS/SCSS too - SASS/SCSS locations are resolved fine, the CSS breaks. I already filed https://github.com/preactjs/wmr/issues/860 but if you confirm it's the same issue I will close it as duplicate.