https://github.com/fjc0k/vue-css-modules
Seamless mapping of class names to CSS Modules inside of Vue components.
https://github.com/fjc0k/vue-css-modules
css-modules vue vuejs
Last synced: 9 months ago
JSON representation
Seamless mapping of class names to CSS Modules inside of Vue components.
- Host: GitHub
- URL: https://github.com/fjc0k/vue-css-modules
- Owner: fjc0k
- License: mit
- Created: 2018-04-02T03:18:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-29T02:19:56.000Z (over 7 years ago)
- Last Synced: 2025-03-08T22:32:16.120Z (9 months ago)
- Topics: css-modules, vue, vuejs
- Language: JavaScript
- Homepage: https://npm.im/vue-css-modules
- Size: 243 KB
- Stars: 37
- Watchers: 3
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-css-modules - Seamless mapping of class names to CSS Modules inside of Vue components. ` 📝 3 years ago` (Utilities [🔝](#readme))
- awesome-vue-zh - Vue-CSS-模块 - 将类名无缝映射到Vue组件内的CSS模块. (公用事业 / CSS)
- awesome-vue - vue-css-modules - Seamless mapping of class names to CSS Modules inside of Vue components. (Components & Libraries / Utilities)
- awesome-vue - vue-css-modules ★20 - Seamless mapping of class names to CSS Modules inside of Vue components. (Utilities / CSS)
- awesome-vue - vue-css-modules - Seamless mapping of class names to CSS Modules inside of Vue components. (Utilities / CSS)
README
English | [🇨🇳中文](./README_zh-CN.md)
# Vue CSS Modules
[](https://travis-ci.org/fjc0k/vue-css-modules)
[](https://github.com/fjc0k/vue-css-modules/blob/master/dist/vue-css-modules.min.js)
[](https://github.com/fjc0k/vue-css-modules/blob/master/dist/vue-css-modules.min.js)
Seamless mapping of class names to CSS modules inside of Vue components.
```shell
yarn add vue-css-modules
```
CDN: [jsDelivr](//www.jsdelivr.com/package/npm/vue-css-modules) | [UNPKG](//unpkg.com/vue-css-modules/) (Avaliable as `window.VueCSSModules`)
## CSS Modules: local scope & modular
[`CSS Modules`](https://github.com/css-modules/css-modules) assigns a local class a global unique name, so a component styles will not affect other components. e.g.
```css
/* button.css */
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}
```
It's will transformed to something similar to:
```css
/* button.css */
.button__button--d8fj3 {
font-size: 16px;
}
.button__mini--f90jc {
font-size: 12px;
}
```
When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names. Just like this:
```javascript
import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = ''
```
## `vue-css-modules`: simplify mapping name
Here's a button component with CSS Modules:
```html
Click me
import styles from './button.css'
export default {
props: { mini: Boolean },
data: () => ({ styles })
}
```
Surely, CSS Modules is a good choice for Vue components. But here are a few disadvantages:
- You have to pass `styles` object into `data` function.
- You have to use `styles.localClassName` importing a global class name.
- If there are other global class names, you have to put them together.
- If you want to bind a class name to a component property value, you have to explicitly specify the property name, even if the class name is equals the property name.
Now, you can use `vue-css-modules` to remake it:
```html
Click me
import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
mixins: [CSSModules(styles)],
props: { mini: Boolean }
}
```
Using `vue-css-modules`:
- You don't need pass `styles` object into `data` function, but the `CSSModules` mixin. 🌝
- You can completely say byebye to `styles.localClassName`.
- There is clear distinction between global CSS and CSS Modules.
- You can use the `:` modifier to bind the property with the same name.
## Modifiers
### @button
```html
Button
```
This is the equivalent to:
```html
Button
```
This allows you to override component styles in context:
```css
.form [data-component-button] {
font-size: 20px;
}
```
### $type
```html
Button
```
This is the equivalent to:
```html
Button
```
### :mini
```html
Button
```
This is the equivalent to:
```html
Button
```
### disabled=isDisabled
```html
Button
```
This is the equivalent to:
```html
Button
```
## Usage
### In templates
#### CSS Modules outside the template
```html
Click me
import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
mixins: [CSSModules(styles)],
props: { mini: Boolean }
}
```
#### CSS Modules inside the template
```html
Click me
import CSSModules from 'vue-css-modules'
export default {
mixins: [CSSModules()],
props: { mini: Boolean }
}
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}
```
### In JSX
```javascript
import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
mixins: [CSSModules(styles)],
props: { mini: Boolean },
render() {
return (
Click me
)
}
}
```
### In render functions
```javascript
import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
mixins: [CSSModules(styles)],
props: { mini: Boolean },
render(h) {
return h('button', {
styleName: '@button :mini'
}, 'Click me')
}
}
```
## The implementation
`vue-css-modules` extends `$createElement` method of the current component. It will use the value of `styleName` in `data` or `data.attrs` to look for CSS Modules in the associated styles object and will append the matching unique CSS class names to the `data.staticClass` value.