style-module

Please consider donating to this project's author, EGOIST, to show your ❤️ and support.

Install

npm i style-module

Use UMD bundle from CDN

<script src="https://unpkg.com/style-module/dist/style-module.min.js"></script>
<script>
  const { styleModule } = styleModule
 
  const styles = styleModule({
    button: {
      color: 'red'
    }
  })
</script> 

Use ESM bundle from CDN

<script type="module">
  import { styleModule } from 'https://unpkg.com/style-module?module'
 
  const styles = styleModule({
    button: {
      color: 'red'
    }
  })
</script> 

Usage

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

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.
• It's possible to compose multiple classes with composes: `${classNameA} ${classNameB}`

API

css

Generate class name for a style record:

import { css } from 'styleModule'
 
const className = css({
  color: 'red',
  ':hover': {
    color: 'black'
  }
})
 
className //=> sm_0

styleModule

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.

TODO

• Atomic CSS

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

style-module © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily