Registry / web-framework / kremling-babel-plugin

kremling-babel-plugin

library2.0.0jsnpmunverified

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

web-framework

npm install kremling-babel-plugin

package ↗

INSTALL

IMPORT

SIG · KREMLING-BABEL-PLU

kremling-babel-plugin

web-frameworkjavascriptv2.0.0

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

✓ import plugin from 'kremling-babel-plugin'

✗ module.exports = require('kremling-babel-plugin')

ESM default import is preferred. CommonJS require works but not recommended for Babel config.

module:kremling-babel-plugin

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

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

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

k from kremling

✓ import { k } from 'kremling'

✗ import k from 'kremling'

k is a named export, not default.

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

Debug

Known issues

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

fix

Set sassOptions: {} in plugin options.

affects: >=1.0

gotchaOnly synchronous PostCSS plugins work (e.g., autoprefixer) because Babel transforms are synchronous.

fix

Use only sync PostCSS plugins or avoid asynchronous ones.

affects: >=1.0

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

fix

Provide a unique namespace string in plugin options.

affects: >=1.0

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

fix

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

affects: >=1.0

Errors

Common errors & fixes

Error: Cannot find module 'kremling-loader'

Missing peer dependency kremling-loader.

fix

npm install --save-dev kremling-loader

Error: sassOptions must be an object, received undefined

sassOptions not provided in plugin configuration.

fix

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

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

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

fix

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

SyntaxError: Unexpected token while parsing CSS with Sass

Sass syntax error in a k tagged template CSS string.

fix

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

kremling-loaderoptionalpeer dependency required for integration with webpack, version >=2

postcssoptionalpeer dependency for CSS processing, version >=8

Agent activity

2 hits · last 30 days

node

Resources

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