Modifier classes

Do you want to request a feature or report a bug?

feature

What is the expected behavior?

To have the same modifiers syntax as in astroturf

const Button = styled('button')`
  color: black;
  border: 1px solid black;
  background-color: white;

  &.primary {
    color: blue;
    border: 1px solid blue;
  }

  &.color-green {
    color: green;
  }
`;

<Button primary color="green">

Compare to ${ } interpolation it keeps CSS syntax. CSS highlight and autocomplete works.

[satya164]

How do you scope keyframes? Or what if I don’t want to scope class

Currently, we use stylis as the parser (though planning to switch to postcss for few reasons) which handles scoped keyframes as well as :global.

Did I understand correctly that right now you collect all styles to the single file styles.css? How code splitting works?

We create separate CSS files for each JS file and add a require statement, which gets picked up by css loader. Code splitting works similar to when you import vanilla css files with mini-css-extract-plugin.

[ai]

1. data- attributes will be DOM
2. It requires more symbols
3. It is also a little hacky. data- attributes were created for a different purpose. People will not love them, as result it will not be syntax sugar feature for linaria as it works for astroturf.