Safari ignores alpha channel in colors in `::marker`, which makes styling them with Tailwind impossible

What version of Tailwind CSS are you using?

v3.1.2

What build tool (or framework if it abstracts the build tool) are you using?

`postcss`

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss": {},
    "autoprefixer": {},
  }
}

What version of Node.js are you using?

v12.22.9

What browser are you using?

Safari 15.5 on macOS 12.4

Reproduction URL

https://play.tailwindcss.com/iea3Szbz1t

Describe your issue

On Safari, all of the following examples work correctly:

::marker {
  color: red;
}
::marker {
  color: #f00;
}
::marker {
  color: rgb(255 0 0);
}

But these are completely ignored:

::marker {
  color: rgba(255 0 0 50);
}
::marker {
  color: rgb(255 0 0 / 50);
}

I discovered this while playing with arbitrary variants, trying to lighten the ordinals in an ordered list. When that didn’t work, I thought, “that’s fine, I can just use an arbitrary value!” but turns out that [&::marker]:text-[#ff0000] gets translated to

.\[\&\:\:marker\]\:text-\[\#ff0000\]::marker {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity));
}

Which makes it impossible to use Tailwind to style marker colors.

I realize this is more of a Safari bug than a Tailwind bug, but I’m curious as to why you’re translating a hardcoded [red] into an RGBA value, and whether that’s something that could be addressed to allow styling list markers with Tailwind 🤔

[thecrypticace]

hah I already did that earlier today: https://bugs.webkit.org/show_bug.cgi?id=241566 — in any case appreciate it!

[foca]

So you can work around this by disabling all of our color opacity utilities like this: … Those will end up being disabled by default in v4.

Oh, thanks! That’s a better workaround 😄

The problem is that custom properties are not supported because allowed properties in ::marker are whitelisted in webkit (correct): https://github.com/WebKit/WebKit/blob/fdc6c5fc1872fab62106b209c8a6a5aaa00730be/Source/WebCore/style/PropertyAllowlist.cpp

but they don’t include custom properties (incorrect). The spec doesn’t mention them though so it’s also possibly a CSS spec issue.

Nice find. Thanks! That makes sense.