kremling-babel-plugin
A plugin that allows inline kremling css to omit ampersands.
Instead of writing out ampersands in your css:
const css = `
& .kangaroo {
color: brown;
}
`;omit them completely while keeping your css scoped:
const css = k`
.kangaroo {
color: brown;
}
`;The k tagged template is required for babel to target the correct css strings.
React example:
import React from 'react';
import { useCss, k } from 'kremling';
export function MyComponent() {
const scope = useCss(css);
return (
<div {...scope} className="custom">
Custom
</div>
);
}
const css = k`
.custom {
background-color: red;
}
`;Plugin Options
namespace (string)
Customize kremling namespace for project. Helpful when working in a micro-frontend stack with many front-end services.
postcssOptions (object)
Options pass-through for postcss. Only synchronous plugins work due to babel's synchronous nature
(eg: autoprefixer).
sassOptions (object)
Options pass-through for sass. Required prerequisite:
Sass npm module.
Note: even if you don't need sass options, you still must pass an object for the sass compiler to run.
Opt-out of scoping
Opting out of scoping from within your kremling css is a nice little escape
hatch when you need to add some global styles. Just prepend your rules using
the :global pseudo class and the plugin will omit scoping and remove that
class:
const css = k`
:global .test {
background-color: red;
}
`;
// css output:
// .test { background-color: red; }.babelrc Example
{
"presets": [
"@babel/preset-env"
],
"plugins": [
["module:kremling-babel-plugin", {
"namespace": "super-custom",
"sassOptions": {}
}]
]
}