Closed AkifumiSato closed 1 year ago
Yes, we want to support that, but no plans have been made to implement it yet
@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
@AkifumiSato Anyway what is the problem with css-loader
and import sheet from './styles.css' assert { type: 'css' };
?
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>
)
hm, we can fix it, if assert { type: "css" }
setted we can return CSSStyleSheet
And you can use classes as named export https://github.com/webpack-contrib/css-loader#namedexport
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"}
?
Yep, we can improve this too, it is not hard, I will think how better to do it
@alexander-akait thx a lot! Should I keep this issue open?
Yep, first we improve css-loader, then in future we will move logic inside webpack core
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 It looks like the fix is complete, should I close the Issue?
@AkifumiSato Not fully finished
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.
bump
Issue was closed because of inactivity.
If you think this is still a valid issue, please file a new issue with additional information.
let's close in favor https://github.com/webpack/webpack/issues/14893
It seems that Chrome implements
CSS module scripts
which imports CSS using import assertion. https://web.dev/css-module-scripts/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.Are there any plans to support this on the Webpack side? Is this a problem that another library should address?