CSS-in-JS-generator

CSS-in-JS-generator copied to clipboard

In the following example, the transformer demonstrates the following rule:

.alert-dismissible .close {
    position: relative;
    top: -0.75rem;
    right: -1.25rem;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

being converted into:

export const alertDismissible = css`
  & .${close} {
    position: relative;

    top: -0.75rem;

    right: -1.25rem;

    padding: 0.75rem 1.25rem;

    color: inherit;
  }
`

This should come with a warning as, per emotions documentation:

To nest a class selector using the class generated with css you can interpolate it but this is strongly recommended against and should only be used in rare circumstances because it will break when used with composition.

Meaning that it'll break when trying to force specificity using cx