fix: support value !important;
#289
Conversation
Pull Request Test Coverage Report for Build 0fe902e46c8f0c4f8fb719f2593a0295c729c11d-PR-289
💛 - Coveralls |
SukkaW
force-pushed
the
prefix-position-important
branch
from
82fccf7
to
375a729
Compare
SukkaW
force-pushed
the
prefix-position-important
branch
from
375a729
to
f3c9f7e
Compare
| // (s)ticky? | ||
| if (charat(value, length + 1) !== 115) | ||
| break | ||
| // stick(y)? | ||
| if (charat(value, length + 6) === 121) | ||
| return replace(value, ':', ':' + WEBKIT) + value | ||
| break | ||
| // display: (flex|inline-flex|grid|inline-grid) | ||
| case 6444: | ||
| switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) { | ||
| // stic(k)y | ||
| case 107: | ||
| return replace(value, ':', ':' + WEBKIT) + value |
There was a problem hiding this comment.
Instead of letting position: sticky fallthrough to display and handle it there, the change now handles it in position directly, and either break or return the prefixed to stop it from being fallthrough.
Use stick(y) instead of (s)ticky to handle position: static properly.
| // (inline-)?fle(x) | ||
| case 120: | ||
| return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value |
There was a problem hiding this comment.
display:(f)lex
display:(f)low
display:f(l)ex
display:f(l)ow
display:b(l)ock
display:gr(i)d
display:in(i)tial
So the fourth letter is being used.
There was a problem hiding this comment.
Related test cases have been added.
| @@ -1,9 +1,14 @@ | |||
| import {compile, serialize, stringify, middleware, prefixer, prefix} from "../index.js" | |||
|
|
|||
| const globalCssValues = ['inherit', 'initial', 'unset', 'revert', 'revert-layer'] | |||
There was a problem hiding this comment.
https://github.com/thysultan/stylis/pull/289/files#r854961406:
display:gr(i)d display:in(i)tial
There was a problem hiding this comment.
Can inline it in the single test case.
There was a problem hiding this comment.
@thysultan globalCssValues is being used twice (That's why I extracted it in the first place). One for display and one for position. And in the future PR I will add more test cases related with it.
|
As always, thanks: published 4.1.1 with both of these. |
Fix an edge case that
position:sticky!importantcan be prefixed whileposition:sticky !important(a white space before!important) can not.