how to use styleVariants in selectors?

[insidedw]

asis

 const typography = styleVariants({
  'display.medium': {
      fontSize: '12px',
      lineHeight: '14px',
  },
}

const name = style({
  display: 'flex',
  selectors: {
    [`${noMap} &`]: {
      fontSize: '12px',
      lineHeight: '14px',
    },
  },

I want it like this

const name = style({
  display: 'flex',
  selectors: {
    [`${noMap} &`]: typography['display.medium']
  },

is there any way to use styleVariants in selectors?

[askoufis]

styleVariants returns an object whose properties are classnames, so typography would look something like:

{
  'display.medium': '_ahjsei2'
}

Using this classname directly inside a selector doesn't work because the selectors API only accepts style objects. If you really want to share the same style properties, I would just define an object and share that:

const displayMedium = {
  fontSize: "12px",
  lineHeight: "14px",
};

const typography = styleVariants({
  "display.medium": displayMedium,
});

const name = style({
  display: "flex",
  selectors: {
    [`${noMap} &`]: {
      fontSize: "12px",
      lineHeight: "14px",
    },
  },
});

const name = style({
  display: "flex",
  selectors: {
    [`${noMap} &`]: displayMedium,
  },
});

I think we could make this work by copying the classname's properties into where they're referenced, but I haven't put much thought into the consequences/complexity of this, so for now the easiest way is to just reference the same style object.