{"id":20173,"library":"kremling-babel-plugin","title":"Kremling Babel Plugin","description":"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+.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install kremling-babel-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add kremling-babel-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add kremling-babel-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for integration with webpack, version >=2","package":"kremling-loader","optional":true},{"reason":"peer dependency for CSS processing, version >=8","package":"postcss","optional":true}],"imports":[{"note":"ESM default import is preferred. CommonJS require works but not recommended for Babel config.","wrong":"module.exports = require('kremling-babel-plugin')","symbol":"babel-plugin","correct":"import plugin from 'kremling-babel-plugin'"},{"note":"Must use 'module:' prefix in Babel config to resolve via module system.","wrong":"['kremling-babel-plugin', { options }]","symbol":"module:kremling-babel-plugin","correct":"['module:kremling-babel-plugin', { options }] in .babelrc or babel.config.js"},{"note":"k is a named export, not default.","wrong":"import k from 'kremling'","symbol":"k from kremling","correct":"import { k } from 'kremling'"}],"quickstart":{"code":"// .babelrc or babel.config.js\n{\n  \"presets\": [\"@babel/preset-env\"],\n  \"plugins\": [\n    [\"module:kremling-babel-plugin\", {\n      \"namespace\": \"my-app\",\n      \"postcssOptions\": {},\n      \"sassOptions\": {}\n    }]\n  ]\n}\n\n// React component\nimport React from 'react';\nimport { useCss, k } from 'kremling';\n\nfunction MyComponent() {\n  const scope = useCss(css);\n  return <div {...scope} className=\"custom\">Styled</div>;\n}\n\nconst css = k`\n  .custom {\n    background-color: 'red';\n  }\n`;","lang":"typescript","description":"Babel configuration with plugin options, and a React component using k tagged template and useCss for scoped styles."},"warnings":[{"fix":"Set sassOptions: {} in plugin options.","message":"'sassOptions' must be provided as an object even if empty, otherwise Sass preprocessing fails.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use only sync PostCSS plugins or avoid asynchronous ones.","message":"Only synchronous PostCSS plugins work (e.g., autoprefixer) because Babel transforms are synchronous.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Provide a unique namespace string in plugin options.","message":"The 'namespace' option is required for micro-frontends; missing it can cause selector collisions.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use ['module:kremling-babel-plugin', options] in .babelrc.","message":"Using 'require' syntax in Babel config may cause resolution errors; use 'module:' prefix instead.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev kremling-loader","cause":"Missing peer dependency kremling-loader.","error":"Error: Cannot find module 'kremling-loader'"},{"fix":"Add 'sassOptions': {} to the plugin options.","cause":"sassOptions not provided in plugin configuration.","error":"Error: sassOptions must be an object, received undefined"},{"fix":"Change import to: import { k } from 'kremling'","cause":"Using default import of 'k' instead of named import.","error":"TypeError: (0 , _kremling.k) is not a function"},{"fix":"Check CSS for valid Sass syntax or use postcssOptions if not using Sass.","cause":"Sass syntax error in a k tagged template CSS string.","error":"SyntaxError: Unexpected token while parsing CSS with Sass"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}