{"id":18034676,"url":"https://github.com/yuanqing/generate-css","last_synced_at":"2025-08-04T09:32:33.776Z","repository":{"id":39376286,"uuid":"297418017","full_name":"yuanqing/generate-css","owner":"yuanqing","description":":boom: Dynamically generate functional CSS classes from HTML and JavaScript source files","archived":false,"fork":false,"pushed_at":"2021-01-30T07:40:20.000Z","size":688,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-20T09:59:10.946Z","etag":null,"topics":["css","functional-css","generate-css"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuanqing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-21T17:51:58.000Z","updated_at":"2023-08-24T16:23:18.000Z","dependencies_parsed_at":"2022-08-24T16:31:36.207Z","dependency_job_id":null,"html_url":"https://github.com/yuanqing/generate-css","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/yuanqing/generate-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fgenerate-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fgenerate-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fgenerate-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fgenerate-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuanqing","download_url":"https://codeload.github.com/yuanqing/generate-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fgenerate-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266211626,"owners_count":23893361,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","functional-css","generate-css"],"created_at":"2024-10-30T11:13:20.932Z","updated_at":"2025-08-04T09:32:33.696Z","avatar_url":"https://github.com/yuanqing.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Generate CSS [![npm Version](https://img.shields.io/npm/v/generate-css?cacheSeconds=1800)](https://www.npmjs.com/package/generate-css) [![build](https://github.com/yuanqing/generate-css/workflows/build/badge.svg)](https://github.com/yuanqing/generate-css/actions?query=workflow%3Abuild) ![stability experimental](https://img.shields.io/badge/stability-experimental-red)\n\n\u003e Dynamically generate functional CSS classes from HTML and JavaScript source files\n\n## Features\n\n- Style your HTML using functional CSS classes, with support for applying styles specific to a pseudo-class (eg. `hover:bg-black`, `parent-hover:bg-black`) and/or specific to a breakpoint (eg. `sm@bg-black`)\n- Guarantees zero unused CSS; CSS classes are only included in the generated CSS file if they are actually used\n\n## Example\n\nGiven the following `example.html` file:\n\n\u003c!-- ```html markdown-interpolate: cat example/example.html --\u003e\n```html\n\u003clink href=\"style.css\" rel=\"stylesheet\"\u003e\n\u003cbutton class=\"bg-blue color-white font font-bold px-2 py-1 rounded-full hover:bg-black\"\u003eButton\u003c/button\u003e\n```\n\u003c!-- ``` end --\u003e\n\n…and the following `generate-css.config.json` configuration file:\n\n\u003c!-- ```json markdown-interpolate: cat example/generate-css.config.json --\u003e\n```json\n{\n  \"reset\": true,\n  \"theme\": {\n    \"baseFontSize\": {\n      \"default\": \"16px\"\n    },\n    \"baseSpace\": \"1rem\",\n    \"color\": {\n      \"black\": \"#000\",\n      \"blue\": \"#00f\",\n      \"white\": \"#fff\"\n    },\n    \"fontFamily\": {\n      \"default\": \"Helvetica, Arial, sans-serif\"\n    },\n    \"fontWeight\": {\n      \"bold\": \"bolder\"\n    }\n  }\n}\n```\n\u003c!-- ``` end --\u003e\n\nDo:\n\n```\n$ npx generate-css example.html --output style.css\n```\n\nThis will generate the following `style.css` file (with the opening reset rules omitted):\n\n```\n// ...reset rules...\n\nhtml {\n  font-size: 16px;\n}\n.hover\\:bg-black:hover {\n  background-color: #000;\n}\n.bg-blue {\n  background-color: #00f;\n}\n.color-white {\n  color: #fff;\n}\n.font {\n  font-family: Helvetica, Arial, sans-serif;\n}\n.font-bold {\n  font-weight: bolder;\n}\n.px-2 {\n  padding-right: 2rem;\n  padding-left: 2rem;\n}\n.py-1 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n```\n\nSee that:\n\n- With `theme.baseFontSize.default` set to `16px`, `font-size: 16px;` is applied on `html`.\n- With `theme.baseSpace` set to `1rem`, the padding value of `.px-2` is `2rem` (ie. `1rem` × `2`), and the padding value of `.py-1` is `1rem` (ie. `1rem` × `2`).\n\n## Usage\n\n### Functional CSS classes\n\nSee the [full list of functional CSS classes](/docs/css.md#readme) currently supported by Generate CSS.\n\nThere are two “types” of functional CSS classes:\n\n#### Classes *without* a `${key}`\n\nFor these classes, the value used in the generated CSS would generally be resolved from `theme[propertyName].default`.\n\n#### Classes *with* a `${key}`\n\nFor these classes, the value used in the generated CSS would generally be resolved from `theme[propertyName][key]`.\n\nFor certain CSS classes, if `theme[propertyName][key]` is `undefined`, the value used in the generated CSS might then be resolved through the following mapping:\n\n`key` | `resolveNumericValue(key)` | Example\n:--|:--|:--\n`auto` | `auto` | `w-auto` → `width: auto;`\n`full` | `100%` | `w-full` → `width: 100%;`\n`px` | `1px` | `w-px` → `width: 1px;`\n`([0-9]+)px` | `($1)px` | `w-8px` → `width: 8px;`\n`([0-9]+)/([0-9]+)` | `($1 / $2 * 100)%` | `w-2/3` → `width: 66.666667%;`\n`([0-9]+)` | `theme.baseSpace` × `($1)` | `w-2` → `width: 2rem;`\u003cbr\u003e(assuming `theme.baseSpace` is set to `1rem`)\n\n### Pseudo-classes\n\nTo apply a style on an element for a particular pseudo-class state only, add the pseudo-class keyword followed by a `:` character (eg. `hover:`) *before* the functional CSS class name.\n\nFor example, using the class `hover:bg-black` in your HTML would result in the following CSS being generated:\n\n```\n.hover\\:bg-black:hover {\n  background-color: #000;\n}\n```\n\n### Parent pseudo-classes\n\nTo apply a style on an element for a particular *parent* pseudo-class state only, add the special parent pseudo-class keyword followed by a `:` character (eg. `parent-hover:`) *before* the functional CSS class name.\n\nFor example, using the class `parent-hover:bg-black` in your HTML would result in the following CSS being generated:\n\n```\n.parent:hover .parent-hover\\:bg-black {\n  background-color: #000;\n}\n```\n\n### Breakpoints\n\nBreakpoints must first be defined under the `theme.breakpoint` key in `generate-css.config.json`:\n\n```json\n{\n  \"theme\": {\n    \"breakpoint\": {\n      \"sm\": \"540px\",\n      \"md\": \"960px\"\n    }\n  }\n}\n```\n\nTo apply a style on an element for a particular breakpoint and higher (the media-query is a `min-width` on the particular breakpoint), add the name of the breakpoint followed by an `@` character (eg. `sm@`) *before* the functional CSS class name.\n\nFor example, using the class `sm@bg-black` in your HTML would result in the following CSS being generated:\n\n```\n@media (min-width: 540px) {\n  .sm\\@bg-black {\n    background-color: #000;\n  }\n}\n```\n\n### Configuration\n\nConfigure Generate CSS via a `generate-css.config.json` file or a `generate-css` key in your `package.json`.\n\n#### `\"reset\"`\n\n(*`boolean`*)\n\nWhether to prepend reset rules from [`normalize.css`](https://github.com/necolas/normalize.css/blob/master/normalize.css) and Generate CSS’s [`reset.css` file](https://github.com/yuanqing/generate-css/blob/master/src/css/reset.css) to the generated CSS file. Defaults to `true`.\n\n#### `\"theme\"`\n\n(*`object`*)\n\nAll keys are optional.\n\n- `theme.baseSpace` (*`string`*) — The base space unit used to resolve functional class names with a `${key}`, eg. `w-2` → `width: 2rem;` (assuming `theme.baseSpace` is set to `1rem`)\n- `theme.baseFontSize` (*`object`*) — A mapping of breakpoint names to the base `font-size` to be applied on the `html` element for that breakpoint. `theme.baseFontSize.default` is the base `font-size` applied on the `html` element.\n- `theme.breakpoint` (*`object`*) — A mapping of breakpoint names to screen widths.\n\nAll other keys are objects that map `${keys}` referenced in your functional CSS classes to their corresponding values:\n\n\u003c!-- markdown-interpolate: ts-node scripts/print-theme-keys.ts --\u003e\n- `theme.backgroundColor`\n- `theme.borderColor`\n- `theme.borderRadius`\n- `theme.borderWidth`\n- `theme.color`\n- `theme.fontFamily`\n- `theme.fontSize`\n- `theme.fontWeight`\n- `theme.height`\n- `theme.letterSpacing`\n- `theme.lineHeight`\n- `theme.margin`\n- `theme.maxHeight`\n- `theme.maxWidth`\n- `theme.minHeight`\n- `theme.minWidth`\n- `theme.padding`\n- `theme.space`\n- `theme.width`\n\u003c!-- end --\u003e\n\n## CLI\n\n\u003c!-- ``` markdown-interpolate: ts-node src/cli.ts --help --\u003e\n```\n\n  Description\n    Dynamically generate functional CSS classes from HTML and JavaScript source files\n\n  Usage\n    $ generate-css \u003cpattern\u003e [options]\n\n  Options\n    -a, --append     Glob pattern for CSS files to append to the generated CSS file\n    -c, --config     Path to a `generate-css` configuration file\n    -m, --minify     Whether to minify the generated CSS file  (default false)\n    -o, --output     Path to write the generated CSS file\n    -p, --prepend    Glob pattern for CSS files to prepend to the generated CSS file\n    -w, --watch      Whether to automatically generate a CSS file on changes to the source files  (default false)\n    -v, --version    Displays current version\n    -h, --help       Displays this message\n\n  Examples\n    $ generate-css --append reset.css\n    $ generate-css --minify\n    $ generate-css --output style.css\n    $ generate-css --prepend custom.css\n    $ generate-css --watch\n\n```\n\u003c!-- ``` end --\u003e\n\n## Prior art\n\n- The functional CSS class naming convention used in Generate CSS is heavily inspired by [Tailwind](https://tailwindcss.com/) and [Tachyons](https://tachyons.io/).\n\n## License\n\n[MIT](/LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanqing%2Fgenerate-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanqing%2Fgenerate-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanqing%2Fgenerate-css/lists"}