Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
npm i style-module
<script src="https://unpkg.com/style-module/dist/style-module.min.js"></script>
<script>
const { styleModule } = styleModule
const styles = styleModule({
button: {
color: 'red'
}
})
</script>
<script type="module">
import { styleModule } from 'https://unpkg.com/style-module?module'
const styles = styleModule({
button: {
color: 'red'
}
})
</script>
Check out the live demo on CodePan.
import { styleModule } from 'style-module'
const buttonStyles = styleModule({
button: {
color: 'red',
':hover': {
color: 'blue'
}
}
})
const styles = styleModule({
main: {
font: '14px/1.4 helvetica',
backgroundColor: 'red'
},
button: {
// Composes (i.e. inherits) all the styles from buttonStyles.button
composes: buttonStyles.button,
color: 'pink'
}
})
// Generated class names
console.log(styles)
//=>
{
main: 'sm_2',
button: 'sm_0 sm_3'
}
Composes (i.e. inherits) all styles from an existing class name which is usually generated by css
or styleModule
function:
import { css } from 'styleModule'
const defaultButton = css({
border: '1px solid #ccc'
})
const primaryButton = css({
composes: defaultButton,
color: 'red',
':hover': {
color: 'pink'
}
})
Notes:
composes
currently only works at the top level.Check out the live demo on CodePan.
import { css, keyframes } from 'style-module'
const zoom = keyframes({
from: {
transform: 'scale(0.5)'
},
to: {
transform: 'scale(2)'
}
})
const className = css({
animation: `${zoom} 300ms infinite`
})
Generate class name for a style record:
import { css } from 'styleModule'
const className = css({
color: 'red',
':hover': {
color: 'black'
}
})
className //=> sm_0
Generate class names for multiple style records (a module):
import { styleModule } from 'styleModule'
const styles = styleModule({
button: {
color: 'red',
':hover': {
color: 'black'
}
}
})
styles.button //=> .sm_0
styleModule
is just a short-hand for generating multiple class names at once, internally it calls css
function too.
Create a @keyframes
rule, you should pass in the definition of the rule and it returns the name.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
style-module © EGOIST, Released under the MIT License. Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily