Tools: ☂️ CSS Prefix: Missing Properties

[jer3m01]

How To

Below is a list of properties missing from our current css prefix implementation.

Use ./scripts 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 createPrefixVisitors 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
• [x] backdrop-filter @magsout
• [x] multicolumn and its derivatives @jer3m01
• [ ] user-select
• [x] display @jer3m01
• [ ] flex and its derivatives
• [ ] calc :gear: @jer3m01
• [ ] background-origin, background-size
• [ ] background-clip
• [ ] font and its derivatives
• [ ] border-image
• [ ] prefixed with : file called pseudo-classes
• [ ] prefixed with :: file called pseudo-elements
• [ ] hyphens
• [ ] tab-size
• [ ] width and its derivatives
• [ ] height and its derivatives
• [ ] size and its derivatives
• [ ] grid and its derivatives
• [ ] cursor
• [x] position @magsout
• [ ] touch-action
• [ ] text-decoration and its derivatives
• [ ] text-size-adjust
• [ ] mask and its derivatives
• [ ] clip-path
• [ ] box-decoration-break
• [ ] object-fit, object-position
• [ ] shape and its derivatives
• [ ] text-overflow
• [ ] prefixed with @ file called at-rules
• [ ] text-align-last
• [ ] image-rendering
• [ ] border-inline-start, border-inline-end
• [ ] margin-inline-start, margin-inline-end
• [ ] padding-inline-start, padding-inline-end
• [ ] border-block-start, border-block-end
• [ ] margin-block-start, margin-block-end
• [ ] padding-block-start, padding-block-end
• [ ] appearance
• [ ] scroll-snap and its derivatives
• [ ] flow-into, flow-from, region-fragment
• [ ] list and its derivatives
• [ ] content
• [ ] gradient and its derivatives, single file called gradient
• [ ] writing-mode
• [ ] text-emphasis and its derivatives
• [ ] text-spacing
• [ ] unicode-bidi
• [ ] overscroll-behavior
• [ ] color-adjust
• [ ] text-orientation

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

[ajkachnic]

Currently working on supporting the box-shadow property

[ematipico]

We should create a script file that creates and updates the prefix visitors. Like we do for create-lint-rule. I will take care of it.

[ajkachnic]

I'm currently working box-shadow, and to support the browser prefixes, I'd need to do something like this, right?

export default ["box-shadow", "-webkit-box-shadow", "-moz-box-shadow"].map((
    value
) => {
    createPrefixVisitor({
        name: "box-shadow",
        enter(path) {
            return prefixCSSProperty({
                path,
                propertyName: value,
                browserFeaturesKey: "css-boxshadow",
            });
        }
    })
})

Or is there a better way to handle this using rename?

[jer3m01]

["box-shadow", "-webkit-box-shadow", "-moz-box-shadow"]

is not required, prefixes are automatically added.
Just return a single createPrefixVisitor (same code as our discussion on discord).

I'll update the post to make it clearer.

Or is there a better way to handle this using rename?

rename is only used in the case that a specific browser uses a custom name instead of the generic one.

[ajkachnic]

Ah alright, thanks for the help!

[ajkachnic]

How should I handle running the tests while #1424 isn't merged? Because it just generates the exact same output at the moment because the new prefix hasn't been added to the main file.

Would it make sense to add it manually (and update the hash), or just wait until it's merged?

[jer3m01]

It's just been merged 😄.

[ajkachnic]

I've opened a pull request with box-shadow support!

[ajkachnic]

I can work on filter. Since I know the process a lot more now, I should be able to add it fairly quickly

[magsout]

i'm working on the backface-visibility property. is that ok for you?

edit: hum, it's already part of https://github.com/rome/tools/blob/main/internal/compiler/transforms/compile/css-handler/prefix/prefixes/transform.ts#L27

so not need to do something more?

[magsout]

I opened a PR with position support, hope it's fine ;)

[jer3m01]

edit: hum, it's already part of https://github.com/rome/tools/blob/main/internal/compiler/transforms/compile/css-handler/prefix/prefixes/transform.ts#L27

so not need to do something more?

Indeed thanks for the catch, I'll remove it from the list.

I opened a PR with position support, hope it's fine ;)

Great thanks!

[magsout]

I've opened a PR with box-sizing support

[magsout]

@jer3m01 @ematipico Do you mind if I make a pr with multiple properties?

[jer3m01]

@jer3m01 @ematipico Do you mind if I make a pr with multiple properties?

No problem go ahead! As long as you include them clearly in the description of the PR.