Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/style-module
CSS modules in JS.
https://github.com/egoist/style-module
Last synced: 22 days ago
JSON representation
CSS modules in JS.
- Host: GitHub
- URL: https://github.com/egoist/style-module
- Owner: egoist
- License: mit
- Created: 2019-01-04T15:06:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:13:20.000Z (almost 3 years ago)
- Last Synced: 2024-10-10T12:02:14.603Z (about 1 month ago)
- Language: TypeScript
- Size: 136 KB
- Stars: 36
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - style-module
README
# style-module 
[](https://npmjs.com/package/style-module) [](https://npmjs.com/package/style-module) [](https://circleci.com/gh/egoist/style-module/tree/master) [](https://patreon.com/egoist) [](https://chat.egoist.moe)
**Please consider [donating](https://www.patreon.com/egoist) to this project's author, [EGOIST](https://egoist.sh), to show your ❤️ and support.**
## Install
```bash
npm i style-module
```
Use UMD bundle from CDN
```html
const { styleModule } = styleModule
const styles = styleModule({
button: {
color: 'red'
}
})
```
Use ESM bundle from CDN
```html
import { styleModule } from 'https://unpkg.com/style-module?module'
const styles = styleModule({
button: {
color: 'red'
}
})
```
## Usage
Check out the live demo on [CodePan](https://codepan.net/gist/bfcdf733f6099fff24080d039569c9aa).
```js
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:
```js
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](https://codepan.net/gist/3d965f020974fdbbc3aaaacf8c7cefda).
```js
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:
```js
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)_:
```js
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) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/style-module/contributors)).
> [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)