reshadow v0.0.1

reshadow

This project has an experimental status, so the API and the implementation could be changed.

Usage

Button.js

import styled from 'reshadow'
import styles from './styles'

const Button = ({children, disabled, type, ...props}) => styled(styles)(
    <button {...props} type={type} disabled={disabled} use:root use:theme="normal">
        {children}
    </button>
)

export default Button

Button.js

import styled from 'reshadow'

const Button = ({children, disabled, type, color, ...props}) => styled`
    button, button[|theme="normal"] |content {
        color: ${color};
    }
`(
    <button {...props} type={type} disabled={disabled} use:root use:theme="normal">
        <use:content as="span">
            {children}
        </use:content>
    </button>
)

export default Button

withStyles

Use withStyles HOC, that will process styles from props.

Button.js

import styled, {withStyles} from 'reshadow'
import baseStyles from './styles.css'

const Button = ({styles, children, disabled, type}) => styled(styles)(
    <button type={type} disabled={disabled} use:theme="normal">
        {children}
    </button>
)

export default withStyles(baseStyles)(Button)

useStyles

Button.js

import styled, {useStyles} from 'reshadow'
import baseStyles from './styles.css'

const Button = ({styles, children, disabled, type}) => {
    return styled(baseStyles, styles)(
        <button type={type} disabled={disabled} use:theme="normal">
            {children}
        </button>
    )
}

export default Button

styles.css

button {
    padding: 5px 10px;
}

button[type="submit"] {
    border-color: red;
}

button[disabled] {
    opacity: .5;
}

button[use|theme="normal"] {
    color: red;
}

Configuration

Add folowing plugins to the babel and postcss configs:

postcss.config.js

module.exports = {
    plugins: [
        require('reshadow/postcss'),
    ],
}

babel.config.js

module.exports = {
    plugins: [
        require('reshadow/babel'),
    ],
}

Thanks

• @revers