Registry / web-framework / babel-plugin-filbert

babel-plugin-filbert

library0.0.8jsnpmunverified

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.

web-framework http-networking

npm install babel-plugin-filbert

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-FILBE

babel-plugin-filbert

web-frameworkjavascriptv0.0.8

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-filbert

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

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

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

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>; }

Debug

Known issues

deprecatedfilbert is in early development; breaking changes may occur in minor versions

fix

Pin to exact version and monitor releases.

affects: <=0.0.8

gotchaThe plugin only transforms styled.* syntax; you must still import 'styled' from 'filbert'

fix

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

affects: >=0.0.0

gotchaBabel plugin must be listed before other plugins that may transform JSX or module syntax

fix

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

affects: >=0.0.0

Errors

Common errors & fixes

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

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: Cannot find module 'babel-plugin-filbert'

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`.

TypeError: Cannot read property 'replaceWith' of undefined

Mismatched Babel version or missing peer dependencies.

fix

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

Upgrade

Version history

0.0.8latest on npm

Audit

Dependencies

@babel/corerequiredpeer dependency for Babel plugin

@babel/plugin-transform-react-jsxrequiredpeer dependency required for JSX transformation

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/kuldeepkeshwar/filbert-js ↗

packagehttps://www.npmjs.com/package/babel-plugin-filbert ↗

homepagehttps://filbert-js.vercel.app ↗