10.0.2-0 • Published 5 years ago
oliviertassinari-jss-plugin-syntax-extend v10.0.2-0
JSS plugin that enables mixing in styles
This plugin implements a custom property extend
which allows you to mix in styles in various ways.
Style object own properties always take precedence over extended objects, so you can always override the extended definition. Exception is function values.
Use style object reference
const buttonColor = {
color: 'green'
}
const buttonTheme = {
extend: buttonColor,
background: 'red'
}
const styles = {
button: {
extend: buttonTheme,
fontSize: '20px'
}
}
Use rule name from the current styles object
const styles = {
buttonColor: {
background: 'red'
},
button: {
extend: 'buttonColor',
fontSize: '20px'
}
}
Use array of style objects
const styles = {
button: {
extend: [{background: 'red'}, {color: 'green'}],
fontSize: '20px'
}
}
const background = {background: 'red'}
const color = {color: 'green'}
const styles = {
button: {
extend: [background, color],
fontSize: '20px'
}
}
Use function which returns a style object
Nested extend
inside of the function is not supported. Will override other properties defined in the same rule.
const styles = {
button: {
extend: data => ({
color: data.theme.color
}),
fontSize: '20px'
}
}
Demo
Issues
File a bug against cssinjs/jss prefixed with [jss-extend].
Run tests
yarn
yarn test
License
MIT