[Question]Will Webpack support CSS module scripts?

[AkifumiSato]

It seems that Chrome implements CSS module scripts which imports CSS using import assertion. https://web.dev/css-module-scripts/

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

This seems to have different specifications than when using css-loader. I'm wondering if I need to be aware of the difference between css-loader and CSS module scripts in the future.

// CSS module scripts
import sheet from './styles.css' assert { type: 'css' };
// with css-loader
import sheet from './styles.css';

Are there any plans to support this on the Webpack side? Is this a problem that another library should address?

[sokra]

Yes, we want to support that, but no plans have been made to implement it yet

[alexander-akait]

@AkifumiSato

I'm wondering if I need to be aware of the difference between css-loader and CSS module scripts in the future.

We can improve css-loader and have the same behavior

[alexander-akait]

@AkifumiSato Anyway what is the problem with css-loader and import sheet from './styles.css' assert { type: 'css' };?

[AkifumiSato]

Anyway what is the problem with css-loader and import sheet from './styles.css' assert { type: 'css' };?

Import results are different for css-loader and css module script.

// CSS module scripts
import sheet from './styles.css' assert { type: 'css' };
console.log(sheet instanceof CSSStyleSheet) // true

// with css-loader
import sheet from './styles.css';
console.log(sheet instanceof CSSStyleSheet) // false, `sheet` is Record<string, string>.

My understanding is that if you import it with css module script, it will not be available for className of ReactElement.

/* index.css */
.title {
  font-size: 20px;
}

import React from 'react'
import styles from './index.css' assert { type: 'css' }

export const Title: React.FC = ({ children }) => (
  // `styles.title` is undefined.
  <h1 className={styles.title}>{children}</h1>
)

[alexander-akait]

hm, we can fix it, if assert { type: "css" } setted we can return CSSStyleSheet

[alexander-akait]

And you can use classes as named export https://github.com/webpack-contrib/css-loader#namedexport

[AkifumiSato]

hm, we can fix it, if assert { type: "css" } setted we can return CSSStyleSheet

With the support of css module scripts, I think it's difficult for users to be aware that the return value changes depending on the presence or absence of assert {type:'css'}, but can't it be helped? For example, how about implementing an assert that returns a record similar to css-loader, such as assert {type: " cssModules"}?

[alexander-akait]

Yep, we can improve this too, it is not hard, I will think how better to do it

[AkifumiSato]

@alexander-akait thx a lot! Should I keep this issue open?

[alexander-akait]

Yep, first we improve css-loader, then in future we will move logic inside webpack core

[sokra]

assert handling is already in the core. You can do that:

module.rules: [ {
  test: /\.css$/,
  oneOf: [
    { assert: { type: "css" }, loader: "css-loader", options: { exportStylesheet: true } },
    { loader: "css-loader", options: { exportStylesheet: false } }
  ]
} ]

Assuming css-loader supports exportStylesheet, which it currently don't

[alexander-akait]

@AkifumiSato https://github.com/webpack-contrib/css-loader/pull/1368

[AkifumiSato]

@alexander-akait It looks like the fix is complete, should I close the Issue?

[alexander-akait]

@AkifumiSato Not fully finished

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[vankop]

bump

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[alexander-akait]

let's close in favor https://github.com/webpack/webpack/issues/14893