molcss v0.1.1

Molcss

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

Usage

import 'molcss/style.css'
import { css } from 'molcss'

const className = css`
  color: red;
  width: 500px;
  border: 1px solid black;
  &:hover {
    color: blue;
  }
`

export default () => <div className={className} />

Features

Atomic CSS-in-JS

The described style definitions are atomically decomposed and reused at build time.

Before build

import { css, mergeStyle } from 'molcss'

const a = css`
  color: black;
  padding: 1px;
  margin-top: 4px;
`

const b = css`
  color: black;
  padding: 2px;
  margin: 3px;
`

const c1 = mergeStyle(a, b)
const c2 = mergeStyle(b, a)

After build

import { mergeStyle } from 'molcss'

const a = 'c0 a0 l0'
const b = 'c0 a1 d0'
const c1 = mergeStyle(a, b) // 'c0 a1 d0'
const c2 = mergeStyle(b, a) // 'c0 a0 d0 l0'

/* generated css */
.c0 { color: black; }
.a0 { padding: 1px; }
.a1 { padding: 2px; }
.d0 { margin: 3px; }
.l0 { margin-top: 4px; }

Runtime Style

Supports runtime styles. However, unlike static styles, the css return value is a dedicated object. For vanilla JS, use generateRuntime. For React, you can use CSS props to support SSR.

/** @jsxImportSource molcss/react */
import { css, generateRuntime } from 'molcss'

const staticStyle = css`
  color: blue;
`

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

console.log(typeof staticStyle)         // string
console.log(typeof dynamicStyle('red')) // object

const ForVanillaJS = () => `
  <div class=${staticStyle}></div>
  <div class=${generateRuntime(dynamicStyle('red'))}></div>
`

const ForReact = () =>
  <>
    <div className={staticStyle} />
    <div css={dynamicStyle('red')} />
  </>

Setup

Vite + React

npm install molcss
npm install -D @vitejs/plugin-react

// code
import 'molcss/style.css'

// molcss.context.cjs
const { createContext } = require('molcss/context')

module.exports = createContext()

// vite.config.js
import { createRequire } from 'node:module'
import react from '@vitejs/plugin-react'

const require = createRequire(import.meta.url)
const molcssContext = require('./molcss.context.cjs')

export default defineConfig({
  // ...
  plugins: [
    react({
      jsxImportSource: 'molcss/react',
      babel: {
        plugins: [
          ['molcss/babel-plugin', {
            context: molcssContext,
          }]
        ]
      }
    })
  ]
})

// postcss.config.cjs
const molcssContext = require('./molcss.context.cjs')

module.exports = {
  plugins: [
    require('molcss/postcss-plugin')({
      content: 'src/**/*.{js,jsx,ts,tsx}',
      context: molcssContext,
    }),
  ],
}

// tsconfig.json (When using TypeScript)
{
  "compilerOptions": {
    "jsxImportSource": "molcss/react",
  }
}

Next.js appDir

npm install molcss
npm install babel-loader postcss-flexbugs-fixes postcss-preset-env

// code
import 'molcss/style.css'

// molcss.context.js
const { createContext } = require('molcss/context')

module.exports = createContext()

// next.config.js
const molcssContext = require('./molcss.context')

module.exports = {
  webpack(config) {
    config.module.rules.unshift({
      test: /\.(jsx?|tsx?)$/i,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        plugins: [
          ['molcss/babel-plugin', {
            context: molcssContext,
          }],
        ],
      },
    })

    return config
  },
}

// postcss.config.js
const molcssContext = require('./molcss.context')

module.exports = {
  plugins: [
    // nextjs default settings
    // https://nextjs.org/docs/pages/building-your-application/configuring/post-css#customizing-plugins
    'postcss-flexbugs-fixes',
    ['postcss-preset-env', {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    }],
    // molcss settings
    ['molcss/postcss-plugin', {
      content: [
        'app/**/*.{js,jsx,ts,tsx}',
        'src/**/*.{js,jsx,ts,tsx}',
      ],
      context: molcssContext,
    }],
  ],
}

// package.json
// Change the browserslist settings so that only Molcss converts Tagged templates.
// - safari 12 -> 13
// https://nextjs.org/docs/architecture/supported-browsers
{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 13"
  ]
}

// tsconfig.json (or jsconfig.json)
{
  "compilerOptions": {
    "jsxImportSource": "molcss/react",
  }
}