improve `experiments.css` support

[ahabhgk]

Also see https://github.com/webpack/webpack/issues/14893

• Currently Rspack support experiments.css, but there are some inconsistent with webpack's, you can ignore them in this issue for now, we will make them consistent after the Rspack mini-css-extract-plugin is implemented https://github.com/web-infra-dev/rspack/issues/5096
• This issue aims to improve the missing features that experiments.css currently not supported.
  • These are features implemented in webpack but missing in Rspack
    • [x] image-set()
    • [ ] @import url("...") layer(test);
    • [ ] @import url("...") supports(...);
    • [ ] @import url("...") media query;
    • [ ] inherit layer, supports(...) and media from parent module
    • [x] warnings for ordering issues
    • [x] cascades css modules composes (a.css: [composes: b from "./b.css"], b.css: [composes: c from "./c.css"])
  • These are features that missing in both webpack and Rspack
    • [x] contenthashing for CSS files
    • [ ] new URL("./style.css", import.meta.url): Gives an URL to a stylesheet including all styles. @import and url() are resolved.
    • [ ] supports CSS Module Scripts
    • [ ] implement /* webpackIgnore: true */ for url()/image-set()

If you want to implement features that missing in both webpack and Rspack, we encourage you also contribute it back to webpack.

[sgarfinkel]

Is it possible to also get inlining support like vite has via a resource query ?inline?

[hardfist]

Is it possible to also get inlining support like vite has via a resource query ?inline?

you can support this by custom rule or use rsbuild https://rsbuild.dev/guide/optimization/inline-assets#force-inlining

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[ahabhgk]

support image-set() in https://github.com/web-infra-dev/rspack/pull/6594

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[hardfist]

bump

[faga295]

Css Module Scripts is also not missing in both webpack and Rspack

[ahabhgk]

Added to the list, currently CSS Module Scripts is only available with css-loader

[leimonio]

When CSS Modules are enabled, the styles are usually imported using the default export of the style module, especially in a React and Vue application context. Instead in the current CSS support the namedExport is the default configuration and expected behaviour.

https://nextjs.org/docs/app/building-your-application/styling/css#css-modules https://vuejs.org/api/sfc-css-features.html#css-modules

import React from 'react'
import styles from './App.module.scss'

const App = () => {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        ...
      </header>
    </div>
  )
}

export default App

In that case I'd very much prefer this module.parser to be provided along with css/scss modules, a default configuration.

module.exports = {
  ...
  experiments: {
    css: true,
  },
  module: {
    parser: {
      'css/auto': {
        namedExports: false,
      },
      'css/module': {
        namedExports: false,
      },
    },
    rules: [...]
}

My main aim here would be to simplify the default required configuration for the CSS Modules.