Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: support value !important; #289

Merged
merged 5 commits into from Apr 23, 2022
Merged

fix: support value !important; #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0c39d2b
fix: support `value !important;`
SukkaW Apr 21, 2022
e54905e
test: stricter testing
SukkaW Apr 21, 2022
f3c9f7e
refactor/fix: simplify logic
SukkaW Apr 21, 2022
505c9f8
test: cover all `display`
SukkaW Apr 22, 2022
368ba4b
small nit optimisation
thysultan Apr 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 10 additions & 12 deletions src/Prefixer.js
View file
Open in desktop
Expand Up @@ -105,20 +105,18 @@ export function prefix (value, length, children) {
return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function (_, a, b, c, d, e, f) { return (MS + a + ':' + b + f) + (c ? (MS + a + '-span:' + (d ? e : +e - +b)) + f : '') + value })
// position: sticky
case 4949:
// (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
Comment on lines -108 to -116
Copy link
Contributor Author

@SukkaW SukkaW Apr 21, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-)?fl(e)x
case 101:
return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value
// (inline-)?grid
case 105:
switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
// (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
Comment on lines +115 to +117
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Related test cases have been added.

// (inline-)?gri(d)
case 100:
return replace(value, ':', ':' + MS) + value
}
break
Expand Down
17 changes: 16 additions & 1 deletion test/Prefixer.js
View file
Open in desktop
@@ -1,9 +1,14 @@
import {compile, serialize, stringify, middleware, prefixer, prefix} from "../index.js"

const globalCssValues = ['inherit', 'initial', 'unset', 'revert', 'revert-layer']
Copy link
Contributor Author

@SukkaW SukkaW Apr 21, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/thysultan/stylis/pull/289/files#r854961406:

display:gr(i)d
display:in(i)tial

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can inline it in the single test case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.


describe('Prefixer', () => {
test('flex-box', () => {
expect(prefix(`display:block;`, 7)).to.equal(['display:block;'].join())
globalCssValues.concat(['block', 'inline', 'inline-block', 'flow-root', 'none', 'contents', 'table', 'table-row', 'list-item']).forEach(v => expect(prefix(`display:${v};`, 7)).to.equal([`display:${v};`].join()))

expect(prefix(`display:flex!important;`, 7)).to.equal([`display:-webkit-box!important;`, `display:-webkit-flex!important;`, `display:-ms-flexbox!important;`, `display:flex!important;`].join(''))
expect(prefix(`display:flex !important;`, 7)).to.equal([`display:-webkit-box !important;`, `display:-webkit-flex !important;`, `display:-ms-flexbox !important;`, `display:flex !important;`].join(''))
expect(prefix(`display:flex !important;`, 7)).to.equal([`display:-webkit-box !important;`, `display:-webkit-flex !important;`, `display:-ms-flexbox !important;`, `display:flex !important;`].join(''))
expect(prefix(`display:inline-flex;`, 7)).to.equal([`display:-webkit-inline-box;`, `display:-webkit-inline-flex;`, `display:-ms-inline-flexbox;`, `display:inline-flex;`].join(''))
expect(prefix(`flex:inherit;`, 4)).to.equal([`-webkit-flex:inherit;`, `-ms-flex:inherit;`, `flex:inherit;`].join(''))
expect(prefix(`flex-grow:none;`, 9)).to.equal([`-webkit-box-flex:none;`, `-webkit-flex-grow:none;`, `-ms-flex-positive:none;`, `flex-grow:none;`].join(''))
Expand Down Expand Up @@ -104,7 +109,15 @@ describe('Prefixer', () => {

test('position', () => {
expect(prefix(`position:relative;`, 8)).to.equal([`position:relative;`].join(''))
expect(prefix(`position:static;`, 8)).to.equal([`position:static;`].join(''))
expect(prefix(`position:fixed;`, 8)).to.equal([`position:fixed;`].join(''))
expect(prefix(`position:absolute;`, 8)).to.equal([`position:absolute;`].join(''))
globalCssValues.forEach(v => expect(prefix(`position:${v};`, 8)).to.equal([`position:${v};`].join()))

expect(prefix(`position:sticky;`, 8)).to.equal([`position:-webkit-sticky;`, `position:sticky;`].join(''))
expect(prefix(`position:sticky!important;`, 8)).to.equal([`position:-webkit-sticky!important;`, `position:sticky!important;`].join(''))
expect(prefix(`position:sticky !important;`, 8)).to.equal([`position:-webkit-sticky !important;`, `position:sticky !important;`].join(''))
expect(prefix(`position:sticky !important;`, 8)).to.equal([`position:-webkit-sticky !important;`, `position:sticky !important;`].join(''))
})

test('color-adjust', () => {
Expand Down Expand Up @@ -191,6 +204,8 @@ describe('Prefixer', () => {
test('grid', () => {
expect(prefix('display:grid;', 7)).to.equal([`display:-ms-grid;`, `display:grid;`].join(''))
expect(prefix('display:inline-grid;', 7)).to.equal([`display:-ms-inline-grid;`, `display:inline-grid;`].join(''))
expect(prefix('display:inline-grid!important;', 7)).to.equal([`display:-ms-inline-grid!important;`, `display:inline-grid!important;`].join(''))
expect(prefix('display:inline-grid !important;', 7)).to.equal([`display:-ms-inline-grid !important;`, `display:inline-grid !important;`].join(''))
expect(prefix(`align-self:value;`, 10)).to.equal([`-webkit-align-self:value;`, `-ms-flex-item-align:value;`, `-ms-grid-row-align:value;`, `align-self:value;`].join(''))
expect(prefix(`align-self:safe center;`, 10)).to.equal([`-webkit-align-self:safe center;`, `-ms-flex-item-align:safe center;`, `-ms-grid-row-align:safe center;`, `align-self:safe center;`].join(''))
expect(prefix('align-self:stretch;', 10)).to.equal([`-webkit-align-self:stretch;`, `-ms-flex-item-align:stretch;`, `-ms-grid-row-align:stretch;`, `align-self:stretch;`].join(''))
Expand Down