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

[foca]

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 🤔

[foca]

For anyone else that stumbles into this, the workaround I've found is to add this to my CSS file:

::marker {
  color: theme(colors.slate.500);
}

But ideally this should be handled from the HTML to make it easier to manage together with the other styles.

[adamwathan]

Looked at this quickly, it seems like the thing that breaks it is the variable, not the fact that there's an opacity value set:

https://jsfiddle.net/oyv60qhd/1/

So you can work around this by disabling all of our color opacity utilities like this:

// tailwind.config.js
module.exports = {
  // ...
  corePlugins: {
    textOpacity: false,
    backgroundOpacity: false,
    divideOpacity: false,
    borderOpacity: false,
    placeholderOpacity: false,
  },
}

Those will end up being disabled by default in v4.

The whole reason we generate CSS like this:

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

...is so you can combine the color with the corresponding opacity utility, for example:

<li class="marker:text-[red] marker:text-opacity-50">

...but generally we encourage the opacity modifier now, which doesn't require the variable but we still have to output it for backwards compatibility reasons (unless those opacity plugins are disabled).

Will leave this open at least for now though so I remember to discuss it with the team in case there's an easy way to just make this work that isn't a breaking change.

[brandonmcconnell]

I've submitted a WebKit bug report for this: WebKit Bug #241576

[thecrypticace]

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

[thecrypticace]

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.

[brandonmcconnell]

That makes sense! Haha yes, I just saw mine got (appropriately) flagged as a dupe of yours.

Hope they get this fixed up soon 👏🏼

[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 :D

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.