-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
docs: add docs for the css experiment #6919
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
04495a8
1751991
19db563
4c5bae0
fb52f79
e544228
f0bf7b1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,7 @@ contributors: | |
| - chenxsan | ||
| - anshumanv | ||
| - snitin315 | ||
| - burhanuday | ||
| --- | ||
|
|
||
| ## experiments | ||
|
|
@@ -184,6 +185,35 @@ Detect changes to remote resources and upgrade them automatically. | |
|
|
||
| Enable native CSS support. Note that it's an experimental feature still under development and will be enabled by default in webpack v6, however you can track the progress on [GitHub](https://github.com/webpack/webpack/issues/14893). | ||
|
|
||
| - Type: | ||
|
|
||
| - `boolean` | ||
| - `CssExperimentOptions` | ||
|
|
||
| ```ts | ||
| { | ||
| exportsOnly?: boolean; | ||
| } | ||
| ``` | ||
|
|
||
| Experimental features: | ||
|
|
||
| - CSS Modules support: webpack will generate a unique name for each CSS class. Use the `.module.css` extension for CSS Modules. | ||
| - <Badge text="5.87.0+" /> Style-specific fields resolution in `package.json` files: | ||
| webpack will look for `style` field in `package.json` files and use that if it | ||
| exists for imports inside CSS files. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe include an example for this list item? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Btw, did you insert many soft line breaks? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Strange. The line break gets added by prettier. Was able to remove it from one point but not the other There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
It is a little difficult to explain that point with an example since it has to do with module resolution inside of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Added an example with using bootstrap since they do have that field in their package.json file https://github.com/twbs/bootstrap/blob/main/package.json#L40 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
This is happening due to MDX component Badge. VSCode considers the file as markdown and thats just how it formats it for me 😅 |
||
|
|
||
| For example, if you add `@import 'bootstrap';` to your CSS file, webpack will look for `bootstrap` in `node_modules` and use the `style` field in `package.json` from there. If `style` field is not found, webpack will use the `main` field instead to preserve backward compatibility. | ||
|
|
||
| - Content hash for CSS files: webpack will generate a content hash for CSS files and use it in the filename. This is useful for long-term caching. | ||
| - CSS extraction: webpack will extract CSS into a separate file. This functionality replaces the need for `mini-css-extract-plugin` and `css-loader`, as it provides native support. | ||
| - CSS imports: webpack will inline CSS imports into the generated CSS file. | ||
| - Hot Module Reload (HMR): webpack supports HMR for CSS files. This means that changes made to CSS files will be reflected in the browser without a full page reload. | ||
|
|
||
| #### experiments.css.exportsOnly | ||
|
|
||
| Avoid generating and loading a stylesheet and only embed exports from css into output javascript files. | ||
|
|
||
| - Type: `boolean` | ||
|
|
||
| ### experiments.cacheUnaffected | ||
|
|
||