Skip to content

Support preprocessing of CSS files before bundling them #2213

@MartinaeyNL

Description

@MartinaeyNL

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

  • 1. Allow @import strings 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:

Metadata

Metadata

Assignees

Labels

BugError or issue in the system

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions