{"id":18924633,"url":"https://github.com/dash-os/redux-css","last_synced_at":"2026-03-14T04:30:18.709Z","repository":{"id":57350486,"uuid":"91771248","full_name":"Dash-OS/redux-css","owner":"Dash-OS","description":"Redux Middleware to Reduce CSS Variables","archived":false,"fork":false,"pushed_at":"2018-06-27T02:17:34.000Z","size":17,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-02T05:34:16.718Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Dash-OS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-19T06:05:56.000Z","updated_at":"2021-09-17T04:40:02.000Z","dependencies_parsed_at":"2022-08-28T19:00:54.174Z","dependency_job_id":null,"html_url":"https://github.com/Dash-OS/redux-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dash-OS%2Fredux-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dash-OS%2Fredux-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dash-OS%2Fredux-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dash-OS%2Fredux-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dash-OS","download_url":"https://codeload.github.com/Dash-OS/redux-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239921875,"owners_count":19718842,"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":[],"created_at":"2024-11-08T11:07:39.014Z","updated_at":"2026-03-14T04:30:18.664Z","avatar_url":"https://github.com/Dash-OS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux CSS Middleware\n\nUse the redux pattern to control CSS Variables. You provide redux-style reducers\nthat set your variable values when changed, allowing you to style your app in many\nnew ways.\n\nAt the moment, this will only operate on the top-level documentElement. If you\ndefine variables at higher levels they will continue to take precedence. It is\nhandled through [`style.setProperty`](https://github.com/Dash-OS/redux-css/blob/master/src/utils/css.js#L5)\nand [`getComputedStyle(...).getPropertyValue`](https://github.com/Dash-OS/redux-css/blob/master/src/utils/css.js#L11-L13).\n\n## Installation\n\n```\nyarn add redux-css\n```\n\n**or**\n\n```\nnpm install --save redux-css\n```\n\n## Example\n\n```js\nimport { createStore, applyMiddleware, compose } from 'redux'\nimport reduxCSS from 'redux-css'\nimport reducers from './reducers'\n\n/*\n  initial styles are the variables that we should set immediately.\n  Note that '--' is optional, it will be added for you if you don't\n  include it.\n*/\nconst initialStyles = {\n  primaryBG: '#303641',\n  navbarHeight: '55px',\n  navbarPaddingTop: '0px'\n}\n\nconst styleReducer = (vars = initialStyles, action, state) =\u003e {\n  switch(action.type) {\n    case 'DEVICE_ORIENTATION': {\n      return {\n        ...vars,\n        navbarHeight: action.orientation === 'portrait'\n          ? '55px'\n          : '50px',\n        navbarPaddingTop: action.orientation === 'portrait'\n          : '5px'\n          : '0px'\n      }\n    }\n  }\n  return vars\n}\n\nconst configureStore = (initialState = {}) =\u003e {\n\n  // exposes: css.getVariable, css.setVariable, css.removeVariable, css.middleware\n  const {\n    middleware: cssMiddleware,\n    ...css\n  } = reduxCSS(\n    // our style reducers\n    styleReducer\n  )\n\n  const enhancers = compose(\n    applyMiddleware(\n      cssMiddleware\n    )\n  )\n\n  const store = createStore(\n    reducers,\n    initialState,\n    enhancers\n  )\n\n  return { store, css }\n}\n```\n\n```css\n/*navbar.css*/\n:root {\n\t/* optionally provide fallback values */\n\t--primaryBG: \"#303641\";\n\t--navbarHeight: 50px;\n\t--navbarPaddingTop: 5px;\n}\n\n.navbar-container {\n\tbackground-color: var(--primaryBG);\n\theight: var(--navbarHeight);\n\tpadding-top: var(--navbarPaddingTop);\n}\n```\n\n## API\n\n#### css.setVariable(varName, value)\n\nSet a CSS Variable if changed from it's current value. Returns the previous\nvalue of the variable (if any).\n\n```js\ncss.setVariable(\"primaryBG\", \"#303641\");\n```\n\n#### css.setAllVariables(variables)\n\nTake an Object Literal and sets each of its keys as CSS Variables with their values.\n\n```js\ncss.setAllVariables({\n\tprimaryBG: \"#303641\",\n\tsecondaryBG: \"#121519\"\n});\n```\n\n#### css.getVariable(varName)\n\nGets the given CSS Variables current value.\n\n```js\nconst primaryBG = css.getVariable(\"primaryBG\");\n```\n\n#### css.getAllVariables\n\nGets all of the current variables. Currently this only captures the variables\nthat redux-css is handling.\n\n```js\nconst variables = css.getAllVariables();\n```\n\n#### css.removeVariable(varName)\n\nRemove the given CSS Variable.\n\n```js\ncss.removeVariable(\"navbarPadding\");\n```\n\n#### css.middleware\n\nRedux CSS Middleware to be passed to redux.\n\n```js\napplyMiddleware(css.middleware);\n```\n\n## PostCSS Custom Properties\n\nIf you are using postcss-cssnext or postcss-custom-properties then you will want\nto set your configuration:\n\n```js\n// postcss.config.js\nmodule.exports = {\n\tplugins: [\n\t\trequire(\"postcss-cssnext\")({\n\t\t\tfeatures: {\n\t\t\t\tcustomProperties: {\n\t\t\t\t\tpreserve: true\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t]\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash-os%2Fredux-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdash-os%2Fredux-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdash-os%2Fredux-css/lists"}