{"action":"opened","issue":{"url":"https://api.github.com/repos/reactjs/redux/issues/2454","repository_url":"https://api.github.com/repos/reactjs/redux","labels_url":"https://api.github.com/repos/reactjs/redux/issues/2454/labels{/name}","comments_url":"https://api.github.com/repos/reactjs/redux/issues/2454/comments","events_url":"https://api.github.com/repos/reactjs/redux/issues/2454/events","html_url":"https://github.com/reactjs/redux/issues/2454","id":236338406,"number":2454,"title":"redux-css (request / discussion)","user":{"login":"bradennapier","id":15365418,"avatar_url":"https://avatars0.githubusercontent.com/u/15365418?v=3","gravatar_id":"","url":"https://api.github.com/users/bradennapier","html_url":"https://github.com/bradennapier","followers_url":"https://api.github.com/users/bradennapier/followers","following_url":"https://api.github.com/users/bradennapier/following{/other_user}","gists_url":"https://api.github.com/users/bradennapier/gists{/gist_id}","starred_url":"https://api.github.com/users/bradennapier/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bradennapier/subscriptions","organizations_url":"https://api.github.com/users/bradennapier/orgs","repos_url":"https://api.github.com/users/bradennapier/repos","events_url":"https://api.github.com/users/bradennapier/events{/privacy}","received_events_url":"https://api.github.com/users/bradennapier/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-06-15T23:09:15Z","updated_at":"2017-06-15T23:09:15Z","closed_at":null,"body":"So I have been wanting to find a way to work with css variables in a similar fashion to redux.  It just makes perfect sense!  Using reducers and actions to build and manage css variables which can then style the rest of our content is a beautiful thing.  \r\n\r\nI wanted to get some thoughts on the concept / library if anyone here has a moment.  It is working awesome for me at the moment but I am not sure if I might be missing some major unforeseen issue with this method.\r\n\r\nIt is a redux middleware: https://www.npmjs.com/package/redux-css\r\n\r\nWe import and add the css reducers via the middleware then it works the exact same way - except that we capture the changes and set, change, or remove the css properties according to the changed values. \r\n\r\n```js\r\nconst initialVars = {\r\n  navbarHeight: '75px',\r\n  theme: defaultTheme\r\n}\r\n\r\nconst reducers = function rootCSSReducer(selectors, vars = initialVars, action, state) {\r\n  if ( action.type === '@@CSS-REDUX/init' ) {\r\n    return vars\r\n  }\r\n  const isOrientation = selectors.deviceOrientation(state)\r\n\r\n  switch(action.type) {\r\n    case 'WINDOW_RESIZE':\r\n    case 'DEVICE_ORIENTATION': {\r\n      return {\r\n        ...vars,\r\n        navbarHeight: isOrientation === 'landscape' ? '60px' : '75px'\r\n      }\r\n    }\r\n  }\r\n\r\n  return vars\r\n}\r\n\r\n// connectProcesses is apart of redux-saga-process\r\nexport default connectProcesses(\r\n  {\r\n    device: [ 'selectors' ],\r\n  },\r\n  ({ selectors }) => (...args) => reducers(selectors, ...args)\r\n)\r\n```"}}
{"actor":{"display_login":"bradennapier"}}