@stylable/core/src/native-reserved-lists.ts

CSS for Components

// MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
export const nativePseudoClasses = [
    'active',
    'any',
    'any-link',
    'checked',
    'indeterminate',
    'default',
    'defined',
    'dir',
    'disabled',
    'empty',
    'enabled',
    'first',
    'first-child',
    'first-of-type',
    'fullscreen',
    'focus',
    'focus-within',
    'focus-visible',
    'has',
    'hover',
    'indeterminate',
    'in-range',
    'invalid',
    'is',
    'lang',
    'last-child',
    'last-of-type',
    'left',
    'link',
    'not',
    'nth-child',
    'nth-last-child',
    'nth-last-of-type',
    'nth-of-type',
    'only-child',
    'only-of-type',
    'optional',
    'out-of-range',
    'placeholder-shown',
    'read-only',
    'read-write',
    'required',
    'right',
    'root',
    'scope',
    'target',
    'valid',
    'visited',
    'where',
    'user-valid',
    'user-invalid',
    'autofill',
    'modal',
    'popover-open',
    'future',
    'past',
    'picture-in-picture',
];

export const CSSWideKeywords = ['initial', 'inherit', 'unset'];

/**
 * list names of functional pseudo classes
 * - cannot be overridden by custom states
 * - might contain nested selectors
 */
export const reservedFunctionalPseudoClasses = [
    `not`,
    `any`,
    `matches`,
    `is`,
    `where`,
    `has`,
    `host`,
    `host-context`,
    `nth-child`,
    `nth-last-child`,
    `nth-of-type`,
    `nth-last-of-type`,
    // not native
    `global`,
    `local`,
];
export const knownPseudoClassesWithNestedSelectors = reservedFunctionalPseudoClasses.filter(
    (name) => {
        switch (name) {
            case `global`:
            case `local`:
            case `nth-of-type`:
            case `nth-last-of-type`:
                return false;
        }
        return true;
    }
);

export const nativePseudoElements = [
    'after',
    'backdrop',
    'before',
    'cue',
    'first-letter',
    'first-line',
    'grammar-error',
    'marker',
    'placeholder',
    'selection',
    'slotted',
    'spelling-error',
    'file-selector-button',
    'highlight',
    'part',
    'target-text',
    'view-transition',
    'view-transition-group',
    'view-transition-image-pair',
    'view-transition-new',
    'view-transition-old',
];

export const nativeFunctionsDic: Record<string, { preserveQuotes: boolean }> = {
    annotation: { preserveQuotes: false },
    attr: { preserveQuotes: false },
    blur: { preserveQuotes: false },
    brightness: { preserveQuotes: false },
    calc: { preserveQuotes: false },
    'character-variant': { preserveQuotes: false },
    circle: { preserveQuotes: false },
    clamp: { preserveQuotes: false },
    'conic-gradient': { preserveQuotes: false },
    constant: { preserveQuotes: false },
    contrast: { preserveQuotes: false },
    counter: { preserveQuotes: false },
    counters: { preserveQuotes: false },
    'cubic-bezier': { preserveQuotes: false },
    'drop-shadow': { preserveQuotes: false },
    ellipse: { preserveQuotes: false },
    env: { preserveQuotes: false },
    'fit-content': { preserveQuotes: false },
    format: { preserveQuotes: false },
    grayscale: { preserveQuotes: false },
    hsl: { preserveQuotes: false },
    hsla: { preserveQuotes: false },
    'hue-rotate': { preserveQuotes: false },
    hwb: { preserveQuotes: false },
    image: { preserveQuotes: false },
    inset: { preserveQuotes: false },
    invert: { preserveQuotes: false },
    leader: { preserveQuotes: false },
    'light-dark': { preserveQuotes: false },
    'linear-gradient': { preserveQuotes: false },
    local: { preserveQuotes: false },
    matrix: { preserveQuotes: false },
    matrix3d: { preserveQuotes: false },
    max: { preserveQuotes: false },
    min: { preserveQuotes: false },
    minmax: { preserveQuotes: false },
    opacity: { preserveQuotes: false },
    ornaments: { preserveQuotes: false },
    paint: { preserveQuotes: false },
    path: { preserveQuotes: true },
    perspective: { preserveQuotes: false },
    polygon: { preserveQuotes: false },
    'radial-gradient': { preserveQuotes: false },
    rect: { preserveQuotes: false },
    repeat: { preserveQuotes: false },
    'repeating-linear-gradient': { preserveQuotes: false },
    'repeating-radial-gradient': { preserveQuotes: false },
    'repeating-conic-gradient': { preserveQuotes: false },
    rgb: { preserveQuotes: false },
    rgba: { preserveQuotes: false },
    rotate: { preserveQuotes: false },
    rotate3d: { preserveQuotes: false },
    rotateX: { preserveQuotes: false },
    rotateY: { preserveQuotes: false },
    rotateZ: { preserveQuotes: false },
    saturate: { preserveQuotes: false },
    scale: { preserveQuotes: false },
    scale3d: { preserveQuotes: false },
    scaleX: { preserveQuotes: false },
    scaleY: { preserveQuotes: false },
    scaleZ: { preserveQuotes: false },
    scroll: { preserveQuotes: false },
    view: { preserveQuotes: true },
    sepia: { preserveQuotes: false },
    skew: { preserveQuotes: false },
    skewX: { preserveQuotes: false },
    skewY: { preserveQuotes: false },
    steps: { preserveQuotes: false },
    styleset: { preserveQuotes: false },
    stylistic: { preserveQuotes: false },
    swash: { preserveQuotes: false },
    symbols: { preserveQuotes: false },
    translate: { preserveQuotes: false },
    translate3d: { preserveQuotes: false },
    translateX: { preserveQuotes: false },
    translateY: { preserveQuotes: false },
    translateZ: { preserveQuotes: false },
    url: { preserveQuotes: false },
    var: { preserveQuotes: false },
    color: { preserveQuotes: true },
    'color-mix': { preserveQuotes: true },
    lab: { preserveQuotes: true },
    oklab: { preserveQuotes: true },
    lch: { preserveQuotes: true },
    oklch: { preserveQuotes: true },
    supports: { preserveQuotes: true },
    anchor: { preserveQuotes: true },
    'anchor-size': { preserveQuotes: true },
    selector: { preserveQuotes: true /* TODO:transform the nested selector */ },
    style: { preserveQuotes: true /* TODO: transform the dashed ident property */ },
    'image-set': { preserveQuotes: true },
    sin: { preserveQuotes: true },
    cos: { preserveQuotes: true },
    tan: { preserveQuotes: true },
    asin: { preserveQuotes: true },
    acos: { preserveQuotes: true },
    atan: { preserveQuotes: true },
    atan2: { preserveQuotes: true },
    pow: { preserveQuotes: true },
    sqrt: { preserveQuotes: true },
    hypot: { preserveQuotes: true },
    log: { preserveQuotes: true },
    exp: { preserveQuotes: true },
    abs: { preserveQuotes: true },
    sign: { preserveQuotes: true },
};