Context
During my research for integrating the Vaadin Web Components, see here,
I encountered issues with importing their CSS files. This is because they're using @import "./myfile.css",
which needs preprocessing before parsing the CSS content to raw input strings for JavaScript.
A bit of context, copied over from the Vaadin issue, below:
Version 24 has worked seamlessly in the past, but the newest Version 25 (with a styling overhaul) does not.
This is because our Webpack/RSPack setup bundles CSS files as "raw string inputs". So if you'd write;
import tempCss from "mydependency.css", it would inject the CSS string content into the JavaScript code.
Since v24 used a regular CSS file, this worked fine. But version 25 uses import strings like
@import "./myotherfile.css", which requires "pre processing" from the bundler; in our case RSPack.
Description
We need to make sure CSS files with modern statements like @import are supported for
building OpenRemote UI apps. Preferably this should be a minor change in our RSPack configuration.
Here's a bit more context (as described in the Vaadin issue) on how to approach it:
My recent Storybook branch uses RSBuild for bundling instead of RSPack.
Here it worked seamlessly, as RSBuild does some "out of the box pre processing" of CSS- and asset files.
Luckily, since RSBuild is based on RSPack, it would require us to modify our RSPack configuration to the
loaders and plugins that our Storybook RSBuild setup is using. It will need some tinkering and experimenting,
since bundler configurations are not simple, but it is possible with the correct setup.
Acceptance Criteria
Implementation Notes
Could be related to #2032
Some other references that can be useful:
Context
During my research for integrating the Vaadin Web Components, see here,
I encountered issues with importing their CSS files. This is because they're using
@import "./myfile.css",which needs preprocessing before parsing the CSS content to raw input strings for JavaScript.
A bit of context, copied over from the Vaadin issue, below:
Description
We need to make sure CSS files with modern statements like
@importare supported forbuilding OpenRemote UI apps. Preferably this should be a minor change in our RSPack configuration.
Here's a bit more context (as described in the Vaadin issue) on how to approach it:
Acceptance Criteria
@importstrings to be parsed along with the bundle output.Our CSS dependencies that use this statement should be imported and bundled correctly.
Implementation Notes
Could be related to #2032
Some other references that can be useful: