Inline small CSS in HTML (Parcel v2) #5263
Replies: 8 comments 1 reply
-
|
I stumbled upon this https://github.com/xingqiao/parcel-plugin-inline-source but it's v1 and I don't want images and other assets... |
Beta Was this translation helpful? Give feedback.
-
|
Same with this one: https://github.com/shff/parcel-plugin-inliner |
Beta Was this translation helpful? Give feedback.
-
<style>
@import "./style.css";
</style>https://v2.parceljs.org/languages/html/#inline-script-and-style-tags |
Beta Was this translation helpful? Give feedback.
-
|
@mischnic Thanks 👍 I may try that in the meanwhile but I also really want to find a way for Parcel to take a |
Beta Was this translation helpful? Give feedback.
-
|
Conclusion from trying to do it completely as a PostHTML plugin: When using I could create a PostCSS plugin that transforms |
Beta Was this translation helpful? Give feedback.
-
|
Seems like patching the existing |
Beta Was this translation helpful? Give feedback.
-
|
@mischnic I ended up doing this: https://github.com/hsablonniere/hsablonniere.com/blob/master/local_modules/parcel-transformer-html-inline-css/parcel-transformer-html-inline-css.js |
Beta Was this translation helpful? Give feedback.
-
|
You could maybe write a posthtml plugin to compile the link tag to a |
Beta Was this translation helpful? Give feedback.
-
|
Yed that's what I tried at some point. It works well but in a PostHTML plugin, I cannot figure out if the linked CSS is "big" or not to conditionally trigger inlining or not. I think it's because my CSS URLs are relative to the HTML files. Therefore I have no proper way to use fs.stats to figure out the size of the CSS file. I was wondering if and how the posthtml official plugin could pass the HTML source path. Maybe using the messages. If I had that, a simple postHTML plugin would work. |
Beta Was this translation helpful? Give feedback.
-
Hello folks,
I'm using Parcel v2 with a static site generator.
All my articles reference the same stylesheet.
Some articles have custom CSS.
For "reasons", I author those as separate stylesheets referenced with
<link rel="stylesheet">.My usage of Parcel is really as an optimization phase so I would love if it could take an HTML as an entrypoint like this:
And output this:
Notes:
@parcel/transformer-inlineand@parcel/transformer-inline-stringbut I end up having the inlined CSS in thehrefattribute.<link>into a<style>.Questions:
Cheers 😉
Beta Was this translation helpful? Give feedback.
All reactions