-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Fork Stylis prefixer * Create long-pianos-swim.md * Create short-pianos-swim.md * Update .changeset/long-pianos-swim.md
- Loading branch information
Showing
9 changed files
with
360 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
--- | ||
--- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@emotion/cache": patch | ||
--- | ||
|
||
An edge case issue with some specific CSS variables being treated as prefixable declarations got fixed by updating the underlying parser ([stylis](https://github.com/thysultan/stylis)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,340 @@ | ||
/* eslint-disable no-fallthrough */ | ||
/* eslint-disable eqeqeq */ | ||
import { | ||
charat, | ||
combine, | ||
copy, | ||
DECLARATION, | ||
hash, | ||
indexof, | ||
KEYFRAMES, | ||
match, | ||
MOZ, | ||
MS, | ||
replace, | ||
RULESET, | ||
serialize, | ||
strlen, | ||
WEBKIT | ||
} from 'stylis' | ||
|
||
// this is a copy of stylis@4.0.13 prefixer, the latter version introduced grid prefixing which we don't want | ||
|
||
function prefix(value, length) { | ||
switch (hash(value, length)) { | ||
// color-adjust | ||
case 5103: | ||
return WEBKIT + 'print-' + value + value | ||
// animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function) | ||
case 5737: | ||
case 4201: | ||
case 3177: | ||
case 3433: | ||
case 1641: | ||
case 4457: | ||
case 2921: | ||
// text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break | ||
case 5572: | ||
case 6356: | ||
case 5844: | ||
case 3191: | ||
case 6645: | ||
case 3005: | ||
// mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite, | ||
case 6391: | ||
case 5879: | ||
case 5623: | ||
case 6135: | ||
case 4599: | ||
case 4855: | ||
// background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width) | ||
case 4215: | ||
case 6389: | ||
case 5109: | ||
case 5365: | ||
case 5621: | ||
case 3829: | ||
return WEBKIT + value + value | ||
// appearance, user-select, transform, hyphens, text-size-adjust | ||
case 5349: | ||
case 4246: | ||
case 4810: | ||
case 6968: | ||
case 2756: | ||
return WEBKIT + value + MOZ + value + MS + value + value | ||
// flex, flex-direction | ||
case 6828: | ||
case 4268: | ||
return WEBKIT + value + MS + value + value | ||
// order | ||
case 6165: | ||
return WEBKIT + value + MS + 'flex-' + value + value | ||
// align-items | ||
case 5187: | ||
return ( | ||
WEBKIT + | ||
value + | ||
replace( | ||
value, | ||
/(\w+).+(:[^]+)/, | ||
WEBKIT + 'box-$1$2' + MS + 'flex-$1$2' | ||
) + | ||
value | ||
) | ||
// align-self | ||
case 5443: | ||
return ( | ||
WEBKIT + | ||
value + | ||
MS + | ||
'flex-item-' + | ||
replace(value, /flex-|-self/, '') + | ||
value | ||
) | ||
// align-content | ||
case 4675: | ||
return ( | ||
WEBKIT + | ||
value + | ||
MS + | ||
'flex-line-pack' + | ||
replace(value, /align-content|flex-|-self/, '') + | ||
value | ||
) | ||
// flex-shrink | ||
case 5548: | ||
return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value | ||
// flex-basis | ||
case 5292: | ||
return ( | ||
WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value | ||
) | ||
// flex-grow | ||
case 6060: | ||
return ( | ||
WEBKIT + | ||
'box-' + | ||
replace(value, '-grow', '') + | ||
WEBKIT + | ||
value + | ||
MS + | ||
replace(value, 'grow', 'positive') + | ||
value | ||
) | ||
// transition | ||
case 4554: | ||
return ( | ||
WEBKIT + | ||
replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + | ||
value | ||
) | ||
// cursor | ||
case 6187: | ||
return ( | ||
replace( | ||
replace( | ||
replace(value, /(zoom-|grab)/, WEBKIT + '$1'), | ||
/(image-set)/, | ||
WEBKIT + '$1' | ||
), | ||
value, | ||
'' | ||
) + value | ||
) | ||
// background, background-image | ||
case 5495: | ||
case 3959: | ||
return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1') | ||
// justify-content | ||
case 4968: | ||
return ( | ||
replace( | ||
replace( | ||
value, | ||
/(.+:)(flex-)?(.*)/, | ||
WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3' | ||
), | ||
/s.+-b[^;]+/, | ||
'justify' | ||
) + | ||
WEBKIT + | ||
value + | ||
value | ||
) | ||
// (margin|padding)-inline-(start|end) | ||
case 4095: | ||
case 3583: | ||
case 4068: | ||
case 2532: | ||
return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value | ||
// (min|max)?(width|height|inline-size|block-size) | ||
case 8116: | ||
case 7059: | ||
case 5753: | ||
case 5535: | ||
case 5445: | ||
case 5701: | ||
case 4933: | ||
case 4677: | ||
case 5533: | ||
case 5789: | ||
case 5021: | ||
case 4765: | ||
// stretch, max-content, min-content, fill-available | ||
if (strlen(value) - 1 - length > 6) | ||
switch (charat(value, length + 1)) { | ||
// (m)ax-content, (m)in-content | ||
case 109: | ||
// - | ||
if (charat(value, length + 4) !== 45) break | ||
// (f)ill-available, (f)it-content | ||
case 102: | ||
return ( | ||
replace( | ||
value, | ||
/(.+:)(.+)-([^]+)/, | ||
'$1' + | ||
WEBKIT + | ||
'$2-$3' + | ||
'$1' + | ||
MOZ + | ||
(charat(value, length + 3) == 108 ? '$3' : '$2-$3') | ||
) + value | ||
) | ||
// (s)tretch | ||
case 115: | ||
return ~indexof(value, 'stretch') | ||
? prefix(replace(value, 'stretch', 'fill-available'), length) + | ||
value | ||
: value | ||
} | ||
break | ||
// position: sticky | ||
case 4949: | ||
// (s)ticky? | ||
if (charat(value, length + 1) !== 115) break | ||
// display: (flex|inline-flex) | ||
case 6444: | ||
switch ( | ||
charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10)) | ||
) { | ||
// stic(k)y | ||
case 107: | ||
return replace(value, ':', ':' + WEBKIT) + value | ||
// (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 | ||
) | ||
} | ||
break | ||
// writing-mode | ||
case 5936: | ||
switch (charat(value, length + 11)) { | ||
// vertical-l(r) | ||
case 114: | ||
return ( | ||
WEBKIT + | ||
value + | ||
MS + | ||
replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + | ||
value | ||
) | ||
// vertical-r(l) | ||
case 108: | ||
return ( | ||
WEBKIT + | ||
value + | ||
MS + | ||
replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + | ||
value | ||
) | ||
// horizontal(-)tb | ||
case 45: | ||
return ( | ||
WEBKIT + | ||
value + | ||
MS + | ||
replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + | ||
value | ||
) | ||
} | ||
|
||
return WEBKIT + value + MS + value + value | ||
} | ||
|
||
return value | ||
} | ||
|
||
export let prefixer = (element, index, children, callback) => { | ||
if (element.length > -1) | ||
if (!element.return) | ||
switch (element.type) { | ||
case DECLARATION: | ||
element.return = prefix(element.value, element.length) | ||
break | ||
case KEYFRAMES: | ||
return serialize( | ||
[ | ||
copy(element, { | ||
value: replace(element.value, '@', '@' + WEBKIT) | ||
}) | ||
], | ||
callback | ||
) | ||
case RULESET: | ||
if (element.length) | ||
return combine(element.props, function (value) { | ||
switch (match(value, /(::plac\w+|:read-\w+)/)) { | ||
// :read-(only|write) | ||
case ':read-only': | ||
case ':read-write': | ||
return serialize( | ||
[ | ||
copy(element, { | ||
props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')] | ||
}) | ||
], | ||
callback | ||
) | ||
// :placeholder | ||
case '::placeholder': | ||
return serialize( | ||
[ | ||
copy(element, { | ||
props: [ | ||
replace( | ||
value, | ||
/:(plac\w+)/, | ||
':' + WEBKIT + 'input-$1' | ||
) | ||
] | ||
}), | ||
copy(element, { | ||
props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')] | ||
}), | ||
copy(element, { | ||
props: [replace(value, /:(plac\w+)/, MS + 'input-$1')] | ||
}) | ||
], | ||
callback | ||
) | ||
} | ||
|
||
return '' | ||
}) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.