{"id":13578135,"url":"https://github.com/GoogleChromeLabs/postcss-jit-props","last_synced_at":"2025-04-05T16:31:55.414Z","repository":{"id":39896874,"uuid":"413528543","full_name":"GoogleChromeLabs/postcss-jit-props","owner":"GoogleChromeLabs","description":"A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.","archived":false,"fork":false,"pushed_at":"2025-02-18T16:20:18.000Z","size":846,"stargazers_count":228,"open_issues_count":10,"forks_count":11,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-31T19:06:57.020Z","etag":null,"topics":["bundle-size","custom-properties","postcss-plugin"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/jit-open-props?file=postcss.config.js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-04T17:52:43.000Z","updated_at":"2025-03-18T08:47:39.000Z","dependencies_parsed_at":"2023-02-01T11:16:48.318Z","dependency_job_id":"2d7b8482-9cb3-4cff-b178-c9251ccce743","html_url":"https://github.com/GoogleChromeLabs/postcss-jit-props","commit_stats":{"total_commits":48,"total_committers":8,"mean_commits":6.0,"dds":"0.39583333333333337","last_synced_commit":"a2c2baf1cdf9628516e82704aaf0a8734e71350c"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpostcss-jit-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpostcss-jit-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpostcss-jit-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fpostcss-jit-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/postcss-jit-props/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247366348,"owners_count":20927497,"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":["bundle-size","custom-properties","postcss-plugin"],"created_at":"2024-08-01T15:01:27.787Z","updated_at":"2025-04-05T16:31:55.054Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS (Just In Time) Props\n\n\u003e Only ship used variables! A CSS custom property helper based on PostCSS\n\n[![Version](https://img.shields.io/npm/v/postcss-jit-props)](https://www.npmjs.com/package/postcss-jit-props)\n[![postcss compatibility](https://img.shields.io/npm/dependency-version/postcss-jit-props/peer/postcss)](https://postcss.org/)\n[![Unit Tests](https://github.com/GoogleChromeLabs/postcss-jit-props/actions/workflows/node.js.yml/badge.svg)](https://github.com/GoogleChromeLabs/postcss-jit-props/actions/workflows/node.js.yml)\n\n\u003cbr\u003e\n\n`postcss-jit-props` watches for CSS variables and ensures a value entry exists in the stylesheet. [Try in browser](https://stackblitz.com/edit/jit-open-props?file=postcss.config.js)\n\nThis lets you **provide a huge pool of properties** for development and design, and rather than try and purge unused variables, **only adds what was used**. \n\n\u003cbr\u003e\n\n## Example\n\nCSS Before / During Development:  \n```css\n.foo {\n  color: var(--brand-1);\n  padding: var(--size-1) var(--size-2);\n  margin-block-start: var(--size-2);\n  animation: var(--fade-in);\n}\n\n@media (--dark) {\n  .foo {\n    color: white;\n  }\n}\n```\n\nCSS After / Result of Plugin:  \n```diff\n+ @custom-media --dark (prefers-color-scheme: dark);\n\n+ :root {\n+   --brand-1: #81A1C1;\n+   --size-1: 1rem;\n+   --size-2: 2rem;\n+   --fade-in: fade-in .5s ease;\n+ }\n\n.foo {\n  color: var(--brand-1);\n  padding: var(--size-1) var(--size-2);\n  margin-block-start: var(--size-2);\n  animation: var(--fade-in);\n}\n\n@media (--dark) {\n  .foo {\n    color: white;\n  }\n}\n\n+ @keyframes fade-in {\n+   to { opacity: 1; }\n+ }\n```\n\n\u003cbr\u003e\n\n## Usage\n\n**Step 1:** Install plugin:\n\n```sh\nnpm install --save-dev postcss-jit-props\n```\n\n\u003cbr\u003e\n\n**Step 2:** Add the plugin to plugins in `postcss.config.js` and **pass it your props (CSS || JS || JSON)**.\n\nPass JS objects:\n```js\nmodule.exports = {\n  plugins: [\n    require('postcss-jit-props')({\n      '--brand-1': '#81A1C1',\n      '--size-1': '1rem',\n      '--size-2': '2rem',\n      '--fade-in': 'fade-in .5s ease',\n      '--fade-in-@': '@keyframes fade-in {to { opacity: 1 }}',\n      '--dark': '@custom-media --dark (prefers-color-scheme: dark);',\n      '--text': 'white',\n      '--text-@media:dark': 'black',\n    }),\n    require('autoprefixer'),\n  ]\n}\n```\n\nor pass CSS files \n\n```js\nmodule.exports = {\n  plugins: [\n    require('postcss-jit-props')({files: ['./props.css']}),\n    require('autoprefixer'),\n  ]\n}\n```\n\nor JSON ✨\n\n\u003e Javascript and JSON must use the `-@` suffix on their custom property name in order for jit-props to find associated `@keyframes`\n\nConfigure where the selector the props are pushed to. Some CSS Module environments, for example, don't want the props in `:root`, so we can configure the plugin to push them where it's acceptable for the environment, like `:global`: \n\n```js\nmodule.exports = {\n  plugins: [\n    require('postcss-jit-props')({\n      ...MyProps,\n      custom_selector: ':global'\n    }),\n    require('autoprefixer'),\n  ]\n}\n```\n\nConfigure the `@layer` the props are pushed to. : \n\n```js\nmodule.exports = {\n  plugins: [\n    require('postcss-jit-props')({\n      ...MyProps,\n      layer: 'design.system'\n    }),\n    require('autoprefixer'),\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fpostcss-jit-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGoogleChromeLabs%2Fpostcss-jit-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGoogleChromeLabs%2Fpostcss-jit-props/lists"}