Skip to content

Commit cd95ba9

Browse files
authored
Merge pull request #2664 from modernweb-dev/feat/rollup-plugin-html-resolves-assets-in-styles
feat(rollup-plugin-html): resolves assets in styles
2 parents 2d933bc + c3dc21a commit cd95ba9

File tree

25 files changed

+582
-11
lines changed

25 files changed

+582
-11
lines changed

.changeset/famous-shoes-joke.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@web/rollup-plugin-html": minor
3+
---
4+
5+
feat(rollup-plugin-html): resolves assets in styles

docs/docs/building/rollup-plugin-html.md

+39
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,45 @@ export default {
125125
};
126126
```
127127

128+
#### Including assets referenced from css
129+
130+
If your css files reference other assets via `url`, like for example:
131+
132+
```css
133+
body {
134+
background-image: url('images/star.gif');
135+
}
136+
137+
/* or */
138+
@font-face {
139+
src: url('fonts/font-bold.woff2') format('woff2');
140+
/* ...etc */
141+
}
142+
```
143+
144+
You can enable the `bundleAssetsFromCss` option:
145+
146+
```js
147+
rollupPluginHTML({
148+
bundleAssetsFromCss: true,
149+
// ...etc
150+
});
151+
```
152+
153+
And those assets will get output to the `assets/` dir, and the source css file will get updated with the output locations of those assets, e.g.:
154+
155+
```css
156+
body {
157+
background-image: url('assets/star-P4TYRBwL.gif');
158+
}
159+
160+
/* or */
161+
@font-face {
162+
src: url('assets/font-bold-f0mNRiTD.woff2') format('woff2');
163+
/* ...etc */
164+
}
165+
```
166+
128167
### Handling absolute paths
129168

130169
If your HTML file contains any absolute paths they will be resolved against the current working directory. You can set a different root directory in the config. Input paths will be resolved relative to this root directory as well.

package-lock.json

+209-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/rollup-plugin-html/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@web/parse5-utils": "^2.1.0",
4848
"glob": "^10.0.0",
4949
"html-minifier-terser": "^7.1.0",
50+
"lightningcss": "^1.24.0",
5051
"parse5": "^6.0.1"
5152
},
5253
"devDependencies": {

packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts

+2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export interface RollupPluginHTMLOptions {
4141
absolutePathPrefix?: string;
4242
/** When set to true, will insert meta tags for CSP and add script-src values for inline scripts by sha256-hashing the contents */
4343
strictCSPInlineScripts?: boolean;
44+
/** Bundle assets reference from CSS via `url` */
45+
bundleAssetsFromCss?: boolean;
4446
}
4547

4648
export interface GeneratedBundle {

0 commit comments

Comments
 (0)