Vanilla-extract Alternatives

vanilla-extract reviews and mentions

• Best practice on styling React Applications
  3 projects | reddit.com/r/reactjs | 16 Apr 2022
• Why are "CSS classes generally better for performance than inline styles." ~ from react docs
  3 projects | reddit.com/r/reactjs | 12 Apr 2022

  There are a myriad of CSS-in-JS tools, many of which are zero-runtime giving you all the benefits of authoring in a single file without the drawbacks of inline styles. That's how I prefer to do my CSS with React anyway... Vanilla Extract and/or Linaria are my current favorites.

• Bad Habits of Mid-Level React Developers
  2 projects | reddit.com/r/javascript | 10 Apr 2022

  There are a few, but my concerns are mainly centered around performance. The most popular CSS-in-JS libraries result in larger JS bundles for at lest two reasons I’m aware of: - Runtime JS to convert style objects to real CSS - Your app-specific style objects Generally, as you add features to an app, styles come with it. When these two concepts are tied together, they are unable to scale independently. Similarly, this will affect caching and resource download timing as well (ie: downloading one big JS file with everything vs a smaller JS file downloading in parallel with the CSS file). Then there’s the implication on debugging. In my experience, the use of something like emotion’s css prop on the React devtools introduces a lot of extra noise in the component tree. I know there are filtering capabilities, but still.Ultimately, I have found that most apps can get by with plain CSS for ~95% of the time and the rest of the time using whatever framework’s mechanism for doing inline styles based on runtime data. I get the DX benefits of going fully dynamic, but it ignores the impact on end users.FWIW, I’m not totally against CSS-in-JS as a concept, just in the outcomes that many of the popular ones impose. My preferred best of both worlds is https://vanilla-extract.style which emits plain CSS while retaining a lot of the DX of traditional libraries and is not React specific.

• What's the best way to get typescript support for css module imports in next?
  1 project | reddit.com/r/nextjs | 29 Mar 2022

  Have you looked at vanillla extract? Made by the same guy who did css modules. Basically css with typescript as the preprocessor.

• Visual Testing with Chromatic
  1 project | dev.to | 28 Mar 2022

  We’re enabling Chromatic’s TurboSnap with the --only-changed flag. TurboSnap uses Webpack’s dependency graph to determine which stories have changed, thus minimizing the amount of snapshots needed per PR. That is especially desirable in the context of a monorepo like ours, since many PRs don’t touch the UI and don’t need to trigger any snapshots. TurboSnap errors on the side of caution though, and if there are changes to package.json, all stories will be considered changed. Since our dependency updates are automated, we use Chromatic’s skip option to mark the visual tests as passed without actually creating any snapshots. It’s possible that updating a dependency will cause UI changes that will go undetected by Chromatic, but right now we’re preferring to conserve the snapshot budget. Note that because we use vanilla-extract for styling, the dependency graph can trace CSS changes to specific stories.

• State of the Web: React
  9 projects | dev.to | 13 Feb 2022

  CSS in JS integrates with React very well. The most popular CSS in JS tool is styled-components, which allows you to define styles inside JavaScript using tagged templates. However, there are newer approaches to CSS in JS that are often superior in certain ways. Some of the most interesting of those are Linaria and vanilla-extract. Linaria is a library that aims to optimize CSS in JS by compiling CSS in JS to native CSS. Linaria also has built-in React integration, making it easier to add dynamic styling without a high runtime cost. vanilla-extract does the same thing but better integrates with TypeScript and offers features like building custom utility styles.

• Why was CSS-In-JS ever a thing?
  6 projects | reddit.com/r/reactjs | 12 Feb 2022

  One thing I think you're really missing is what the output is of CSS-in-JS. There are tens of CSS-in-JS frameworks that can output anything from: CSS Module like classes (Linaria, Vanilla Extract), Atomic Classes (StyleX, PreStyle), to the more traditional (Styled Components, Emotion) many with zero runtime cost (ie no JS bloat). That's why I say CSS-in-JS is primarily about developer experience... the output can often be whatever you want it to be.

• Have you tried combining tailwindcss with other libraries? I love the experience! This is tailwindcss + ant design.
  3 projects | reddit.com/r/webdev | 12 Jan 2022

  We use vanilla extract. https://vanilla-extract.style The sprinkles API let’s you build your own utility classes while working with CSS in JS with Typescript support like autocomplete. Loving it. Feels like the happy medium between Tailwind and CSS-in-JS.

• SASS vs CSS Modules vs CSS-in-JS vs Compile time CSS-in-JS. Who wins?
  9 projects | dev.to | 11 Jan 2022

  Vanilla extract (very interesting, support more bundlers than Linaria)

• Which UI library do you prefer to use with NextJS and why (please provide explanation in comments)?
  4 projects | reddit.com/r/nextjs | 27 Dec 2021

  We have a single site and specific design/styles so Vanilla extract is great at minimising rendering time without having styling presets. https://vanilla-extract.style

  4 projects | reddit.com/r/nextjs | 27 Dec 2021
• Making an AeroPress Tracking App
  3 projects | dev.to | 27 Dec 2021

  I want to be clear that I am far from a TailwindCSS hater. I think the framework is awesome and I am looking forward to its future in the space. I definitely feel like I need more time with it and more experience working with it, but right now I'm more excited about Styled Components (which I've taken a love to from Josh W. Comeau's CSS for JavaScript Developers Course) and also Vanilla Extract which I plan to look into more for future projects. With other tools like Chakra UI also looming over my shoulder competing for my headspace with styling, these small frustrations from Tailwind keep adding up and I'm not sure if I'll be using it for my own personal projects anymore.

• Tailwind CSS v3.0
  11 projects | news.ycombinator.com | 9 Dec 2021

  I'm in the same boat. Started using (Vanilla Extract)[https://vanilla-extract.style] earlier this year and it's the best CSS setup I've ever worked with.

• CSS in JS zero runtime libraries similar to JSS which allow to reuse styles?
  3 projects | reddit.com/r/reactjs | 4 Nov 2021

  Stitches Is near zero runtime and vanilla-extract claims it's zero runtime and typed. There's atlassian compiled as well but I never used it.

• What UI library are you guys using these days?
  7 projects | reddit.com/r/reactjs | 29 Oct 2021

  Though I’d suggest looking at vanilla extract instead of Stiches. https://vanilla-extract.style