CSS modules in JS.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist chore: include built files in vcs Jan 4, 2019
lib
src chore: clean up Jan 4, 2019
test
.editorconfig
.gitattributes init Jan 4, 2019
.gitignore
.prettierrc init Jan 4, 2019
LICENSE init Jan 4, 2019
README.md docs: keyframes Jan 4, 2019
circle.yml chore: rename circleci config file Jan 4, 2019
jest.config.js
package.json docs: add keyframes example Jan 4, 2019
rollup.config.js
tsconfig.json
yarn.lock chore: include built files in vcs Jan 4, 2019

README.md

style-module

NPM version NPM downloads CircleCI donate chat

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}`

Keyframes

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`
})

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.

keyframes

Create a @keyframes rule, you should pass in the definition of the rule and it returns the name.

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