babel-plugin-filbert

0.0.8 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using a Babel config file that exports an object directly instead of using a function.

fix

If using babel.config.js, export a function that returns the config object: module.exports = function(api) { api.cache(true); return { plugins: ['babel-plugin-filbert'], presets: ['@babel/preset-env', '@babel/preset-react'], }; };

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

cause The package is not installed or not in node_modules.

fix

Run npm install babel-plugin-filbert --save-dev or yarn add -D babel-plugin-filbert.

error TypeError: Cannot read property 'replaceWith' of undefined ↓

cause Mismatched Babel version or missing peer dependencies.

fix

Ensure @babel/core and @babel/plugin-transform-react-jsx are installed and compatible version (7.x).

Warnings

deprecated filbert is in early development; breaking changes may occur in minor versions ↓

fix Pin to exact version and monitor releases.

gotcha The plugin only transforms styled.* syntax; you must still import 'styled' from 'filbert' ↓

fix Ensure you have `import { styled } from 'filbert'` in your file.

gotcha Babel plugin must be listed before other plugins that may transform JSX or module syntax ↓

fix Place 'babel-plugin-filbert' early in the plugins array.

Install

npm install babel-plugin-filbert

yarn add babel-plugin-filbert

pnpm add babel-plugin-filbert

Imports

babel-plugin-filbert

wrong

// Incorrect: using import syntax in babel config
import babel-plugin-filbert from 'babel-plugin-filbert'

correct

// In .babelrc or babel.config.js
plugins: ['babel-plugin-filbert']

This is a Babel plugin, not a JavaScript module; it should be listed in your Babel config's plugins array.

Quickstart

Shows Babel config with the plugin and a simple styled component using filbert's styled.tag syntax.

// .babelrc.json
{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-react"
  ],
  "plugins": ["babel-plugin-filbert"]
}

// src/Button.jsx
import React from 'react';
import { styled } from 'filbert';

const Button = styled.button`
  margin: 0;
  padding: 1rem;
  font-size: 1rem;
  background-color: tomato;
`;

export default function App() {
  return <Button>Click me</Button>;
}