Nesting Mixins in Media Queries and Selectors

[jantimon]

Currently, next-yak lacks support for nesting mixins within media queries and nestings.

const Button = styled.button`
  @media (min-width: 768px) {
    ${hoverStyles}
  }
`;

Problem:

The above code results in unexpected behavior since hoverStyles generates its own class name, which is independent from Button and therefore also independent of the Button components nested usage of the mixin.

MVP:

Display a clear error message when users attempt to use mixins in unsupported contexts, such as media queries or nested structures.

Caution

next-yak currently does not allow mixins to be used directly within media queries or nested structures

Inline mixin:

If doable we should probable add support for nesting mixins directly within a component, enabling constructs like the following:

const Button = styled.button`
  &:focus {
    ${({$primary}) => $primary && css`color: red`}
  }
`;

Additional Considerations:

We might add support for mixins which are imported from .yak files e.g.:

import { hoverStyles } from "./mixins.yak";
const Button = styled.button`
  @media (min-width: 768px) {
    ${hoverStyles}
  }
`;

[jantimon]

[email protected] adds better errors - thanks @Mad-Kat