Kremling Babel Plugin

2.0.0 verified Sat Apr 25 auth: no javascript

A Babel plugin for inline CSS scoping using the `k` tagged template literal from the Kremling library. Current version 2.0.0 allows omitting ampersands in scoped CSS, provides namespace customization for micro-frontends, supports PostCSS and Sass preprocessing, and offers a :global escape hatch for unscoped styles. Key differentiators are zero-runtime CSS-in-JS via Babel transform, synchronous PostCSS plugin support, and integration with kremling-loader for webpack. Release cadence is low, focused on stability. Compatible with Babel 7+.

Common errors

error Error: Cannot find module 'kremling-loader' ↓

cause Missing peer dependency kremling-loader.

fix

npm install --save-dev kremling-loader

error Error: sassOptions must be an object, received undefined ↓

cause sassOptions not provided in plugin configuration.

fix

Add 'sassOptions': {} to the plugin options.

error TypeError: (0 , _kremling.k) is not a function ↓

cause Using default import of 'k' instead of named import.

fix

Change import to: import { k } from 'kremling'

error SyntaxError: Unexpected token while parsing CSS with Sass ↓

cause Sass syntax error in a k tagged template CSS string.

fix

Check CSS for valid Sass syntax or use postcssOptions if not using Sass.

Warnings

gotcha 'sassOptions' must be provided as an object even if empty, otherwise Sass preprocessing fails. ↓

fix Set sassOptions: {} in plugin options.

gotcha Only synchronous PostCSS plugins work (e.g., autoprefixer) because Babel transforms are synchronous. ↓

fix Use only sync PostCSS plugins or avoid asynchronous ones.

gotcha The 'namespace' option is required for micro-frontends; missing it can cause selector collisions. ↓

fix Provide a unique namespace string in plugin options.

gotcha Using 'require' syntax in Babel config may cause resolution errors; use 'module:' prefix instead. ↓

fix Use ['module:kremling-babel-plugin', options] in .babelrc.

Install

npm install kremling-babel-plugin

yarn add kremling-babel-plugin

pnpm add kremling-babel-plugin

Imports

babel-plugin
wrong
```
module.exports = require('kremling-babel-plugin')
```
correct
```
import plugin from 'kremling-babel-plugin'
```
ESM default import is preferred. CommonJS require works but not recommended for Babel config.

module:kremling-babel-plugin

wrong

['kremling-babel-plugin', { options }]

correct

['module:kremling-babel-plugin', { options }] in .babelrc or babel.config.js

Must use 'module:' prefix in Babel config to resolve via module system.

k from kremling
wrong
```
import k from 'kremling'
```
correct
```
import { k } from 'kremling'
```
k is a named export, not default.

Quickstart

Babel configuration with plugin options, and a React component using k tagged template and useCss for scoped styles.

// .babelrc or babel.config.js
{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["module:kremling-babel-plugin", {
      "namespace": "my-app",
      "postcssOptions": {},
      "sassOptions": {}
    }]
  ]
}

// React component
import React from 'react';
import { useCss, k } from 'kremling';

function MyComponent() {
  const scope = useCss(css);
  return <div {...scope} className="custom">Styled</div>;
}

const css = k`
  .custom {
    background-color: 'red';
  }
`;