Unlock the Power of CSS-in-JS with Treat

The Benefits of CSS-in-JS

CSS-in-JS is a pattern that allows you to maintain your CSS files using a JavaScript modular approach. This approach has been widely adopted by the developer community since its introduction in 2014. But what makes CSS-in-JS so special?

With CSS-in-JS, you can automatically scope your styles locally, ensuring that only the relevant parts of your application are affected. This approach eliminates the risk of global style rules overriding each other unintentionally, which can break your application design.

The Drawbacks of CSS-in-JS

However, CSS-in-JS comes with a cost. It requires executing your styles at runtime, which can increase the size of your JavaScript bundle. This can lead to slower load times and a poor user experience.

Introducing Treat: A Game-Changer in CSS-in-JS

That’s where Treat comes in – a lightweight CSS-in-JS library that executes your styling code at build time and injects it into your application header. Treat eliminates the need to include your styling code in your JavaScript bundle, reducing runtime overhead to a minimum.

What Makes Treat Special?

• Type Safety: Treat supports TypeScript, ensuring that your styling code is type-safe.
• Legacy Browser Support: Treat works seamlessly with legacy browsers, including IE 11.
• Framework-Agnostic: Treat can be used with any frontend library, from Angular to Vue to React.

Getting Started with Treat in React

1. Install the Treat package from NPM:

   npm install treat

2. Edit your webpack config to include Treat’s webpack plugin:

   module.exports = {
     // ... other configurations ...
     plugins: [new TreatWebpackPlugin()],
   };

3. Create a style using the `.treat.js` extension:

   // Button.treat.js
   export default {
     button: {
       backgroundColor: 'blue',
       color: 'white',
     },
   };

4. Add the style to your React component:

   // Button.js
   import React from 'react';
   import styles from './Button.treat';
   
   const Button = () => {
     return <button className={styles.button}>Click me!</button>;
   };
   
   export default Button;

Treat will inject the style into your page, and you’ll see that the button element is rendered with the style from `Button.treat.js`. You can even export the styling into its own static CSS file using the `mini-css-extract-plugin`.

Take Your CSS-in-JS to the Next Level

With Treat, you can say goodbye to runtime overhead and hello to faster load times and better user experiences. Try Treat today and discover a new way to approach CSS-in-JS.