styledux
A new approach of isomorphic css resolution with webpack, css-loader(css-modules) powered by redux.
IT'S style-dux, not styled-ux.
Status: beta
Features
- Plain, simple, original css with css modules (with Webpack css-loader). Also support LESS, SCSS, Sass, Stylus, PostCSS...
- NO extra editor plugin required, because it's only PLAIN css + jsx.
- Universal javascript support (Server side rendering + Client side rendering)
- Thread-safe server side rendering, renderToNodeStream() / renderToStaticNodeStream() is OK.
- Remove styles when render() returns null automatically
- Middleware support (Powered by redux)
- Webpack Hot Module Replacement (HMR)
Installation
For npm
npm install styledux
For yarn
yarn add styledux
Usage
1. Configuration
Add styledux/loader
before css-loader
to your webpack configuration.
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'styledux/loader'
},
{
loader: 'css-loader',
options: {
modules: true, // css modules support, important!!
importLoaders: 1,
localIdentName: process.env.NODE_ENV === 'production' ? '_[hash:base64:8]' : '[name]__[local]___[hash:base64:5]',
minimize: process.env.NODE_ENV === 'production',
sourceMap: true,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
styledux/loader
is simply to export locals that generated from css-loader and wrap original css contents with a function_()
.
@withStyle
2. Decorate React components with ExampleComponent.css
ExampleComponent.js
import withStyle from 'styledux' import style from './ExampleComponent.css'; @Component { return <div => <div = /> </div> ; }
For stateless component
ExampleStatelessComponent.js
;{return<div className=styleBlock><div className=styleSubModule /></div>;}const component = ExampleStatelessComponent;;
3. Server side rendering
import ReactDOMServer from 'react-dom/server';import createStyleduxStore StyleduxProvider mapStateOnServer from 'styledux';{const styleStore = ;const appHtml = ReactDOMServer;const styles = ;return'<!doctype html><html><head>'...styles'<style id="main_css"></style>' // for options.insertInto on client side// You can also add other styles which have higher priority'</head><body><div id="app">'appHtml'</div></body></html>';}
4. Client Side Rendering
import ReactDOM from 'react-dom';import createStyleduxStore StyleduxProvider handleStateChangeOnClient from 'styledux';{ReactDOM;}
API
<StyleduxProvider store>
See https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store
Props
store
: Plain redux store that created withcreateStyleduxStore()
children
Example:
import StyleduxProvider from 'styledux';ReactDOM
createStyleduxStore(...middlewares)
Arguments
- middlewares: Plain redux middlewares.
You can create your own middlewares to handle state changes.
handleStateChangeOnClient(options)
creates a middleware that mount styles like style-loader
.
Example
On server:
;const styleStore = ;
On client:
;const middleware = ;const styleStore = ;
withStyle(style)
Decorate a react component with style. It monitors render()
of react component.
It dispatches an ADD_STYLE
action when render()
returned non-empty result, and dispatches a REMOVE_STYLE
action when render()
returned null
.
Arguments
- style (Object | Array): style object that was generated by
styledux/loader
.
Example
; ;; @Component
; ; @Component
mapStateOnServer(options)
and handleStateChangeOnClient(options)
The built-in adapter for styledux.
When you build a universal web application, make sure mapStateOnServer(options)
and handleStateChangeOnClient(options)
use the same options.
options:
attrs
(Object): Add custom attrs to<style></style>
(default: {}).transform
(Function): Transform/Conditionally load CSS by passing a transform/condition function. (default: (obj) => obj)transformId
(Function): Transform webpack module id to element id. (default: see getOptions )insertAt
(null|String): Inserts at the given position. Different fromstyle-loader
. (default: null)insertInto
(String): Inserts into the given position. (default: )
mapStateOnServer(styleduxStore, options)
Only required for server-side rendering. Generate <style>
from styleduxStore on server side.
Example
const styleStore = ;const content = ReactDOMServer;const styles = ;const html ='<!doctype html><html><head>'...styles'<style id="main_css"></style>' // The position for insert_at'<link rel="stylesheet" type="text/css" href="custom_theme.css">' // Other styles that may have higher priority'<script src="main.js" defer></script>''</head><body><div id="app">'content'</div></body></html>';
handleStateChangeOnClient(options)
Handling state changes and mount styles dynamically on client side.
Example
const styleStore =;const app =<StyleduxProvider store=styleStore><App /></StyleduxProvider>;ReactDOM;
LICENSE
MIT