how to reproduce
- uncomment
config: "tailwind.config.js"
in example/svelte/rollup.config.js
// example/svelte/rollup.config.js
...
preprocess: windicss.preprocess({
config: "tailwind.config.js",
// bundle: './public/windi.css',
// compile: true,
prefix: "windi-",
globalPreflight: true,
globalUtility: true,
}),
...
- add only the typography plugin in "tailwind.config.js"
// example/svelte/tailwind.config.js
module.exports = {
plugins: [
require("windicss/plugin/typography"),
],
};
- add some markup with .prose in
example/svelte/src/App.svelte
<div class="prose">
<h1>Hello Windicss!</h1>
<p>lorem</p>
</div>
- start dev server
npm i
npm run dev
- now start editing App.svelte with markup and / or classes
what behavior is expected
I expect to see the markup formated with the prose definitions
what happens instead
On the first run all prose related classed get generated like expected in bundle.css
...
.prose {
color: #374151;
max-width: 65ch;
font-size: 1rem;
line-height: 1.75
}
...
After making one change in App.svelte, the css outputed looks like this:
...
:global(.prose) {
color: #374151;
max-width: 65ch;
font-size: 1rem;
line-height: 1.75
}
...
four edits later...
...
:global(:global(:global(:global(.prose)))) {
color: #374151;
max-width: 65ch;
font-size: 1rem;
line-height: 1.75
}
...
and so on and so forth.
what I found out so far
I found out that uncommenting this in src/utils.ts
stops the adding of :global and the css output doesn't break.
// src/util.ts
...
export function globalStyleSheet(styleSheet: StyleSheet) {
// turn all styles in stylesheet to global style
/*
styleSheet.children.forEach((style) => {
style.wrapRule((rule: string) => `:global(${rule})`);
});
*/
...
return styleSheet;
}
But now the .prose classes are always scoped, which could not be the final solution.
I hope you have enough informations to solve the issue and thank you very much for your effort in making windicss and the preprocessors! I highly appreciate that.
Let me know if I can support you in any way.