babel-plugin-treat

1.6.2 verified Sat Apr 25 auth: no javascript

Babel plugin for treat, a CSS-in-JS library that compiles out all runtime style definitions to static CSS files at build time. Version 1.6.2 is the latest, with treat itself at v2.x. The plugin is required for Babel-based setups (alternative to treat webpack loader). Key differentiator: treat is build-time only, unlike runtime CSS-in-JS libraries. The plugin handles extraction of themed styles and local scope. Active maintenance, integrated into treat monorepo.

Common errors

error Error: .babelrc is not a valid configuration ↓

cause Using JSON without proper quoting or incorrect plugin format.

fix

Use ["babel-plugin-treat", {}] array syntax in the plugins list.

error Error: Cannot find module 'babel-plugin-treat' ↓

cause Package not installed or npm dependency missing.

fix

Run 'npm install --save-dev babel-plugin-treat' (or yarn add).

error TypeError: treat is not a function ↓

cause Incorrect import of treat module; treat exports are not a function.

fix

Use the plugin in Babel config only; do not import 'babel-plugin-treat' in source code.

Warnings

breaking treat v2 changed plugin options; 'theme' object structure changed from v1. ↓

fix Update theme export to match treat v2 format (e.g., use createTheme or treatTheme).

gotcha Plugin requires Babel 7+; not compatible with Babel 6. ↓

fix Upgrade to Babel 7.

gotcha Treat plugin must be applied before other transforms that touch JSX or modules; order matters. ↓

fix Place 'babel-plugin-treat' early in plugins array, typically before React or module transform plugins.

deprecated Treat v2 deprecated 'createThemedStyles' in favor of 'makeStyles' with theme context. ↓

fix Use 'makeStyles' from 'treat' directly; remove 'createThemedStyles' imports.

Install

npm install babel-plugin-treat

yarn add babel-plugin-treat

pnpm add babel-plugin-treat

Imports

default

wrong

import treat from 'babel-plugin-treat'

correct

module.exports = { presets: [['treat', { theme: 'src/theme.js' }]] }

CommonJS in .babelrc; treat plugin invoked as a preset or plugin in Babel config

treat
wrong
```
plugins: [['treat', {}]]
```
correct
```
plugins: ['babel-plugin-treat']
```
If using plugin format, use full package name; treat is not a scoped package

N/A (no named exports)

// .babelrc
{
  "plugins": [
    ["babel-plugin-treat", {
      "theme": "./path/to/theme.js"
    }]
  ]
}

The plugin has no JavaScript export; it's configured in Babel config

Quickstart

Shows minimal Babel config to enable treat plugin with optional theming.

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-treat', {
      theme: './src/theme.js', // optional: path to treat theme
      alias: { // optional: module aliases
        '~styles': './src/styles'
      }
    }]
  ]
};

// src/theme.js
export const theme = {
  colors: {
    brand: 'blue'
  }
};