Ordered list `type` attribute does not produce correct styling

What version of @tailwindcss/typography are you using?

v0.5.9

What version of Node.js are you using?

v16.14.2

What browser are you using?

Chrome

What operating system are you using?

Ubuntu 22.04

Reproduction repository

https://play.tailwindcss.com/4NJk4QUKdX

Describe your issue

The following prose wrapped markup does not produce the correct styling:

<div class="prose">
  <ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
  <ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

The styling looks as follows at the provided demo link (play.tailwindcss.com):

The correct styling would look as follows (note the upper-alpha list below):

This is because the produced CSS looks something like this (note the order of these CSS definitions in the final generated CSS):

.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

The last one of these definitions wins when displaying the content:

If you try similar code outside of Tailwind, with only this HTML and CSS, you will see the same result.

The definitions can be found from these lines in this repository:

tailwindcss-typography/src/styles.js

Lines 1266 to 1271 in 4c3b76c

    
           'ol[type="A"]': { 
        
             listStyleType: 'upper-alpha', 
        
           }, 
        
           'ol[type="a"]': { 
        
             listStyleType: 'lower-alpha', 
        
           },

The same issue also applies for i and I types, i.e. lower-roman and upper-roman.

Hey! Thank you for your bug report!
Much appreciated! 🙏

This is very odd, and almost seems like a browser bug that exists everywhere. Attribute selectors should be case sensitive by default unless you explicitly provide the i modifier right before the closing bracket: [attribute="value" i].

If the CSS is simplified to just:

.prose ol[type="a"] {
  color: red;
}

.prose ol[type="A"] {
  color: blue;
}

Then all the ol elements will be blue. Flipping the order of the CSS like this:

.prose ol[type="A"] {
  color: blue;
}

.prose ol[type="a"] {
  color: red;
}

Results in all the ol elements to be red.

Your link already works as expected in Firefox, but it does not behave correctly in Safari or Chrome. The funny part is that adding the i modifier for Chrome / Safari doesn't do anything. It also makes it "incorrect" for Firefox (expected). Adding the i counterpart s works in Firefox but not in Chrome / Safari. So I don't know how we could solve this in Tailwind CSS or this @tailwindcss/typography plugin.

That said, it looks like the type on ol elements are a bit special (ref: https://stackoverflow.com/questions/53099708/css-attribute-selector-and-case-sensitivity-with-the-type-attribute-vs-made-u)

I also made a reproduction using the i and s modifiers without using Tailwind at all: https://codesandbox.io/s/peaceful-hamilton-7dgbsh?file=/index.html

Safari	Chrome	Firefox

It looks like the proper fix is to apply the s modifier. However, this will currently break all the other browser that don't implement this yet.

I'm going to close this issue for now and we can revisit this once browsers are caught up more on this behaviour.

Hope this makes sense.

Thanks for the response @RobinMalfait !

I was also investigating this and found out the same, the case sensitive modifier seems to be only supported by Firefox right now 😞
https://caniuse.com/mdn-css_selectors_attribute_case_sensitive_modifier

Anyways, thanks for the investigation. I'll try to think of some workaround/polyfill meanwhile we are waiting for browser development.

	'ol[type="A"]': {
	listStyleType: 'upper-alpha',
	},
	'ol[type="a"]': {
	listStyleType: 'lower-alpha',
	},