blog: webpack 5.108#8277
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
||
| ### `url()` Inside HTML `style` Attributes | ||
|
|
||
| Webpack can now route an HTML inline `style="..."` attribute through the CSS pipeline, resolving `url()`, `image-set()`, and `@import` relative to the HTML file. This is powered by a new [`module.parser.css.as`](/configuration/module/#moduleparsercssas) option that selects the top-level CSS production to parse: `"stylesheet"` (the default, a full stylesheet) or `"block-contents"` (a declaration list, like the inside of a `style` attribute). |
There was a problem hiding this comment.
We can't have @import inside style tag, we resolve all function which can have URLs
|
|
||
| For the new `universal` target (below), CSS now runs in Node without crashing and exposes styles for server-side rendering. Styles from `style` injection and `link`-loaded chunks are collected into a registry an SSR host can read at `globalThis["__webpack_css__" + output.uniqueName]`. Single-platform (web-only or node-only) builds emit no extra runtime, so this is scoped entirely to universal output. | ||
|
|
||
| ## The `universal` Target |
There was a problem hiding this comment.
Let's add more description and cases here, it is a great feature (also some limitations too)
…universal` target
| }; | ||
| ``` | ||
|
|
||
| To make this feel like Vite or Parcel, webpack 5.108 also adds `.html` (and `.css`, when [`experiments.css`](/configuration/experiments/#experimentscss) is enabled) to the default `resolve.extensions`, ahead of the JavaScript extensions. With the HTML experiment on, the default `./src` entry therefore resolves `./src/index.html` over `./src/index.js`: |
There was a problem hiding this comment.
also adds
.html(and.css, when experiments.css is enabled) to the defaultresolve.extensions, ahead of the JavaScript extensions.
Should it be clarified that .html is added before JS extensions and .css after them as per defaults.js?
| }; | ||
| ``` | ||
|
|
||
| ### `[uniquename]` Template Placeholder |
There was a problem hiding this comment.
Would it be beneficial to adopt the same convention as per TemplatedPathPlugin.js#L669-L670 and the output docs, which both treat [uniqueName] as canonical and [uniquename] as the alias?
Summary
webpack/webpack#21037
What kind of change does this PR introduce?
Did you add tests for your changes?
Does this PR introduce a breaking change?
If relevant, what needs to be documented once your changes are merged or what have you already documented?
Use of AI