What are advantages towards linaria? It may be nice to have some comparison with other libs.

[SilentImp]

Hi, it would be nice to have comparison with other zero-runtime css-in-js libs. Maybe even in README.md. For example, I have tried linaria — on trivial cases it feels the same. More or less. But I think there will be differences in big projects, in complex cases; Why use astroturf? Better performance, better support, some core differences that are invisible from the start? This information may help alot.

Regards.

[ai]

Astroturf is simple. It doesn’t compile styles, just copy them to separated files (css-loader doe the rest). In contrast, linaria compiles styles by it one.

In practice, it allows Astroturf to work with Sass/LESS/SugarSS and anything else. But styles compiling allows to Linaria to compile dynamic prop to CSS Custom Properties (in Astroturf you need to do it manually).

[SilentImp]

Thanks, I got it. It may be really nice to add this to README.

Regards.

[taion]

@ai You mean astroturf is simple, right?

[ai]

@taion oops. Fixed.

[satya164]

Some advantages of Linaria off the top of my head:

• Dynamic props via CSS custom properties for React components
• You can share JS variables with your CSS by interpolating them
• You can use JS based logic in the styles, kinda like a CSS pre-processor

It's mostly unnecessary to use a CSS pre-processor along with Linaria, but as of the latest version, you can use a CSS pre-processor like Sass/LESS etc. if you want to. The following configuration for linaria/loader is functionally equivalent to astroturf (except the features provided by CSS modules):

{
  "evaluate": false,
  "preprocessor": "none"
}

Linaria doesn't use CSS modules under the hood, which allows it to provide certain features that's not possible otherwise.

1. Interpolating class names

   You can interpolate a class name inside a CSS rule to refer to another class name.

   // with CSS classes
   
   const a = css`
   color: blue;
   `;
   
   const b = css`
   background-color: yellow;
   
   .${a} {
     color: red;
   }
   `;
   
   // with styled
   
   const A = styled.p`
   color: blue;
   `;
   
   const B = styled.div`
   background-color: yellow;
   
   ${A} {
     color: red;
   }
   `;

   This also works the same when you import the class name from another file.

2. Styling a styled component

   Styled component has this pattern where you can wrap another styled component in styled(..) and it'll work.

   const A = styled.p`
   color: red;
   `;
   
   const B = styled(A)`
   color: blue;
   `;

   In this specific example, it doesn't make a difference as the CSS for B always comes after A, so it overrides A's CSS. But when the component is coming from a different file, the order is not always guaranteed and it the result might be different from what you expect. Linaria will ensure that B always has a higher specificity than A.

There are also other small differences. e.g. The way you write class names in Linaria allow it to work with a static type system and linters. You can get warnings for unused styles and typos.

In essence, Linaria is very close to what existing CSS in JS libraries provide, while astroturf is very close to CSS modules.

[toFrankie]

👀 mark