@unplugin-vue-ce/sub-style

The implementation principle of @unplugin-vue-ce/sub-style comes from vue/core pr #7942

Tips: ⚠ This plugin will inject the implementation code into the vue runtime, which is what I have to tell you. If you have any problems using it, please submit an issue

Snapshot

Install

npm i @unplugin-vue-ce/sub-style

or

yarn add @unplugin-vue-ce/sub-style

or

pnpm add @unplugin-vue-ce/sub-style

Usage

Tips: You need to enable the customElement option of @vitejs/plugin-vue

// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
  plugins: [
    vue(),
    viteVueCESubStyle() as PluginOption,
  ],
})

// rollup.config.js
import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style'
export default {
  plugins: [
    rollupVueCESubStyle(),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(),
  ],
}

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
    ],
  },
}

// esbuild.config.js
import { build } from 'esbuild'
import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style'

build({
  plugins: [esbuildVueCESubStyle()],
})

ES module import css( experimental )

via: https://github.com/unplugin/unplugin-vue-ce/issues/118
@unplugin-vue-ce/sub-style Starting from version "1.0.0-beta.19", a new option isESCSS is added, which is turned off by default.
This is an experimental feature.

// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
  plugins: [
    vue(),
    viteVueCESubStyle({
      isESCSS: true,
    }) as PluginOption,
  ],
})

When isESCSS is turned on,@unplugin-vue-ce/sub-style will automatically move the css import part of the script block to the style block,
so that vue-plugin can compile its style. If you do not do this , it will be injected into the head of the document as a global style.

<template>
  <div>
    foo
  </div>
</template>

<script setup>
import './test.css'
</script>

transform result

<template>
  <div>
    foo
  </div>
</template>

<script setup>

</script>

<style lang="css">
  @import './test.css';
</style>

About Tailwind CSS

Since vue enables shadow dom by default, it will isolate the style, so you need to add the root component of each web component to add the reference style:

<!-- xxx.vue -->
<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

or (only vite)

<!-- xxx.vue -->
<script>
  import '@virtual:taiwind'
</script>

About Uno CSS

Only postcss plugins are supported (via: https://unocss.dev/integrations/postcss#install),
you need to add the root component of each web component to add the reference style:

<!-- xxx.vue -->
<style>
    @unocss preflights;
    @unocss default;
    @unocss;
</style>

or (only vite)

<!-- xxx.vue -->
<script>
  import '@virtual:uno'
</script>

About Windi CSS

Windi css is not supported Windi CSS is Sunsetting