Preserve type attribute of the ol element

[neupauer]

This solution preserves the type attribute of the ol element.

Due to css case-insensitivity I came up with a solution like this:

'ol[type=A]': {
  '--list-counter-style': 'upper-alpha',
},
'ol[type=a]': {
  '--list-counter-style': 'lower-alpha',
},
'ol[type=A s]': {
  '--list-counter-style': 'upper-alpha',
},
'ol[type=a s]': {
  '--list-counter-style': 'lower-alpha',
},
'ol[type=I]': {
  '--list-counter-style': 'upper-roman',
},
'ol[type=i]': {
  '--list-counter-style': 'lower-roman',
},
'ol[type=I s]': {
  '--list-counter-style': 'upper-roman',
},
'ol[type=i s]': {
  '--list-counter-style': 'lower-roman',
},
'ol[type=1]': {
  '--list-counter-style': 'decimal',
}

Browsers, that supports case-sensitive modifier in attribute selector (Firefox) will use:

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

so this will behave correctly:

<ol type="a"></ol>
<ol type="A"></ol>

Browsers, that does not supports case-sensitive modifier in attribute selector, but support case-sensitivity will use:

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

And at last browsers, that does not supports case-sensitivity will use the last selector:

'ol[type=a]': {
  '--list-counter-style': 'lower-alpha',
},

Similar for type="i" and type="I".

Links:
W3C | Selectors | Case-sensitivity
MDN | Attribute selectors

Resolve #70

[drdogbot7]

Is this method actually working for people? It seems like it ought to, but it doesn't work for me when I test it.

https://codepen.io/drdogbot7/pen/QWKzvpE

Chrome and Firefox both ignore the 's' rules, and treat the others as case-insensitive.

Maybe it comes down to this, which is unfortunately a bit vague.

Note: Some document models normalize case-insensitive attribute values at parse time such that case-sensitive matching is impossible. Case-sensitive matching via s flags is only possible in systems that preserve the original case.
https://drafts.csswg.org/selectors-4/#attribute-case

[neupauer]

Unfortunately, the s modifier does not work in all browsers. It should work in Firefox from version 66 see MDN - Browser compatibility, Chrome (Edge) has a bug 1041095.

Chrome and Firefox both ignore the 's' rules, and treat the others as case-insensitive.

Firefox worked fine when I tested it( Firefox on MacOS v83.0 )

[drdogbot7]

Ok, you're right, it does work in the latest Firefox. Presumably Chrome will implement at some point.

[neupauer]

Hi @drdogbot7 I found a bug, why it was not working in Firefox for you. This PR #126 introduce little bug, should be fixed in PR #137. I haven't seen it before because I used my own styles in my project.