Redux CSS Middleware
Use the redux pattern to control CSS Variables. You provide redux-style reducers that set your variable values when changed, allowing you to style your app in many new ways.
At the moment, this will only operate on the top-level documentElement. If you
define variables at higher levels they will continue to take precedence. It is
handled through style.setProperty
and getComputedStyle(...).getPropertyValue
.
Installation
yarn add redux-css
or
npm install --save redux-css
Example
/* initial styles are the variables that we should set immediately. Note that '--' is optional, it will be added for you if you don't include it.*/const initialStyles = primaryBG: '#303641' navbarHeight: '55px' navbarPaddingTop: '0px' const styleReducer = { return vars} const configureStore = { // exposes: css.getVariable, css.setVariable, css.removeVariable, css.middleware const middleware: cssMiddleware ...css } = const enhancers = const store = return store css }
/*navbar.css*/
API
css.setVariable(varName, value)
Set a CSS Variable if changed from it's current value. Returns the previous value of the variable (if any).
css
css.setAllVariables(variables)
Take an Object Literal and sets each of its keys as CSS Variables with their values.
css
css.getVariable(varName)
Gets the given CSS Variables current value.
const primaryBG = css
css.getAllVariables
Gets all of the current variables. Currently this only captures the variables that redux-css is handling.
const variables = css
css.removeVariable(varName)
Remove the given CSS Variable.
css
css.middleware
Redux CSS Middleware to be passed to redux.
PostCSS Custom Properties
If you are using postcss-cssnext or postcss-custom-properties then you will want to set your configuration:
// postcss.config.jsmoduleexports = plugins: features: customProperties: preserve: true