{"id":19062,"library":"babel-plugin-filbert","title":"babel-plugin-filbert","description":"A Babel plugin for filbert-js that transforms styled.* syntax (e.g., `styled.div`) into `styled('div')` calls. This plugin is essential for using filbert's zero-runtime CSS-in-JS library with tagged template literals. Current version 0.0.8 is stable but the entire filbert ecosystem appears to be in early development (pre-1.0). It requires @babel/core and @babel/plugin-transform-react-jsx as peer dependencies. Filbert is a lightweight (1KB) alternative to styled-components or emotion, focusing on minimal bundle size. The plugin is designed for use with React and Preact.","status":"active","version":"0.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/kuldeepkeshwar/filbert-js","tags":["javascript","babel-plugin","react","preact","css","css-in-js","filbert-js","1kb"],"install":[{"cmd":"npm install babel-plugin-filbert","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-filbert","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-filbert","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Babel plugin","package":"@babel/core","optional":false},{"reason":"peer dependency required for JSX transformation","package":"@babel/plugin-transform-react-jsx","optional":false}],"imports":[{"note":"This is a Babel plugin, not a JavaScript module; it should be listed in your Babel config's plugins array.","wrong":"// Incorrect: using import syntax in babel config\nimport babel-plugin-filbert from 'babel-plugin-filbert'","symbol":"babel-plugin-filbert","correct":"// In .babelrc or babel.config.js\nplugins: ['babel-plugin-filbert']"}],"quickstart":{"code":"// .babelrc.json\n{\n  \"presets\": [\n    [\"@babel/preset-env\", { \"targets\": { \"node\": \"current\" } }],\n    \"@babel/preset-react\"\n  ],\n  \"plugins\": [\"babel-plugin-filbert\"]\n}\n\n// src/Button.jsx\nimport React from 'react';\nimport { styled } from 'filbert';\n\nconst Button = styled.button`\n  margin: 0;\n  padding: 1rem;\n  font-size: 1rem;\n  background-color: tomato;\n`;\n\nexport default function App() {\n  return <Button>Click me</Button>;\n}","lang":"javascript","description":"Shows Babel config with the plugin and a simple styled component using filbert's styled.tag syntax."},"warnings":[{"fix":"Pin to exact version and monitor releases.","message":"filbert is in early development; breaking changes may occur in minor versions","severity":"deprecated","affected_versions":"<=0.0.8"},{"fix":"Ensure you have `import { styled } from 'filbert'` in your file.","message":"The plugin only transforms styled.* syntax; you must still import 'styled' from 'filbert'","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Place 'babel-plugin-filbert' early in the plugins array.","message":"Babel plugin must be listed before other plugins that may transform JSX or module syntax","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"If using babel.config.js, export a function that returns the config object:\nmodule.exports = function(api) {\n  api.cache(true);\n  return {\n    plugins: ['babel-plugin-filbert'],\n    presets: ['@babel/preset-env', '@babel/preset-react'],\n  };\n};","cause":"Using a Babel config file that exports an object directly instead of using a function.","error":"Plugin/Preset files are not allowed to export objects, only functions."},{"fix":"Run `npm install babel-plugin-filbert --save-dev` or `yarn add -D babel-plugin-filbert`.","cause":"The package is not installed or not in node_modules.","error":"Error: Cannot find module 'babel-plugin-filbert'"},{"fix":"Ensure @babel/core and @babel/plugin-transform-react-jsx are installed and compatible version (7.x).","cause":"Mismatched Babel version or missing peer dependencies.","error":"TypeError: Cannot read property 'replaceWith' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}