adamwathan
commented
2 years ago Hey! This sounds like some incompatibility with whatever CSS tooling is adding the :global stuff and the fairly recent :where pseudo-selector in CSS maybe.
You can likely work around this by setting target: 'legacy' when configuring the typography plugin, but that will disable a bunch of features like the not-prose class and the ability to override styles on individual typography elements with utilities, since all of that stuff depends on :where to work.
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/typography')({
target: 'legacy'
})
]
}This feature is sort of deliberately undocumented currently just to make sure we have a sense of how many people actually run into the need for it, by opening issues like this one 👍🏻
I'm going to close as not something we can actually do anything to "fix" as far as I can tell — the selectors we generate are totally valid CSS and you actually get the same error even if you aren't using Tailwind at all and wrote the same type of selector by hand, for example:
<script>
export let data, helpers, settings;
</script>
<style global lang="postcss">
.foo > :where(ul > li p, ol > li p) {
background: red;
}
</style>
<svelte:head>
<title>Elder.js Template: Home</title>
<meta name="description" content="Elder.js Starter Template: It's A Tutorial Too!" />
<link href="{settings.origin}/" rel="canonical" />
</svelte:head>
<span class="text-3xl">HELLO WORLD</span>The .foo > :where(ul > li p, ol > li p) selector causes the same error, and that's just hand-written CSS, not Tailwind-specific.
I would recommend opening an issue on the ElderJS project and including a totally Tailwind-free reproduction using some CSS like I've shared above. With any luck someone on that project will be open to working on a fix in whatever is actually struggling to handle the :where pseudo class — might be Svelte itself ultimately.
Sorry I couldn't do more on this one, hope that at least helps.
TotalLag
What version of @tailwindcss/typography are you using?
0.5.0
What version of Node.js are you using?
v16.13.1
What browser are you using?
MSEdge
What operating system are you using?
Windows 10
Reproduction repository
https://github.com/TotalLag/tailwind-postcss-elderjs-bug
Describe your issue
Not sure if this is a ElderJS bug or Tailwind, but I am initiating Tailwind inside a style tag like so:
<style global lang="postcss">. I do it in this way so that Tailwind goes through the build process every time. Issues arise after upgrading to Tailwind 3.0 AND typography 5.0 with no changes from Elder.When trying to compile with
prosein use:Oddly, when using Tailwind 2.0 and Typography 3, ElderJS compiles just fine and
proseworks.My workaround so far is to take Tailwind out of the
<style global lang="postcss">tag into its own css file and run tailwind in as an npm script prior to build. While this works, it's extra setup steps inside packages.json to get pieces tied.From the error, it looks like an Elder problem, but I'm unsure what changed in Tailwind to not be able to use the global tag inside style.
Filing for posterity.