Embarrassingly simple css for React
- Kremling embraces the cascading nature of stylesheets while still allowing you to have scoped CSS. It allows you to define scoped styles that override global (or parent scoped) rules.
- Kremling does not create unnecessary layers of React components throughout the DOM tree that show up in React Dev Tools.
- Kremling cleans up after itself. Once components are removed from DOM, Kremling will remove the associate style tag.
- Simple chained API for conditional CSS classes
yarn add kremling
import React from "react";
import { Scoped, always, maybe } from "kremling";
const css = `
& .card {
display: flex;
color: #BADA55;
}
& .fear {
display: none;
}
`;
class KremlingKrew extends React.Component {
state = { gotBananas: true };
render() {
return (
<div>
<Scoped css={css}>
<div className="card">King K. Rool</div>
<div className={always("card").maybe("fear", this.state.gotBananas)}>
DK
</div>
</Scoped>
<div className="card">
{/** no styles applied because out of scope **/}
Clump & Crunch
</div>
</div>
);
}
}
A React Component which requires a css
prop. The
CSS rules defined in that property will be avaible only to children
of the rendered Scoped
Component. Scoped CSS rules must begin
with an &
.
The Scoped
Component optionally takes a namespace
prop which
defines a custom namespace for scoping your CSS.
always(String)
or a(String)
- Always return the string passes.
maybe(String, Boolean)
or m(String, Boolean)
- Conditionally return the String depending on if the second parameter is truthy.