Write your styles in JavaScript/TypeScript withintreat files (e.g.Button.treat.js) that getexecuted at build time.

All CSS rules are created ahead of time, so the runtime isvery lightweight—only needing to swap out pre-existing classes. In fact, if your application doesn’t use theming, you don’t even need the runtime at all.

All CSS logic, including its dependencies, will not be included in your final bundle.

Because theming is achieved by generating multiple classes,legacy browsers are supported.

Your project must be usingwebpack with the suppliedwebpack plugin, but that’s it.

First-class support is provided forReact andTypeScript, but those layers areentirely optional. The coreruntime API can be integrated into other frameworks, if needed.

The runtime makes use ofMap, so you may need apolyfill forpre-ES2015 browsers.

First, install the core library.

$yarnadd treat

Then, add thewebpack plugin to your project. In this case, we’re usingmini-css-extract-plugin to generate a static CSS file.

const{ TreatPlugin}=require('treat/webpack-plugin');const MiniCssExtractPlugin=require('mini-css-extract-plugin');module.exports={  plugins:[newTreatPlugin({      outputLoaders:[MiniCssExtractPlugin.loader]}),newMiniCssExtractPlugin()]};

Next, define and exportstyles from a treat file.

// Button.treat.js// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **import{ style}from'treat';exportconst button=style({  backgroundColor:'blue',  height:48});

Finally, import the styles.

// Button.jsimport*as stylesfrom'./Button.treat.js';exportconstButton=({ text})=>`  <buttontoken interpolation">${styles.button}">${text}</button>`;

First, install react-treat.

$yarnadd react-treat

Assuming you’ve already set up thewebpack plugin, start by creating and exporting a theme from a treat file. Normally, you’d define multiple themes, but let’s keep it short.

// theme.treat.js// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **import{ createTheme}from'treat';exportdefaultcreateTheme({  brandColor:'blue',  grid:4});

Then, import the desired theme and pass it toTreatProvider at the root of your application.

// App.jsimport Reactfrom'react';import{ TreatProvider}from'react-treat';import themefrom'./theme.treat.js';exportconstApp=()=>(<TreatProvider theme={theme}>...</TreatProvider>);

Now that you’ve configured the theming system, define and exportthemed styles from a treat file.

// Button.treat.js// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **import{ style}from'treat';exportconst button=style((theme)=>({  backgroundColor: theme.brandColor,  height: theme.grid*11}));

Then import and resolve themed styles via theuseStyles Hook.

// Button.jsimport Reactfrom'react';import{ useStyles}from'react-treat';import*as styleRefsfrom'./Button.treat.js';exportconstButton=(props)=>{const styles=useStyles(styleRefs);return<button{...props} className={styles.button}/>;};