How To
Below is a list of properties missing from our current css prefix implementation.
Use ./script compiler-create-prefix [propertyName]
. thanks @ematipico!
This will create:
internal/compiler/transforms/compile/css-handler/prefix/prefixes/[propertyName].ts
internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/[propertyName]/input.css
website/src/docs/css-handler/prefix/[propertyName].md
They should all reference (using a link) at the top of their file (below imports) where the info came from.
Info like: property name, special values, ...
They should export an array of createPrefixVisitor
s and return a prefixCSSProperty
or prefixCSSValue
(covers 99% use case, if not discuss prior).
export default [
createPrefixVisitor({
name: "<PROPERTY NAME>", // <PROPERTY NAME>/<VALUE NAME>
enter(path) {
return prefixCSSValue({
path,
propertyName: "<PROPERTY NAME>",
value: "<VALUE NAME>", // Only for prefixCSSValue
browserFeaturesKey: "<PROPERTY DATA NAME>", // From `caniuse-db`
});
},
}),
// ...
];
Prefixes will automatically be added to the property/value.
If some values/properties have special names (such as -moz-inline-flex
being -moz-inline-box
)
use the rename
argument as show here and here.
Also be sure to test on https://autoprefixer.github.io/ for the same output. Don't forget to set target as > 0%
.
And write tests for them in internal/compiler/transforms/compile/test-fixtures/css-handler/prefix/<PROPERTY NAME>/input.css
Examples
display, transform, transition.
Properties
Any -ms-
(IE) only prefixes are not needed.
Reference: https://github.com/postcss/autoprefixer/blob/main/data/prefixes.js
- [x]
border-radius
and its derivatives @magsout
- [x]
box-shadow
@ajkachnic
- [x]
animation
and its derivatives @magsout
- [x]
transition
and its derivatives @jer3m01
- [x]
transform
@jer3m01
- [x]
box-sizing
@magsout
- [ ]
filter
:gear: @ajkachnic
- [ ]
filter()
Reserved
- [ ]
element()
Reserved
- [x]
backdrop-filter
@magsout
- [x]
multicolumn
and its derivatives @jer3m01
- [x]
user-select
@ktfth
- [x]
display
@jer3m01
- [x]
flex
and its derivatives :gear: @harxki
- [ ]
calc
:gear: @jer3m01
- [x]
background-origin
, background-size
- [x]
background-clip
:gear: @luisgserrano
- [ ]
font
and its derivatives
- [ ]
border-image
:gear: @imskr
- [ ] prefixed with
:
file called pseudo-classes
- [ ] prefixed with
::
file called pseudo-elements
- [x]
hyphens
@ktfth
- [x]
tab-size
@UsamaHameed
- [x]
intrinsic-width
@JustBeYou
- [x]
grid
and its derivatives @UsamaHameed
- [x]
cursor
@ktfth
- [x]
position
@magsout
- [ ]
text-decoration
and its derivatives :gear: @grimxreaper
- [x]
text-size-adjust
@harxki
- [x]
mask
and its derivatives @ktfth
- [x]
clip-path
@dctalbot
- [x]
box-decoration-break
@alewin
- [ ]
object-fit
, object-position
:gear: @imrishabh18
- [x]
shape
and its derivatives @sergeypriakhin
- [x]
text-overflow
@UsamaHameed
- [ ] prefixed with
@
file called at-rules
Reserved
- [x]
text-align-last
@bechir
- [x]
image-rendering
- [x]
*-inline-*
@ktfth
- [x]
*-block-*
@ktfth
- [x]
appearance
@UsamaHameed
- [x]
scroll-snap
and its derivatives @UsamaHameed
- [ ]
flow-into
, flow-from
, region-fragment
- [ ]
list
and its derivatives :gear: @UsamaHameed
- [x]
gradient
and its derivatives, single file called gradient
:gear: @ktfth
- [x]
writing-mode
@UsamaHameed
- [x]
text-emphasis
and its derivatives @ktfth
- [ ]
text-spacing
:gear: @thescripted
- [ ]
unicode-bidi
- [x]
color-adjust
@thescripted
- [x]
text-orientation
@UsamaHameed
- [x]
image-set
@ktfth
Reserved means a rule isn't easy to implement and is reserved to be worked on by the team.
A ⚙️ indicates they are being worked on.
A checkmark indicates an open PR.
If any are missing, don't hesitate to comment!
& Thanks for all contributions! 💛
(note to myself) once complete, recheck the reference for any missed ones & reduce test sizes
good first issue umbrella L-CSS A-Compiler