ShardCSS

Atomic CSS な Zero-runtime CSS in JS ライブラリ

npm install @imasanari/shardcss

Usage

1. Vite pluginの追加

import shardcss from "@imasanari/shardcss/vite-plugin";

const variants = {
  // pseudo classes
  hover: "@media (hover: hover) { &:hover }",
  active: "&:active",
  focus: "&:focus",
  disabled: "&:disabled",
  // media query
  mqSm: "@media (width >= 640px)",
  mqMd: "@media (width >= 768px)",
  mqLg: "@media (width >= 1024px)",
  mqXl: "@media (width >= 1280px)",
  mq2xl: "@media (width >= 1536px)",
};

export default {
  plugins: [
    shardcss({
      content: "src/**/*.{ts,tsx,js,jsx}",
      variants,
    }),
  ],
};

// for TypeScript types
declare module "@imasanari/shardcss" {
  interface DefineVariants {
    app: keyof typeof variants;
  }
}

2. エントリーファイルへのスタイルのインポート

import "@imasanari/shardcss/style.css";

3.スタイルの作成

import { sc } from "@imasanari/shardcss";

const cssStyle = sc(
  sc.width`40px`, // width: 40px;
  sc.margin`8px`.mqMd`4px`, // margin: 8px; @media (width >= 768px) { margin: 4px; }
  sc.color`red`.hover`blue`, // color: red; &:hover { color: blue }
);

div.className = cssStyle;

React サンプル
see ./examples/vite-react-example