px2viewport

This is a Vite-based plugin used to convert inline and css file px units to vw units.

Installation

pnpm add @xxxbrian/vite-plugin-px2viewport

Usage

In vite.config.ts:

import { optimizeDepsEsbuildPlugin, px2viewport } from '@xxxbrian/vite-plugin-px2viewport'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    px2viewport({
      viewportWidth: 750,
    }),
  ],
  optimizeDeps: { // if you need to inject the @vue/runtime-core as well
    esbuildOptions: {
      plugins: [optimizeDepsEsbuildPlugin],
    }
  },
})

Options

• viewportWidth (number): The width of the viewport. Default: 750.
• include (string | RegExp | (string | RegExp)[]): The file path to be processed. Default: /\.(vue|jsx|tsx)$/.
• unitToConvert (string): The unit to convert. Default: px.
• unitPrecision (number): The decimal numbers to allow. Default: 5.
• viewportUnit (string): The unit to convert to. Default: vw.
• minPixelValue (number): The minimum pixel value to convert.
• cssOptions (object): same to postcss-px-to-viewport-8-plugin

[!WARNING] > cssOptionsonly support postcss plugin, not support inline style and dynamic style.

Example

inline usage

Input

<template>
    <div style="width: 100px;height: 100px;"></div>
</template>

Output

<template>
    <div style="width: 13.33334vw;height: 13.33334vw;"></div>
</template>

dynamic style

Input

<template>
    <div :style="{ width: '100px', height: '100px' }"></div>
</template>

Output

<template>
    <div :style="{ width: '13.33334vw', height: '13.33334vw' }"></div>
</template>

dynamic by setup params

Input

<script lang="ts" setup>
import { computed } from "vue";
const styles = computed(() => {
    return {
        width: "100px",
        height: "100px",
    };
});
</script>
<template>
    <div style="font-size: 18px" :style="styles"></div>
</template>

Runtime compiled code auto resolve px to vw

Credits

@mistjs/vite-plugin-px2viewport