Candy-atomic NPM

candy-atomic

Atomic CSS-in-JS solution

Install

npm install candy-atomic

Or:

yarn add candy-atomic

Usage

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

candy-sheet candy-utils tiny-css-prefixer

@everything-registry/sub-chunk-1290 candy-moon

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago