Dealing with non-standard and experimental properties

[JesalR]

Hi,

I'm writing a codemod to change a bunch of static styled components into Vanilla Extract styles.
I'm bumping up against a few issues with certain properties, however, as they aren't recognized as a valid argument for the style function by TypeScript.

For example;

• size (https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size) is not accepted
• -webkit-app-region, which is a property used in electron apps to change drag behaviour.

How are these properties expected to be handled by VE?
Also, is there an existing codemod out there to convert CSS strings to VE StyleRules? Writing my own is proving to be a game of cat and mouse.

Thanks for any help

[bwyx]

since it's a typings issue, you could assert the type like this:

import { style, ComplexStyleRule } from '@vanilla-extract/css'

const unsupportedStyleProperty = style({
    size: 60,
    WebkitAppRegion: 'no-drag',
    orAnyCustomProp: 'vanilla-extract'
} as ComplexStyleRule)

note that currently, VE is using CSSType for its CSS type definition.

Hopefully, they'll support new CSS property like size ASAP, or you could open a PR for it.

[JesalR]

Thanks, that worked. In the end I went with a module augmentation like this:

css.d.ts

import '@vanilla-extract/css';
import type { PropertiesFallback } from 'csstype';

declare module '@vanilla-extract/css' {
  interface CSSProperties extends PropertiesFallback<number | (string & {})> {
    // Add a missing property
    size?: number;

    // Add a CSS Custom Property
    WebkitAppRegion?: 'drag' | 'no-drag';
  }
}

[gyfchong]

Would you be able to share the codemod? Or some simple examples to get us started? Looking to do the same thing.

I have a basic understanding of ASTs but hit a bit of a wall trying to mod styled template literals :(