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

Fork Stylis prefixer #2890

Merged
merged 4 commits into from Oct 27, 2022
Merged

Fork Stylis prefixer #2890

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f8e94d3
Fork Stylis prefixer
Andarist Sep 12, 2022
381798b
Create long-pianos-swim.md
Andarist Oct 27, 2022
d1d6fcd
Create short-pianos-swim.md
Andarist Oct 27, 2022
e7bffcb
Update .changeset/long-pianos-swim.md
Andarist Oct 27, 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
9 changes: 9 additions & 0 deletions .changeset/long-pianos-swim.md
View file
Open in desktop
@@ -0,0 +1,9 @@
---
"@emotion/babel-plugin": patch
"@emotion/cache": patch
"@emotion/css-prettifier": patch
"@emotion/css": patch
"@emotion/jest": patch
---

Updated the underlying parser ([stylis](https://github.com/thysultan/stylis)).
Andarist marked this conversation as resolved.
Show resolved Hide resolved
5 changes: 5 additions & 0 deletions .changeset/short-pianos-swim.md
View file
Open in desktop
@@ -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)).
2 changes: 1 addition & 1 deletion packages/babel-plugin/package.json
View file
Open in desktop
Expand Up @@ -28,7 +28,7 @@
"escape-string-regexp": "^4.0.0",
"find-root": "^1.1.0",
"source-map": "^0.5.7",
"stylis": "4.0.13"
"stylis": "4.1.2"
},
"peerDependencies": {
"@babel/core": "^7.0.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/cache/package.json
View file
Open in desktop
Expand Up @@ -29,7 +29,7 @@
"@emotion/sheet": "^1.2.0",
"@emotion/utils": "^1.2.0",
"@emotion/weak-memoize": "^0.3.0",
"stylis": "4.0.13"
"stylis": "4.1.2"
},
"devDependencies": {
"@definitelytyped/dtslint": "0.0.112",
Expand Down
2 changes: 1 addition & 1 deletion packages/cache/src/index.js
View file
Open in desktop
Expand Up @@ -7,7 +7,6 @@ import {
middleware,
rulesheet,
stringify,
prefixer,
COMMENT
} from 'stylis'
import weakMemoize from '@emotion/weak-memoize'
Expand All @@ -18,6 +17,7 @@ import {
createUnsafeSelectorsAlarm,
incorrectImportAlarm
} from './stylis-plugins'
import { prefixer } from './prefixer'
import type { StylisPlugin } from './types'

let isBrowser = typeof document !== 'undefined'
Expand Down
340 changes: 340 additions & 0 deletions packages/cache/src/prefixer.js
View file
Open in desktop
@@ -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 ''
})
}
}
2 changes: 1 addition & 1 deletion packages/css-prettifier/package.json
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@
"repository": "https://github.com/emotion-js/emotion/tree/main/packages/css-prettifier",
"dependencies": {
"@emotion/memoize": "^0.8.0",
"stylis": "4.0.13"
"stylis": "4.1.2"
},
"publishConfig": {
"access": "public"
Expand Down