{"_id":"@bizrk/leancss","_rev":"6-856fd8866ffa636c652fb8fdd010b37f","name":"@bizrk/leancss","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@bizrk/leancss","version":"0.1.0","keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"author":{"name":"Adam Birkner"},"license":"MIT","_id":"@bizrk/leancss@0.1.0","maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"dist":{"shasum":"5022a08e8b3d185dc155deca54267d5212a715e8","tarball":"https://registry.npmjs.org/@bizrk/leancss/-/leancss-0.1.0.tgz","fileCount":5,"integrity":"sha512-R2EhAL0kqfJRKbJcWMCF6clqGksQ7blb4mXM34qXNTiWL+AXh3Xkgw8xVOjp3Cxg8I1IWnkWXpkoz013kfD2QA==","signatures":[{"sig":"MEUCIA4gWhch4qMNSEBqttqQF3YCpGu+WNNmiVVkgc2Yn3qIAiEAsTaSQCtXkqSpbifhV7qMx8Pl5hgoMPLLJgNX7cOJDng=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14217},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"a0a6a32011629787f4ce3face06171ac5f77273a","scripts":{"test":"vitest run","build":"tsc","test:watch":"vitest"},"_npmUser":{"name":"bizrk","email":"adam@birkner.dev"},"_npmVersion":"10.9.4","description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","directories":{"test":"tests"},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"vitest":"^1.5.0","postcss":"^8.4.38","typescript":"^5.4.5","@types/node":"^20.12.7"},"peerDependencies":{"postcss":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/leancss_0.1.0_1773329058377_0.5176537298515296","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bizrk/leancss","version":"0.1.1","keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"author":{"name":"Adam Birkner"},"license":"MIT","_id":"@bizrk/leancss@0.1.1","maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"dist":{"shasum":"99b07885322874c1827dfd5839999d3ad85e66e2","tarball":"https://registry.npmjs.org/@bizrk/leancss/-/leancss-0.1.1.tgz","fileCount":7,"integrity":"sha512-cz+wLf62zb+9qRqCqi6ZPGM2ctYCe7Mf2pcp99ZBVtcFbvvnib9CUUTf6LaU52n2sK6Z7kI10AYzfibAze+rzQ==","signatures":[{"sig":"MEYCIQCOdn89R/8yClgIj6fQi8DlZXzN4DcMU3dGRRScVR768gIhAIRyZl9INLGMRsUenWiVVq95j9KCniA089s/sep/Ak2k","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18174},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"1400d93ed47fc572dcb5bdab61c0ff9378f4970b","scripts":{"test":"vitest run","build":"tsup src/index.ts --format cjs,esm --dts","test:watch":"vitest"},"_npmUser":{"name":"bizrk","email":"adam@birkner.dev"},"_npmVersion":"10.9.4","description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","directories":{"test":"tests"},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vitest":"^1.5.0","postcss":"^8.4.38","typescript":"^5.4.5","@types/node":"^20.12.7"},"peerDependencies":{"postcss":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/leancss_0.1.1_1773333950905_0.07683801723306494","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@bizrk/leancss","version":"0.1.3","keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"author":{"name":"Adam Birkner"},"license":"MIT","_id":"@bizrk/leancss@0.1.3","maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"bin":{"leancss":"dist/cli/index.js"},"dist":{"shasum":"4a68171a0b8fd2812b89d787d0a0466e852d530a","tarball":"https://registry.npmjs.org/@bizrk/leancss/-/leancss-0.1.3.tgz","fileCount":12,"integrity":"sha512-c9cRJftlc1bNdhKnJqGdFD//XVaV8f3BI+qVcyfm+pw0e0oSJPCygalB4XVTD37IuKEHbBNJkOjf6h2fS8mKQw==","signatures":[{"sig":"MEUCIFDqb5MkH5ILj8K4X4XjfIWoToRbsj/RbyQFoske8oWdAiEA4DUI8lyOhHET0qaI6rqxUX2f/JCZ2b8hRriFVXfsrIc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":422230},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"cf2ae312490e20053061b84112a899376b551e51","scripts":{"test":"vitest run","build":"tsup src/index.ts src/cli/index.ts --format cjs,esm --dts","test:watch":"vitest"},"_npmUser":{"name":"bizrk","email":"adam@birkner.dev"},"_npmVersion":"10.9.4","description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","directories":{"test":"tests"},"_nodeVersion":"22.22.0","dependencies":{"@bizrk/leancss":"file:bizrk-leancss-0.1.1.tgz"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vitest":"^1.5.0","postcss":"^8.4.38","fast-glob":"^3.3.3","typescript":"^5.4.5","@types/node":"^20.12.7"},"peerDependencies":{"postcss":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/leancss_0.1.3_1773549585272_0.7091245345232309","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@bizrk/leancss","version":"0.1.4","keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"author":{"name":"Adam Birkner"},"license":"MIT","_id":"@bizrk/leancss@0.1.4","maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"bin":{"leancss":"dist/cli/index.js"},"dist":{"shasum":"7c13ef2ac4ebfe0dd3f6e1ccb61be459234d182b","tarball":"https://registry.npmjs.org/@bizrk/leancss/-/leancss-0.1.4.tgz","fileCount":12,"integrity":"sha512-xdNoYmfKTsRw6mWBlBOPD3NJe27DrspkxQi0hZonInTBGMhr0HYEV1oQ7KmCz8A5u+hXBOJfeUOqh8Znu5HpQQ==","signatures":[{"sig":"MEUCIQCTlTXwI14TZy10yYqbpa99j+duElJSMXOXMbUWsV2ROgIgUqB2D3BQ2DC6E4/kyfoIQyTFFytESXsOxVifW9tGkcs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":422152},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"cf2ae312490e20053061b84112a899376b551e51","scripts":{"test":"vitest run","build":"tsup src/index.ts src/cli/index.ts --format cjs,esm --dts","test:watch":"vitest"},"_npmUser":{"name":"bizrk","email":"adam@birkner.dev"},"_npmVersion":"10.9.4","description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","directories":{"test":"tests"},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vitest":"^1.5.0","postcss":"^8.4.38","fast-glob":"^3.3.3","typescript":"^5.4.5","@types/node":"^20.12.7"},"peerDependencies":{"postcss":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/leancss_0.1.4_1773549946417_0.7753802291863707","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@bizrk/leancss","version":"0.2.1","keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"author":{"name":"Adam Birkner"},"license":"MIT","_id":"@bizrk/leancss@0.2.1","maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"bin":{"leancss":"dist/cli/index.js"},"dist":{"shasum":"6478fa98d051dc06aec480fb737fe75a84e160fb","tarball":"https://registry.npmjs.org/@bizrk/leancss/-/leancss-0.2.1.tgz","fileCount":12,"integrity":"sha512-dhn5KP0sQ0YxWyxwRvJYVSvvzK+qsafBHfkrbZlrML5Z2MdrAtLpTtkQBpL8s0ZRYNw96i8qElwWh/TFOqi3tg==","signatures":[{"sig":"MEQCIE/kDFa4i2VKrsEi7wI+7IDsEnp60JX+ZtGyMmddRNW8AiA2uPv/3rpiWfx5/2K+AevTd8b5ciThnQ3klK42azCEbw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":430763},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"c3440f6b53fdc04287004218582962253f5ad1e0","scripts":{"test":"vitest run","build":"tsup src/index.ts src/cli/index.ts --format cjs,esm --dts","test:watch":"vitest"},"_npmUser":{"name":"bizrk","email":"adam@birkner.dev"},"_npmVersion":"10.9.4","description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","directories":{"test":"tests"},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","vitest":"^1.5.0","postcss":"^8.4.38","fast-glob":"^3.3.3","typescript":"^5.4.5","@types/node":"^20.12.7"},"peerDependencies":{"postcss":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/leancss_0.2.1_1776693949900_0.8060704364330882","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@bizrk/leancss","version":"0.3.0","description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","main":"dist/index.js","bin":{"leancss":"dist/cli/index.js"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"directories":{"test":"tests"},"scripts":{"build":"tsup src/index.ts src/cli/index.ts --format cjs,esm --dts","test":"vitest run","test:watch":"vitest"},"keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"author":{"name":"Adam Birkner"},"license":"MIT","peerDependencies":{"postcss":"^8.0.0"},"devDependencies":{"@types/node":"^20.12.7","postcss":"^8.4.38","tsup":"^8.5.1","typescript":"^5.4.5","vitest":"^1.5.0"},"dependencies":{"fast-glob":"^3.3.3","yaml":"^2.8.3"},"_id":"@bizrk/leancss@0.3.0","gitHead":"9b8a3b74a70a8da12c2add76f0677ed88d589cb8","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-R6rBWWwZson2HjiZipjFF5vXrSwXnvVapHqkpKItey/EDa5DecU0MX6Fcn1SNeagPVK6h0emPjMpXFI8hzpWhg==","shasum":"d3e57940a71324a7872e91d5e865b8cf15f5ada4","tarball":"https://registry.npmjs.org/@bizrk/leancss/-/leancss-0.3.0.tgz","fileCount":13,"unpackedSize":259246,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGemYQ7AstnJL2z3pgDnaPnumv1vuksWLXDE99SsN+8+AiEAgp3FMEla4svrQm5iEs7VUa5HYePEpu5rdCIKzm7A58Q="}]},"_npmUser":{"name":"bizrk","email":"adam@birkner.dev"},"maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/leancss_0.3.0_1776979670996_0.6711818207768332"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-12T15:24:17.968Z","modified":"2026-04-23T21:27:51.256Z","0.1.0":"2026-03-12T15:24:18.505Z","0.1.1":"2026-03-12T16:45:51.062Z","0.1.3":"2026-03-15T04:39:45.445Z","0.1.4":"2026-03-15T04:45:46.572Z","0.2.1":"2026-04-20T14:05:50.042Z","0.3.0":"2026-04-23T21:27:51.141Z"},"author":{"name":"Adam Birkner"},"license":"MIT","keywords":["css","postcss","postcss-plugin","utility","atomic","composition","design-system","leancss","set","lift"],"description":"CSS-first utility composition with @set and @lift that provides a clean, layer-aware alternative to Sass mixins and Tailwind @apply for atomic compositions.","maintainers":[{"name":"bizrk","email":"adam@birkner.dev"}],"readme":"# LeanCSS\r\n\r\n**Define sets. Lift them into components. Ship lean CSS.**\r\n\r\nLeanCSS is a CSS-first utility composition tool.\r\n\r\nIt lets you define reusable style bundles with `@set` (or `@drop`), then expand them inside selectors using `@lift`.\r\n\r\nUnlike utility-class frameworks, LeanCSS keeps styling in CSS instead of HTML while still enabling composable, reusable patterns.\r\n\r\nLeanCSS runs at build time and outputs plain CSS.\r\n\r\n* * *\r\n\r\n# Why LeanCSS?\r\n\r\nModern CSS tooling tends to fall into two camps.\r\n\r\n### Utility frameworks\r\n\r\nExample:\r\n\r\n&lt;button class=\"inline-flex items-center gap-2 px-4 py-2 rounded-md\"&gt;\r\n\r\nWhat is this?\r\n\r\nPros\r\n\r\n- fast to prototype\r\n    \r\n- composable\r\n    \r\n\r\nCons\r\n\r\n- styles move into markup\r\n    \r\n- semantics become unclear\r\n    \r\n- component styles become fragmented\r\n    \r\n\r\n* * *\r\n\r\n### Sass mixins\r\n\r\nExample:\r\n\r\n.button {  \r\n@include flex-center;  \r\n}\r\n\r\nPros\r\n\r\n- reusable abstractions\r\n\r\nCons\r\n\r\n- hidden logic\r\n    \r\n- hard to inspect\r\n    \r\n- often grows into a mini programming language\r\n    \r\n\r\n* * *\r\n\r\n### LeanCSS approach\r\n\r\nLeanCSS keeps composition **inside CSS itself**.\r\n\r\nExample:\r\n\r\n@set inline-flex {  \r\ndisplay: inline-flex;  \r\n}  \r\n<br/>@set items-center {  \r\nalign-items: center;  \r\n}  \r\n<br/>@set gap-2 {  \r\ngap: var(--space-2);  \r\n}  \r\n<br/>.button {  \r\n@lift inline-flex items-center gap-2;  \r\n}\r\n\r\nOutput:\r\n\r\n.button {  \r\ndisplay: inline-flex;  \r\nalign-items: center;  \r\ngap: var(--space-2);  \r\n}\r\n\r\n* * *\r\n\r\n# Features\r\n\r\nLeanCSS is intentionally simple.\r\n\r\n• CSS-first authoring  \r\n• reusable style bundles via `@set` and `@drop`  \r\n• composition via `@lift`  \r\n• responsive shorthands (`@md`, `@c-lg`)  \r\n• **Zero-config `design.md` parsing & generation**\r\n• alias sets  \r\n• cascade layer friendly  \r\n• works with `.css` and `.scss`  \r\n• outputs plain CSS  \r\n• zero runtime\r\n\r\n* * *\r\n\r\n# Installation\r\n\r\nnpm install @bizrk/leancss\r\n\r\nAdd LeanCSS to your PostCSS configuration.\r\n\r\nExample (`postcss.config.mjs`):\r\n\r\n```javascript\r\nimport leancss from \"@bizrk/leancss\"  \r\n\r\nexport default {  \r\n  plugins: [  \r\n    leancss()  \r\n  ]  \r\n}\r\n```\r\n\r\n*Note: LeanCSS exports both CommonJS and ECMAScript modules out-of-the-box. If your modern framework (like Vite) enforces `\"type\": \"module\"`, you can safely use `postcss.config.js` or `postcss.config.mjs` using `import`. If using CommonJS, use `postcss.config.cjs` and `require(\"@bizrk/leancss\")`.*\r\n\r\nLeanCSS runs during the CSS build process.\r\n\r\n* * *\r\n\r\n# Editor Support (VS Code)\r\n\r\nTo prevent VS Code from reporting \"Unknown at-rule\" warnings for `@set` and `@lift`, you can configure custom CSS data.\r\n\r\nCreate `.vscode/leancss.css-data.json`:\r\n\r\n```json\r\n{\r\n  \"version\": 1.1,\r\n  \"atDirectives\": [\r\n    {\r\n      \"name\": \"@set\",\r\n      \"description\": \"LeanCSS: Defines a reusable declaration bundle or alias bundle.\"\r\n    },\r\n    {\r\n      \"name\": \"@drop\",\r\n      \"description\": \"LeanCSS: Like @set, but additionally generates a CSS class of the same name.\"\r\n    },\r\n    {\r\n      \"name\": \"@lift\",\r\n      \"description\": \"LeanCSS: Expands one or more sets into the current selector rule.\"\r\n    },\r\n    { \"name\": \"@sm\", \"description\": \"LeanCSS responsive media query for small viewports (--media-sm).\" },\r\n    { \"name\": \"@md\", \"description\": \"LeanCSS responsive media query for medium viewports (--media-md).\" },\r\n    { \"name\": \"@lg\", \"description\": \"LeanCSS responsive media query for large viewports (--media-lg).\" },\r\n    { \"name\": \"@xl\", \"description\": \"LeanCSS responsive media query for extra large viewports (--media-xl).\" },\r\n    { \"name\": \"@2xl\", \"description\": \"LeanCSS responsive media query for 2x extra large viewports (--media-2xl).\" },\r\n    { \"name\": \"@c-sm\", \"description\": \"LeanCSS responsive container query for small containers (--container-sm).\" },\r\n    { \"name\": \"@c-md\", \"description\": \"LeanCSS responsive container query for medium containers (--container-md).\" },\r\n    { \"name\": \"@c-lg\", \"description\": \"LeanCSS responsive container query for large containers (--container-lg).\" },\r\n    { \"name\": \"@c-xl\", \"description\": \"LeanCSS responsive container query for extra large containers (--container-xl).\" },\r\n    { \"name\": \"@c-2xl\", \"description\": \"LeanCSS responsive container query for 2x extra large containers (--container-2xl).\" }\r\n  ]\r\n}\r\n```\r\n\r\nThen tell VS Code to use it in `.vscode/settings.json`:\r\n\r\n```json\r\n{\r\n  \"css.customData\": [\"./.vscode/leancss.css-data.json\"],\r\n  \"scss.customData\": [\"./.vscode/leancss.css-data.json\"]\r\n}\r\n```\r\n\r\n* * *\r\n\r\n# Basic Usage\r\n\r\nDefine reusable sets.\r\n\r\n@set inline-flex {  \r\ndisplay: inline-flex;  \r\n}  \r\n<br/>@set items-center {  \r\nalign-items: center;  \r\n}  \r\n<br/>@set gap-2 {  \r\ngap: var(--space-2);  \r\n}\r\n\r\nUse them in selectors.\r\n\r\n.button {  \r\n@lift inline-flex items-center gap-2;  \r\n}\r\n\r\nLeanCSS expands the sets during compilation.\r\n\r\n* * *\r\n\r\n# Drop utility groups\r\n\r\nSometimes you want a defined set to *also* be available as a regular CSS class without having to manually map it. You can use `@drop` instead of `@set`.\r\n\r\n@drop container {\r\n  max-width: 1200px;\r\n}\r\n\r\nThis does two things:\r\n1. It registers `container` so it can be used with `@lift container`.\r\n2. It outputs a `.container { max-width: 1200px; }` class directly in your CSS.\r\n\r\n* * *\r\n\r\n# Responsive Shorthands\r\n\r\nLeanCSS supports responsive shorthand at-rules that quickly compile into concrete viewport and container queries natively.\r\n\r\nViewport shorthands: `@sm`, `@md`, `@lg`, `@xl`, `@2xl`\r\nContainer shorthands: `@c-sm`, `@c-md`, `@c-lg`, `@c-xl`, `@c-2xl`\r\n\r\nYou can nest them anywhere: inside `@set` definitions, `@drop` definitions, or standard CSS classes.\r\n\r\n```css\r\n@set app-card {\r\n  padding: 1rem;\r\n\r\n  @md {\r\n    padding: 2rem;\r\n  }\r\n\r\n  @c-lg {\r\n    flex-direction: row;\r\n  }\r\n}\r\n```\r\n\r\nCompiles to native nested queries:\r\n\r\n```css\r\n.app-card {\r\n  padding: 1rem;\r\n\r\n  @media (width >= 768px) {\r\n    padding: 2rem;\r\n  }\r\n\r\n  @container (width >= 48rem) {\r\n    flex-direction: row;\r\n  }\r\n}\r\n```\r\n\r\n### Configuration\r\n\r\nLeanCSS ships with built-in breakpoint defaults. If you wish to override them, define `--media-{size}` or `--container-{size}` custom properties directly in your `:root`. No separate JSON config is required.\r\n\r\n```css\r\n:root {\r\n  --media-sm: 640px;\r\n  --media-md: 768px;\r\n  --media-lg: 1024px;\r\n  --media-xl: 1280px;\r\n  --media-2xl: 1536px;\r\n\r\n  --container-sm: 24rem;\r\n  --container-md: 36rem;\r\n  --container-lg: 48rem;\r\n  --container-xl: 64rem;\r\n  --container-2xl: 80rem;\r\n}\r\n```\r\n\r\nLeanCSS treats these properties as compile-time values and substitutes them gracefully without ever emitting invalid `var()` boundaries into output at-rules.\r\n\r\n* * *\r\n\r\n# Design System Generation (`design.md`)\r\n\r\nLeanCSS has built-in, zero-config support for parsing Google's **`design.md`** specification to automatically build your foundational design tokens and utility sets.\r\n\r\nIf LeanCSS detects a `design.md` file in your project root, it will automatically parse the YAML frontmatter and generate a `design.lean.css` file containing:\r\n1. All your defined `colors`, `spacing`, and `rounded` tokens as native CSS `--variables` attached to `:root`.\r\n2. All your `typography` and `components` blocks as fully expanded LeanCSS `@set` bundles.\r\n\r\nExample `design.md`:\r\n```yaml\r\n---\r\nname: My Design System\r\ncolors:\r\n  primary: \"#1A1C1E\"\r\nspacing:\r\n  sm: \"8px\"\r\ncomponents:\r\n  card-sm:\r\n    backgroundColor: \"{colors.primary}\"\r\n    padding: \"{spacing.sm}\"\r\n---\r\n```\r\n\r\nWhen LeanCSS compiles, it automatically generates a `design.lean.css` file:\r\n```css\r\n:root {\r\n  --colors-primary: #1A1C1E;\r\n  --spacing-sm: 8px;\r\n}\r\n\r\n@set card-sm {\r\n  background-color: var(--colors-primary);\r\n  padding: var(--spacing-sm);\r\n}\r\n```\r\n\r\nYou can then freely `@lift: card-sm;` anywhere in your project! No configuration required, and it automatically hot-reloads when running inside tools like Vite or Webpack.\r\n\r\n* * *\r\n\r\n# CLI Tools\r\n\r\nLeanCSS is reversible and comes with maintenance tools to keep your project clean. \r\n\r\nYou can run these commands via `npx leancss <command>`:\r\n\r\n### Trim\r\nKeep the registry lean with `trim`, which removes unused patterns and optionally flattens weak ones.\r\n\r\n```bash\r\n# Preview what would be removed\r\nnpx leancss trim\r\n\r\n# Actually remove unused patterns\r\nnpx leancss trim --write\r\n\r\n# Automatically flatten patterns only used 1 time into their parent selector\r\nnpx leancss trim --write --single-use\r\n```\r\n\r\n### Deload\r\nIf a project is finished, handed off, or simply no longer needs the abstraction layer, you can deload back to plain CSS at any time.\r\n\r\nThis flattens LeanCSS back into standard CSS.\r\n\r\n```bash\r\n# Preview what would be flattened\r\nnpx leancss deload\r\n\r\n# Flatten every @lift into plain CSS\r\nnpx leancss deload --write\r\n\r\n# Flatten every @lift AND remove the original @set declarations entirely\r\nnpx leancss deload --write --clean\r\n```\r\n\r\n* * *\r\n\r\n# Alias Sets\r\n\r\nSets can compose other sets.\r\n\r\nExample:\r\n\r\n@set flex-center {  \r\n@lift inline-flex items-center justify-center;  \r\n}\r\n\r\nUsage:\r\n\r\n.icon {  \r\n@lift flex-center;  \r\n}\r\n\r\nOutput:\r\n\r\n.icon {  \r\ndisplay: inline-flex;  \r\nalign-items: center;  \r\njustify-content: center;  \r\n}\r\n\r\n* * *\r\n\r\n# Cascade Layers\r\n\r\nLeanCSS works well with CSS cascade layers.\r\n\r\nExample:\r\n\r\n@layer reset, tokens, base, utilities, components, overrides;\r\n\r\nDefine sets in a utilities layer:\r\n\r\n@layer utilities {  \r\n@set inline-flex {  \r\ndisplay: inline-flex;  \r\n}  \r\n<br/>@set items-center {  \r\nalign-items: center;  \r\n}  \r\n}\r\n\r\nConsume them in components:\r\n\r\n@layer components {  \r\n.button {  \r\n@lift inline-flex items-center;  \r\n}  \r\n}\r\n\r\nLeanCSS preserves layer ordering.\r\n\r\n* * *\r\n\r\n# Example Project Structure\r\n\r\nsrc/styles  \r\n├─ tokens.css  \r\n├─ utilities.css  \r\n├─ base.css  \r\n├─ components  \r\n│ ├─ button.css  \r\n│ ├─ card.css  \r\n│ └─ hero.css  \r\n└─ app.css\r\n\r\nExample utilities file:\r\n\r\n```css\r\n@layer utilities {  \r\n  @set inline-flex {  \r\n    display: inline-flex;  \r\n  }  \r\n\r\n  @set items-center {  \r\n    align-items: center;  \r\n  }  \r\n\r\n  @set gap-2 {  \r\n    gap: var(--space-2);  \r\n  }  \r\n\r\n  @set rounded-md {  \r\n    border-radius: var(--radius-md);  \r\n  }  \r\n}\r\n```\r\n\r\nExample component:\r\n\r\n```css\r\n.button {  \r\n  @lift inline-flex items-center gap-2 rounded-md;  \r\n}\r\n```\r\n\r\n### Running PostCSS\r\n\r\nYou can use the `postcss-cli` package to compile your CSS. Add these scripts to your `package.json`:\r\n\r\n```json\r\n{\r\n  \"scripts\": {\r\n    \"build:css\": \"postcss src/styles/app.css -o dist/output.css\",\r\n    \"watch:css\": \"postcss src/styles/app.css -o dist/output.css --watch\"\r\n  }\r\n}\r\n```\r\n\r\nRun `npm run build:css` to build your styles once for production, or `npm run watch:css` while actively developing to automatically re-compile whenever you save your CSS files.\r\n\r\n* * *\r\n\r\n# Philosophy\r\n\r\nLeanCSS focuses on small, composable primitives.\r\n\r\nIt encourages:\r\n\r\n• semantic selectors  \r\n• design token usage  \r\n• cascade layers  \r\n• small reusable patterns\r\n\r\nIt intentionally avoids:\r\n\r\n• HTML class scanning  \r\n• runtime styling engines  \r\n• heavy configuration files\r\n\r\nLeanCSS is designed to remain small, predictable, and easy to reason about.\r\n\r\n* * *\r\n\r\n# Error Handling\r\n\r\nLeanCSS validates styles during compilation.\r\n\r\n### Unknown set\r\n\r\n.button {  \r\n@lift missing-set;  \r\n}\r\n\r\nError:\r\n\r\nUnknown LeanCSS set: missing-set\r\n\r\n* * *\r\n\r\n### Duplicate set\r\n\r\n@set panel { ... }  \r\n@set panel\r\n\r\nError:\r\n\r\nDuplicate LeanCSS set definition: panel\r\n\r\n* * *\r\n\r\n### Circular reference\r\n\r\n@set a { @lift b }  \r\n@set b\r\n\r\nError:\r\n\r\nCircular set reference detected\r\n\r\n* * *\r\n\r\n# Comparison\r\n\r\n| Tool | Composition Location |\r\n| --- | --- |\r\n| Tailwind | HTML |\r\n| Sass mixins | Sass |\r\n| LeanCSS | CSS |\r\n\r\nLeanCSS combines composability with semantic CSS architecture.\r\n\r\n* * *\r\n\r\n# License\r\n\r\nLeanCSS is released under the MIT License.\r\n\r\n* * *\r\n\r\n# Contributing\r\n\r\nContributions are welcome.\r\n\r\nAreas that benefit from community help:\r\n\r\n• integrations  \r\n• preset libraries  \r\n• documentation  \r\n• testing\r\n\r\n* * *\r\n\r\n# Future Ideas\r\n\r\nLeanCSS v1 focuses on a minimal core.\r\n\r\nPossible future additions include:\r\n\r\n• preset utility libraries  \r\n• devtools for inspecting `@lift` expansion  \r\n• design system integrations\r\n\r\n* * *\r\n\r\n# LeanCSS\r\n\r\n**Define sets. Lift them into components.**","readmeFilename":"readme.md"}