Miaoda SC Plugin

1.0.61 verified Mon Apr 27 auth: no javascript

A Vite plugin that generates border-style utility classes (solid, dashed, dotted) with per-side support and responsive variants. Current stable version is 1.0.61, with regular updates. It provides a Tailwind-like API for border styles without requiring the full Tailwind framework, supporting customizable prefixes and responsive breakpoints (sm, md, lg, xl, 2xl). Ships TypeScript types and works with Vite 4, 5, 6, and 7.

Common errors

error Cannot find module 'miaoda-sc-plugin' or its corresponding type declarations. ↓

cause Missing package installation or type declarations not recognized.

fix

Run npm install miaoda-sc-plugin@latest and ensure tsconfig includes 'node_modules/@types' or 'skipLibCheck: false'.

error Error: The plugin 'miaoda-sc-plugin' doesn't export a function. ↓

cause Trying to use the plugin without the correct export.

fix

Use named import: import { borderStylePlugin } from 'miaoda-sc-plugin'.

error TypeError: Cannot destructure property 'responsive' of 'undefined' or 'null'. ↓

cause Calling the plugin without arguments or with a non-object argument.

fix

Call borderStylePlugin({}) or borderStylePlugin() (no args) to use defaults.

error [vite:vue] Unknown utility class: border-t-solid ↓

cause The plugin is not correctly loaded or configured in vite.config.

fix

Ensure borderStylePlugin() is added to the plugins array in vite.config.ts.

Warnings

breaking Version 1.0.0 changed the export name from `borderPlugin` to `borderStylePlugin`. ↓

fix Update imports to use `borderStylePlugin` instead of `borderPlugin`.

broken Does not work with Vite 3 or earlier; requires Vite ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0. ↓

fix Upgrade Vite to version 4, 5, 6, or 7.

deprecated The `prefix` option defaults to empty string. In future versions it may be required to specify a prefix. ↓

fix Explicitly set a prefix even if empty: `prefix: ''`.

gotcha Responsive variants only work if `responsive: true` is set. Without it, sm:, md: etc. classes are not generated. ↓

fix Set `responsive: true` in the plugin options.

Install

npm install miaoda-sc-plugin

yarn add miaoda-sc-plugin

pnpm add miaoda-sc-plugin

Imports

borderStylePlugin

wrong

import borderStylePlugin from 'miaoda-sc-plugin'

correct

import { borderStylePlugin } from 'miaoda-sc-plugin'

Default export does not exist; this is a named export.

borderStylePlugin with options
wrong
```
borderStylePlugin(true)
```
correct
```
borderStylePlugin({ responsive: true, prefix: 'tw-' })
```
The plugin only accepts an options object (or no argument), not a boolean.

Using with defineConfig

wrong

const { borderStylePlugin } = require('miaoda-sc-plugin');
module.exports = {
  plugins: [borderStylePlugin()]
}

correct

import { defineConfig } from 'vite';
import { borderStylePlugin } from 'miaoda-sc-plugin';

export default defineConfig({
  plugins: [borderStylePlugin()]
})

The package is ESM-only and cannot be required with CommonJS in Vite config.

Quickstart

Shows how to install and configure the plugin in a Vite project using TypeScript, enabling responsive variants and custom prefix.

// vite.config.ts
import { defineConfig } from 'vite';
import { borderStylePlugin } from 'miaoda-sc-plugin';

export default defineConfig({
  plugins: [
    borderStylePlugin({
      responsive: true,
      prefix: ''
    })
  ]
});

// Then in your CSS/HTML use classes like:
// <div class="border-t-solid md:border-b-dashed"></div>