npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-css-modules

v1.2.0

Published

Seamless mapping of class names to CSS modules inside of Vue components.

Downloads

258

Readme

English | 🇨🇳中文

Vue CSS Modules

Travis minified size minzipped size

Seamless mapping of class names to CSS modules inside of Vue components.

yarn add vue-css-modules

CDN: jsDelivr | UNPKG (Avaliable as window.VueCSSModules)

CSS Modules: local scope & modular

CSS Modules assigns a local class a global unique name, so a component styles will not affect other components. e.g.

/* button.css */
.button {
  font-size: 16px;
}
.mini {
  font-size: 12px;
}

It's will transformed to something similar to:

/* 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:

import styles from './button.css'
// styles = {
//   button: 'button__button--d8fj3',
//   mini: 'button__mini--f90jc'
// }

element.innerHTML = '<button class="' + styles.button + ' ' + styles.mini + '" />'

vue-css-modules: simplify mapping name

Here's a button component with CSS Modules:

<template>
  <button :class="{
    'global-button-class-name': true,
    [styles.button]: true,
    [styles.mini]: mini
  }">Click me</button>
</template>

<script>
  import styles from './button.css'

  export default {
    props: { mini: Boolean },
    data: () => ({ styles })
  }
</script>

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:

<template>
  <button
    class="global-button-class-name"
    styleName="button :mini">
    Click me
  </button>
</template>

<script>
  import CSSModules from 'vue-css-modules'
  import styles from './button.css'

  export default {
    mixins: [CSSModules(styles)],
    props: { mini: Boolean }
  }
</script>

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

<button styleName="@button">Button</button>

This is the equivalent to:

<button styleName="button" data-component-button="true">Button</button>

This allows you to override component styles in context:

.form [data-component-button] {
  font-size: 20px;
}

$type

<button styleName="$type">Button</button>

This is the equivalent to:

<button :styleName="type">Button</button>

:mini

<button styleName=":mini">Button</button>

This is the equivalent to:

<button :styleName="mini ? 'mini' : ''">Button</button>

disabled=isDisabled

<button styleName="disabled=isDisabled">Button</button>

This is the equivalent to:

<button :styleName="isDisabled ? 'disabled' : ''">Button</button>

Usage

In templates

CSS Modules outside the template

<template>
  <button
    class="global-button-class-name"
    styleName="button :mini">
    Click me
  </button>
</template>

<script>
  import CSSModules from 'vue-css-modules'
  import styles from './button.css'

  export default {
    mixins: [CSSModules(styles)],
    props: { mini: Boolean }
  }
</script>

CSS Modules inside the template

<template>
  <button
    class="global-button-class-name"
    styleName="button :mini">
    Click me
  </button>
</template>

<script>
  import CSSModules from 'vue-css-modules'

  export default {
    mixins: [CSSModules()],
    props: { mini: Boolean }
  }
</script>

<style module>
  .button {
    font-size: 16px;
  }
  .mini {
    font-size: 12px;
  }
</style>

In JSX

import CSSModules from 'vue-css-modules'
import styles from './button.css'

export default {
  mixins: [CSSModules(styles)],
  props: { mini: Boolean },
  render() {
    return (
      <button styleName="@button :mini">Click me</button>
    )
  }
}

In render functions

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.