Skip to content

Instantly share code, notes, and snippets.

@OlehDutchenko

OlehDutchenko/stylis-autoprefixer.css

Last active January 5, 2022 15:54
Show Gist options
  • Save OlehDutchenko/db254cc777ba475f8b9831119b666bad to your computer and use it in GitHub Desktop.
Save OlehDutchenko/db254cc777ba475f8b9831119b666bad to your computer and use it in GitHub Desktop.
Download ZIP
Stylis prefixer check-list sources
Raw
stylis-autoprefixer.css
.example {
/* color-adjust */
color-adjust: economy;
color-adjust: exact;
/* animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function) */
animation: 3s ease-in 1s 2 reverse both paused slidein;
animation-delay: 2.1s, 480ms;
animation-duration: 2.1s, 480ms;
animation-name: lorem;
animation-direction: ease-in;
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.4;
animation-iteration-count: 2, 0, infinite;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break */
text-decoration: lorem;
filter: lorem;
clip-path: lorem;
backface-visibility: lorem;
column: lorem;
box-decoration-brea: lorem;
/* mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite */
mask: lorem;
mask-image: lorem;
mask-mode: lorem;
mask-clip: lorem;
mask-size: lorem;
mask-repeat: lorem;
mask-position: lorem;
mask-composite: lorem;
/* background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width) */
background-clip: lorem;
columns: lorem;
column-count: lorem;
column-fill: lorem;
column-gap: lorem;
column-rule: lorem;
column-rule-color: lorem;
column-rule-style: lorem;
column-rule-width: lorem;
column-span: lorem;
column-width: lorem;
/* appearance, user-select, transform, hyphens, text-size-adjust */
appearance: lorem;
user-select: lorem;
transform: lorem;
hyphens: lorem;
text-size-adjust: lorem;
/* flex, flex-direction */
flex: 1 1 2;
flex-direction: row;
/* order */
order: 2;
/* align-items */
align-items: safe center;
/* align-self */
align-self: safe center;
/* align-content */
align-content: safe center;
/* flex-shrink */
flex-shrink: 2;
/* flex-basis */
flex-basis: 50%;
/* flex-grow */
order: 1;
/* transition */
transition: transform 0.2s ease;
/* cursor */
cursor: context-menu;
/* background */
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
background-image: image-set(url("small-balloons.jpg") 1x, url("large-balloons.jpg") 2x);
/* justify-content */
justify-content: start;
/* (margin|padding)-inline-(start|end) */
margin-inline-start: 1rem;
margin-inline-end: 1rem;
padding-inline-start: 1rem;
padding-inline-end: 1rem;
/* (min|max)?(width|height|inline-size|block-size) */
width: max-content;
min-width: max-content;
max-width: max-content;
width: fit-content(20em);
min-width: fit-content(20em);
max-width: fit-content(20em);
height: max-content;
min-height: max-content;
max-height: max-content;
height: fit-content(20em);
min-height: fit-content(20em);
max-height: fit-content(20em);
inline-size: max-content;
min-inline-size: max-content;
max-inline-size: max-content;
inline-size: fit-content(20em);
min-inline-size: fit-content(20em);
max-inline-size: fit-content(20em);
inline-size: stretch;
min-inline-size: stretch;
max-inline-size: stretch;
block-size: max-content;
min-block-size: max-content;
max-block-size: max-content;
block-size: fit-content(20em);
min-block-size: fit-content(20em);
max-block-size: fit-content(20em);
block-size: stretch;
min-block-size: stretch;
max-block-size: stretch;
/* position: sticky */
position: sticky;
/* display: (flex|inline-flex) */
display: flex;
display: inline-flex;
/* writing-mode */
writing-mode: horizontal-tb;
writing-mode: horizontal-bt;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
}
Raw
stylis-prefix.ts
import { charat, hash, indexof, MOZ, MS, replace, strlen, WEBKIT } from 'stylis';
/* eslint-disable no-fallthrough */
export default function prefix(value: string, length: number): string {
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:
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
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', WEBKIT + '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;
}
Raw
stylis-prefixer.ts
import { StylisElement, StylisPlugin } from '@emotion/cache';
import { PlainObject } from 'Services/Type';
import { combine, copy, DECLARATION, KEYFRAMES, match, MOZ, MS, replace, RULESET, serialize, WEBKIT } from 'stylis';
import prefix from './prefix';
declare module 'stylis' {
export function copy(root: StylisElement, props: PlainObject): StylisElement;
}
const prefixer: StylisPlugin = (element, index, children, callback) => {
if (element && element.length > -1)
if (!element.return)
switch (element.type) {
case DECLARATION:
element.return = prefix(element.value, element.length);
break;
case KEYFRAMES:
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return serialize([copy(element, { value: replace(element.value, '@', '@' + WEBKIT) })], callback);
case RULESET:
if (element.length)
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return combine(
Array.isArray(element.props) ? element.props : [element.props],
function (value) {
switch (match(value, /(::plac\w+|:read-\w+)/)) {
// :read-(only|write)
case ':read-only':
case ':read-write':
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return serialize(
[
copy(element, {
props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
})
],
callback
);
// :placeholder
case '::placeholder':
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
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 '';
}
);
}
};
export { prefixer as default };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment