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

vite-plugin-css-modules-optimize

v0.1.4

Published

A css modules optimization plugin for vue

Downloads

1,355

Readme

vite-plugin-css-modules-optimize

NPM License NPM download times

!> Currently in testing stage, only the use of <style module> in VUE SFC files is supported.

A css modules optimization plugin for vue.

Click here to online demo

  • Deleted unused css code.
  • Convert the variables in SFC template to string.
  • Compatible with the postcss-modules configuration in vite.config.js(css.modules).

Unsupported postcss-modules configuration:

  • localsConvention
  • globalModulePaths

How it works

This plugin need to work before the VUE plugin, it will syntax analysis and conversion of VUE SFC files that use CSS modules by GoGoCode and PostCSS.

Usage

install

npm install -D vite-plugin-css-modules-optimize
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssModulesOptimize from 'vite-plugin-css-modules-optimize'

export default defineConfig({
  plugins: [cssModulesOptimize(), vue()],
})

generateScopedName helpers

generateScopedNameBase62Global (For VUE)

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssModulesOptimize, {
  generateScopedNameBase62Global,
} from 'vite-plugin-css-modules-optimize'

export default defineConfig({
  css: {
    modules: {
      generateScopedName: generateScopedNameBase62Global,
    },
  },
  plugins: [cssModulesOptimize(), vue()],
})

generateScopedNameBase62Uniapp (For Uniapp mp-weixin)

由于微信小程序默认样式规则只有当前页面样式会影响到当前页面引用的组件,组件间、父子组件默认是隔离的。

所以采用页面级组件样式增加一个前缀_,其余组件都从 base62 a 开始生成样式名,以达到体积最小化。

// vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

import cssModulesOptimize, {
  generateScopedNameBase62Uniapp,
} from 'vite-plugin-css-modules-optimize'

export default defineConfig({
  css: {
    modules: {
      generateScopedName: generateScopedNameBase62Uniapp,
    },
  },
  plugins: [cssModulesOptimize(), uni()],
})

Example

Source code:

<template>
  <view :class="$style.red">color red, background black</view>
  <view :class="[$style1.yellow, 'foo']">color yellow, background black</view>
  <view :class="blue">color blue, fz14</view>
  <view :class="[$styleB.bar]">nothing</view>
</template>

<script setup>
import { useCssModule, computed } from 'vue'
const $style = useCssModule()
const $style1 = useCssModule()
const $styleA = useCssModule('a')
const $styleB = useCssModule('b')
const blue = computed(() => {
  return [$styleA.blue, $style.fz14]
})
</script>

<style>
.foo {
  background: #000;
}
</style>

<style module>
.red {
  color: red;
}

.blue {
  color: blue;
}
.fz14 {
  font-size: 14px;
}
.fz16 {
  /* unused, will be deleted */
  font-size: 16px;
}
</style>

<style module>
.bg-black {
  background: #000;
}
.red {
  composes: bg-black;
}
.yellow {
  color: yellow;
}
</style>

<style module="a">
.blue {
  color: blue;
}
</style>

</style>

<style module>
.bg-black {
  background: #000;
}
.red {
  composes: bg-black;
}
.yellow {
  color: yellow;
}
</style>

<style module="a">
.blue {
  color: blue;
}
</style>

Will be converted to:

<template>
  <view class="_a _f _e">color red, background black</view>
  <view class="_g foo">color yellow, background black</view>
  <view :class="blue">color blue, fz14</view>
  <view :class="[$styleB.bar]">nothing</view>
</template>

<script setup>
import { useCssModule, computed } from 'vue'
const $style = { fz14: '_c' }
const $style1 = {}
const $styleA = { blue: '_h' }
const $styleB = useCssModule('b')
const blue = computed(() => {
  return [$styleA.blue, $style.fz14]
})
</script>

<style>
.foo {
  background: #000;
}
</style>

<style>
._a {
  color: red;
}

._b {
  color: blue;
}
._c {
  font-size: 14px;
}
._d {
  font-size: 16px;
}
</style>

<style>
._e {
  background: #000;
}
._f {
}
._g {
  color: yellow;
}
</style>

<style>
._h {
  color: blue;
}
</style>