candy-atomic
v0.5.5
Published
Atomic CSS-in-JS solution
Downloads
35
Readme
candy-atomic
Atomic CSS-in-JS solution
Install
npm install candy-atomicOr:
yarn add candy-atomicUsage
candy-atomic works with any framework, support both object styles and string syntax.
Basic Usage
import { css } from "candy-atomic";
const className = css`
padding: 32px;
background-color: tomato;
`;
/*
const className = css({
padding: "32px",
backgroundColor: "tomato"
});
*/
render(<div className={className}>Box</div>);Pseudoclasses
import { css } from "candy-atomic";
const className = css`
padding: 32px;
background-color: tomato;
&:hover {
color: white;
}
`;
/*
const className = css({
padding: "32px",
backgroundColor: "tomato",
"&:hover": {
color: "white",
}
});
*/
render(<div className={className}>Box</div>);Media Queries
import { css } from "candy-atomic";
const className = css`
padding: 32px;
background-color: tomato;
&:hover {
color: white;
}
@media (min-width: 1024px) {
background-color: pink;
}
`;
/*
const className = css({
padding: "32px",
backgroundColor: "tomato",
"&:hover": {
color: "white",
},
"@media (min-width: 1024px)": {
backgroundColor: "pink"
}
});
*/
render(<div className={className}>Box</div>);Child Selectors
import { css } from "candy-atomic";
const className = css`
padding: 32px;
background-color: tomato;
&:hover {
color: white;
}
@media (min-width: 1024px) {
background-color: pink;
}
& > * + * {
margin-left: 16px;
}
`;
/*
const className = css({
padding: "32px",
backgroundColor: "tomato",
"&:hover": {
color: "white",
},
"@media (min-width: 1024px)": {
backgroundColor: "pink"
},
"& > * + *": {
marginLeft: "16px",
}
});
*/
render(<div className={className}>Box</div>);Static/Server-Side Rendering
For SSR, use the sheet.extractCss() method to return the static CSS string after rendering a view.
import { sheet } from "candy-atomic"
import React from "react"
import ReactDOMServer from "react-dom/server"
import App from "./App"
const html = ReactDOMServer.renderToString(<App />)
const doc = `<!DOCTYPE html>
<style id="__candy">${sheet.extractCss()}</style>
${html}
`