{"id":19229,"library":"babel-plugin-treat","title":"babel-plugin-treat","description":"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.","status":"active","version":"1.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/seek-oss/treat/tree/master/packages/babel-plugin-treat","tags":["javascript","treat"],"install":[{"cmd":"npm install babel-plugin-treat","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-treat","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-treat","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; the plugin transforms treat style definitions","package":"treat","optional":false},{"reason":"peer dependency; plugin runs as Babel transform","package":"@babel/core","optional":false}],"imports":[{"note":"CommonJS in .babelrc; treat plugin invoked as a preset or plugin in Babel config","wrong":"import treat from 'babel-plugin-treat'","symbol":"default","correct":"module.exports = { presets: [['treat', { theme: 'src/theme.js' }]] }"},{"note":"If using plugin format, use full package name; treat is not a scoped package","wrong":"plugins: [['treat', {}]]","symbol":"treat","correct":"plugins: ['babel-plugin-treat']"},{"note":"The plugin has no JavaScript export; it's configured in Babel config","wrong":"","symbol":"N/A (no named exports)","correct":"// .babelrc\n{\n  \"plugins\": [\n    [\"babel-plugin-treat\", {\n      \"theme\": \"./path/to/theme.js\"\n    }]\n  ]\n}"}],"quickstart":{"code":"// babel.config.js\nmodule.exports = {\n  plugins: [\n    ['babel-plugin-treat', {\n      theme: './src/theme.js', // optional: path to treat theme\n      alias: { // optional: module aliases\n        '~styles': './src/styles'\n      }\n    }]\n  ]\n};\n\n// src/theme.js\nexport const theme = {\n  colors: {\n    brand: 'blue'\n  }\n};","lang":"javascript","description":"Shows minimal Babel config to enable treat plugin with optional theming."},"warnings":[{"fix":"Update theme export to match treat v2 format (e.g., use createTheme or treatTheme).","message":"treat v2 changed plugin options; 'theme' object structure changed from v1.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to Babel 7.","message":"Plugin requires Babel 7+; not compatible with Babel 6.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place 'babel-plugin-treat' early in plugins array, typically before React or module transform plugins.","message":"Treat plugin must be applied before other transforms that touch JSX or modules; order matters.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use 'makeStyles' from 'treat' directly; remove 'createThemedStyles' imports.","message":"Treat v2 deprecated 'createThemedStyles' in favor of 'makeStyles' with theme context.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use [\"babel-plugin-treat\", {}] array syntax in the plugins list.","cause":"Using JSON without proper quoting or incorrect plugin format.","error":"Error: .babelrc is not a valid configuration"},{"fix":"Run 'npm install --save-dev babel-plugin-treat' (or yarn add).","cause":"Package not installed or npm dependency missing.","error":"Error: Cannot find module 'babel-plugin-treat'"},{"fix":"Use the plugin in Babel config only; do not import 'babel-plugin-treat' in source code.","cause":"Incorrect import of treat module; treat exports are not a function.","error":"TypeError: treat is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}