Reuse styles in selectors

[pradeeproark]

Hi, is it possible to have an API that allows reusing existing style definitions in other style's selectors

Example try to reuse the dropShadowStyle in the hover selector in card style:

export const dropShadowStyle = style({
    boxShadow: '5px 10px #888888'
})

export const cardStyle = style({
    margin: '1rem',
    padding: '1.5rem',
    textAlign: 'left',
    color: 'inherit',
    backgroundColor: 'peachpuff',
    textDecoration: 'none',
    border: '1px solid #eaeaea',
    borderRadius: '10px',
    maxWidth: '300px',
    selectors: {
        '&:hover': dropShadowStyle <-- reuse dropShadowStyle
    }
})

One workaround that I did is if we type dropShadow as CSSPropertiesWithVars then it can be used for the hover selector

export const dropShadow: CSSPropertiesWithVars = {
    boxShadow: '5px 10px #888888'
}
export const cardStyle = style({
  ...
    selectors: {
        '&:hover': dropShadow
    }
});

But dropShadow by itself cannot be used a style.

[mattcompiles]

I would probably just use as const for this.

e.g.

export const dropShadow = {
    boxShadow: '5px 10px #888888'
} as const;

export const cardStyle = style({
    selectors: {
        '&:hover': dropShadow
    }
});

[pradeeproark]

That wouldn't type check dropShadow isn't it. Would allow arbitrary properties on it.

I wrote a small util function for type checking like

export const css = (props: CSSPropertiesWithVars) => props;

then dropShadow becomes

export const dropShadow = css({
    boxShadow: '5px 10px #888888' // type checked
});

[AndrewLeedham]

@pradeeproark you would still get type-checking it would just be where the usage of dropShadow is rather than the definition.

[pradeeproark]

@AndrewLeedham , it would be preferable to know that the type checks ahead of it being used. The idea is that you write small reusable type checked styles and compose them as needed.

[ljani]

You could just type the style:

import { style } from "@vanilla-extract/css";
import type { StyleRule } from "@vanilla-extract/css";

export const dropShadowRule: StyleRule = {
    boxShadow: "5px 10px #888888"
} as const;

export const thingy = style(dropShadownRule);
export const cardHover = style({
    ":hover": dropShadowRule
});

While this works, it won't generate good CSS. It will generate:

.thingy {
    box-shadow: 5px 10px #888888
}
.cardHover:hover {
    box-shadow: 5px 10px #888888
}

A better output would be:

.thingy,
.cardHover:hover {
    box-shadow: 5px 10px #888888
}

I guess this could work:

import { globalStyle } from "@vanilla-extract/css";

globalSelector(`${thingy}, ${card}:hover`, dropShadowRule);

But reusing this way gets complex.

It'd nice if you could just do the following and vanilla-extract would figure out that it should group the selectors:

export const thingy = style(dropShadownRule);
export const cardHover = style({
    ":hover": thingy // detect thingy is a string instead of CSSPropertiesWithVars and thus grouping should be used
});

[AndrewLeedham]

I toyed with a solution to this the other day, something like this:

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

function style<Rule extends ComplexStyleRule>(
  rule: Rule,
  debugId?: string
): [string, Rule] {
  return [_style(rule, debugId), rule];
}

export const [dropShadow, dropShadowRule] = style({
  boxShadow: '5px 10px #888888',
});

export const [cardStyle] = style({
  selectors: {
    '&:hover': dropShadowRule,
  },
});

This way you get auto-complete in the style rules, but you could pass other properties as the rule only has to extend ComplexStyleRule. So not a perfect solution.

[pradeeproark]

Nice, I did think it would be cool if the API would have something like this. I had more thought style should not loose the type checked object and return a string. In fact as a user of the API there is no use for style giving back the string. As long as we are in a .css.ts it would be nice if constructing and passing around type checked style objects is the norm. The conversion to string can happen somewhere else 🤔?

[sina-salahshour]

still no solution for this?