Unlock the Power of Zero-Runtime Style Sheets with Vanilla-Extract

Are you tired of dealing with cumbersome CSS preprocessors like Sass or Less? Look no further than vanilla-extract, a revolutionary tool that generates all styles during your build, providing locally scoped class names, CSS variables, and more.

What is Vanilla-Extract?

Vanilla-extract is a game-changer for styling your applications. It’s a TypeScript (or JavaScript) solution that offers a zero-runtime approach to style sheets, allowing for more efficient and organized theming, organization, and preprocessing of your app’s styles.

Setting Up Vanilla-Extract

To get started with vanilla-extract, you’ll need to set up a simple project with React and webpack. Clone or fork a scaffolded project and run the necessary commands to install the required dependencies. Once you’ve set up your project, you can start exploring the features of vanilla-extract.

npm install vanilla-extract react webpack

Creating a Stylized Theme

One of the most exciting aspects of vanilla-extract is its ability to create stylized themes. By creating a simple theme, you can demonstrate the power of vanilla-extract in action. Start by creating a new file called styles.css.ts and add the necessary code to define your theme.

import { style } from 'vanilla-extract';

export const theme = style({
  backgroundColor: 'blue',
  color: 'white',
  padding: '20px',
});

Introducing Sprinkles

But what if you want to take your styling to the next level? That’s where Sprinkles comes in – a zero-runtime atomic CSS framework for vanilla-extract. Sprinkles provides a set of utility classes that can be customized and composed into reusable styles along with atoms.

Composing Styles with Sprinkles

With Sprinkles, you can create custom atoms and compose styles in a more flexible and reusable way. By defining conditions, properties, and shorthands, you can create a robust styling system that’s easy to maintain and update.

import { atoms } from 'prinkles';

export const button = atoms({
  conditions: {
    hover: '&:hover',
  },
  properties: {
    backgroundColor: 'blue',
    color: 'white',
  },
  shorthands: {
    padding: '20px',
  },
});

Taking it to the Next Level

By combining vanilla-extract with Sprinkles, you can create a powerful styling system that’s both efficient and organized. With features like conditional atoms, desktop and mobile properties, and custom shorthands, you can take your styling to the next level.

• Conditional Atoms: Define conditions for your styles, such as hover or active states.
• Desktop and Mobile Properties: Create separate styles for desktop and mobile devices.
• Custom Shorthands: Define custom shorthands for frequently used styles.

Ready to unlock the power of vanilla-extract and Sprinkles? Try it out today and discover a whole new world of styling possibilities!

Get Started Today!