{"id":16226819,"url":"https://github.com/srmullen/svelte-reactive-css-preprocess","last_synced_at":"2025-07-30T05:07:07.075Z","repository":{"id":143913526,"uuid":"418671335","full_name":"srmullen/svelte-reactive-css-preprocess","owner":"srmullen","description":"Automatically update your styles when a svelte variable changes.","archived":false,"fork":false,"pushed_at":"2021-10-22T16:03:06.000Z","size":35,"stargazers_count":63,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-26T13:54:15.699Z","etag":null,"topics":["css","css-variables","javascript","preprocessor","reactivity","sveltejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srmullen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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-18T21:16:43.000Z","updated_at":"2024-08-01T15:34:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"23cc396a-9e1f-4e57-81ea-cdb34cbc3691","html_url":"https://github.com/srmullen/svelte-reactive-css-preprocess","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/srmullen/svelte-reactive-css-preprocess","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmullen%2Fsvelte-reactive-css-preprocess","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmullen%2Fsvelte-reactive-css-preprocess/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmullen%2Fsvelte-reactive-css-preprocess/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmullen%2Fsvelte-reactive-css-preprocess/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srmullen","download_url":"https://codeload.github.com/srmullen/svelte-reactive-css-preprocess/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmullen%2Fsvelte-reactive-css-preprocess/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267814724,"owners_count":24148329,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","css-variables","javascript","preprocessor","reactivity","sveltejs"],"created_at":"2024-10-10T12:50:33.615Z","updated_at":"2025-07-30T05:07:07.048Z","avatar_url":"https://github.com/srmullen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"svelte-reactive-css-preprocess\n==============================\n\n[![npm package](https://img.shields.io/npm/v/svelte-reactive-css-preprocess)](https://www.npmjs.com/package/svelte-reactive-css-preprocess)\n\nHave you ever wished you could use your svelte variables in your component's styles. Now you can!\n\n### Installation\n\n`npm install --save-dev svelte-reactive-css-preprocess`\n\n### Usage\n\nIn your svelte config\n\n```javascript\nimport reactiveCSSPreprocessor from 'svelte-reactive-css-preprocess';\n\nsvelte({\n  preprocess: [\n    reactiveCSSPreprocessor()\n  ]\n})\n```\n\nIf you're using [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) you need to run `svelte-reactive-css-preprocess` after all tasks for `svelte-preproccess complete. To do that use ['svelte-sequential-preprocessor'](https://github.com/pchynoweth/svelte-sequential-preprocessor).\n\n`npm install --save-dev svelte-sequential-preprocessor.`\n\n```javascript\nimport reactiveCSSPreprocessor from 'svelte-reactive-css-preprocess';\nimport sveltePreprocess from 'svelte-preprocess';\nimport seqPreprocess from 'svelte-sequential-preprocessor';\n\nsvelte({\n  preprocess: seqPreprocess([\n    sveltePreprocess({\n      defaults: {\n        style: \"postcss\",\n      },\n      postcss: true\n    }),\n    reactiveCSSPreprocess()\n  ])\n})\n```\n\nNow in your component's style you can reference the reactive variables using css variable syntax.\n\n```html\n\u003cscript\u003e\n  // Create some variables that hold information about the component's style.\n  export let size = 200;\n  export let color = '#f00';\n\n  $: sizepx = `${size}px`;\n\u003c/script\u003e\n\n\u003cdiv class=\"square\"\u003e\u003c/div\u003e\n\n\u003cstyle\u003e\n  .square {\n    /* Reference the Svelte variables using the var(--varname) syntax */\n    width: var(--sizepx);\n    height: var(--sizepx);\n    background-color: var(--color);\n  }\n\u003c/style\u003e\n```\n\nNow your styles update when your variables do!\n\n### How it works\n\nThe preprocessor reads through the variables in each component's script and style tags. If a variable name appears in both the script and styles then a css variables that is scoped to the component is created and added to the `:root` pseudo-selector. In the component the css variables are replaced with the scoped variables. Variable scoping works similarly to how Svelte handles css scoping. The style tag for the above example would end up looking something like this...\n\n```html\n\u003cstyle\u003e\n  :root {\n    --sizepx-1l2ucck: inherit;\n    --color-1l2ucck: inherit;\n  }\n\n  .square {\n      width: var(--sizepx-1l2ucck);\n      height: var(--sizepx-1l2ucck);\n      background-color: var(--color-1l2ucck);\n  }\n\u003c/style\u003e\n```\n\nIn the script tag code is injected that handles updating the scoped css variables using Svelte's reactivity.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrmullen%2Fsvelte-reactive-css-preprocess","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrmullen%2Fsvelte-reactive-css-preprocess","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrmullen%2Fsvelte-reactive-css-preprocess/lists"}