Make list type selector case sensitive

[simurai]

What are you trying to accomplish?

This is a follow-up to #2305 and closes #2406 by making the list type selector case sensitive.

Example code

<ol type="a">
    <li>Item 1
    <li>Item 2
</ol>

<ol type="A">
    <li>Item 1
    <li>Item 2
</ol>

rendered:

Before	After

What approach did you choose and why?

The problem was that the ol[type='A'] selector overrides the ol[type='a'] since it comes after in the source order.

css/src/markdown/lists.scss

Lines 17 to 23 in e631273

	ol[type='a'] {
	list-style-type: lower-alpha;
	}
	ol[type='A'] {
	list-style-type: upper-alpha;
	}

Adding s to the selector (ol[type='A' s]) makes it case sensitive, so the order doesn't matter anymore. Used this 👀 Codepen to test. Note that MDN says the case-sensitive modifier (s) is not widely supported yet, but tested in Chrome, Edge, Firefox, Safari and they all seem to work. Maybe the MDN table is just not updated yet? 🤔

What should reviewers focus on?

I was wondering why we even need these styles and couldn't just use the browser default. But I assume they are needed because we have some opinionated way when nesting lists:

css/src/base/typography-base.scss

Lines 49 to 59 in e631273

	ol ol,
	ul ol {
	list-style-type: lower-roman;
	}
	ul ul ol,
	ul ol ol,
	ol ul ol,
	ol ol ol {
	list-style-type: lower-alpha;
	}

Can these changes ship as is?

• Yes, this PR does not depend on additional changes. 🚢

[changeset-bot]

🦋 Changeset detected

Latest commit: de8ff0a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR