how to inline styles using bundle-text

[mrassili]

Hello

Thanks for the awesome work everyone!

So I have installed parcel#v2 and I run this build command
parcel build src/{style.pcss,background.js,content-script.js} && cp src/icons/*.png src/manifest.json dist/

which generates those files

But when I add

import style from "bundle-text:./style.css";

in src/content-script.js

I get this error during build Cannot resolve dependency 'bundle-text:./style.css'

cc @mischnic @DeMoorJasper

[mischnic]

./style.css

style.pcss

You need to decide which extension you want to use.

Also, you likely only want background.js and content-script.js as entrypoints.

[mrassili]

./style.css

style.pcss

You need to decide which extension you want to use.

isn't pcss file bundled into css?

Also, you likely only want background.js and content-script.js as entrypoints.

Yes will experiment with that

[mrassili]

If I don't include style.pcss in the bundle command it's not bundled, what should be the way to include it?

[mischnic]

1. Until that PR is merged published to npm, .pcss doesn't work

2. An example:

index.js:

import style from "bundle-text:./style.less";

console.log(style);

style.less:

body {
	color: red;
}

parcel build index.js works as expected

[mrassili]

Until that PR is merged, .pcss doesn't work

I'm actually using the latest changes it's merged now, no?

and I get a style.css output without problems

2. An example:

index.js:

import style from "bundle-text:./style.less";

console.log(style);

style.less:

body {
	color: red;
}

parcel build index.js works as expected

I don't have an index.js, it's not possible to import the css text inside content-script.js?

[mischnic]

Do you actually need import "./style.css";?

I've created an issue for that bug: #4709

[mrassili]

Do you actually need import "./style.css";?

This is what I get when I don't include that line

dist/background.js
dist/content-script.js

[mischnic]

What are you trying to achieve here?

If you want to inject the CSS contents into some html element yourself, then this is fine?

[mrassili]

okay so the optimal result I am trying to accomplish is:
I have a style.pcss file and content-script.js that injects the bundled css into the html during build. This is to be able to inline styles in a shadow root element since outside styles can't affect it.

I can't write css directly inside the html because I use TailwindCSS and only write classes

If you can think of a better approach please let me know

[mrassili]

okay I can actually get rid of the import './style.css' and the styles are injected into <style>${style}</style> without problems