Open rschristian opened 3 years ago
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/my-gui-toolkit@1.0.0/index.js): local access not allowed
@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.
@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?
@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.
@rschristian thanks for pointing out the microbundle
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 👍
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.
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:node_modules
src
(alias)@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 withnode_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):