Molcss

A simple, lightweight, and powerful CSS-in-JS library.

Features

Extract Atomic CSS at build time.

input.js

import { css } from 'molcss'

const molcssStyle = css`
  color: red;
  border: 1px solid black;

  &:hover {
    color: blue;
  }
`

output.js

const molcssStyle = 'c0 m0 c1a'

output.css

.c0 { color: red }
.m0 { border: 1px solid black }
.c1a:hover { color: blue }

Vanilla JS and React support.

use-in-vanilla.js

const UseInVanilla = () =>
  `<div class="${molcssStyle}"></div>`

use-in-react.jsx

const UseInReact = () =>
  <div className={molcssStyle}></div>

Runtime style and SSR / SSG support.

input.jsx

/** @jsxImportSource molcss/react */
import { css } from 'molcss'
import { renderToString as render } from 'react-dom/server'

const staticStyle = css`
  color: blue;
`

const dynamicStyle = (value) => css`
  color: ${value};
`

const Component = ({ className }) =>
  <div className={className}>For components, insert style tags.</div>

const html = render(
  <div className={staticStyle}>
    <div css={dynamicStyle('red')}>Will be red.</div>
    <Component css={dynamicStyle('green')} />
  </div>
)

console.log(html)

Result (formatted)

<div class="c0">
  <div class="c1 bL00" style="--molcss-bL: red;">
    Will be red.
  </div>
  <style data-molcss="bL1621153576">
    .bL1621153576 {
      --molcss-bL: green
    }
  </style>
  <div class="c1 bL1621153576">
    For components, insert style tags.
  </div>
</div>

output.css

.c0 { color: blue }
.c1 { color: var(--molcss-bL) }