unplugin-cssca-ui

Features

• 💚 On-demand import style for CSSCA-UI.
• 🌎 Replace default locale.
• ⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.

Installation

npm i unplugin-cssca-ui -D

// vite.config.ts
import CSSCAUI from 'unplugin-cssca-ui/vite'

export default {
  plugins: [
    CSSCAUI({
      // options
    }),
  ],
}

// rollup.config.js
import CSSCAUI from 'unplugin-cssca-ui/rollup'

export default {
  plugins: [
    CSSCAUI({
      // options
    }),
  ],
}

// esbuild.config.js
import { build } from 'esbuild'

build({
  plugins: [
    require('unplugin-cssca-ui/esbuild')({
      // options
    }),
  ],
})

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-cssca-ui/webpack')({
      // options
    }),
  ],
}

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-cssca-ui/webpack')({
        // options
      }),
    ],
  },
}

Usage

It will automatically transform:

import { CaButton } from 'cssca-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { CaButton } from 'cssca-ui'
import 'cssca-ui/es/components/button/style/css'

Options

useSource

type UseSource = boolean

default: false

// useSource: false
import { CaButton } from 'cssca-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { CaButton } from 'cssca-ui'
import 'cssca-ui/es/components/button/style/css'

// useSource: true
import { CaButton } from 'cssca-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { CaButton } from 'cssca-ui'
import 'cssca-ui/es/components/button/style/index'

lib

Normally you wouldn't use this option but as a general option we exposed it anyway. When using this your bundle structure should be the same as CSSCAUI. See unpkg.com for more information.

type Lib = string

default: 'cssca-ui'

// lib: 'other-lib'
import { CaButton } from 'other-lib'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { CaButton } from 'other-lib'
import 'other-lib/es/components/button/style/css'

format

type Format = 'esm' | 'cjs'

default: 'esm'

esm for cssca-ui/es/components/*

cjs for cssca-ui/lib/components/*

• /es for ES Module
• /lib for CommonJS

This option is for which format to use

// format: 'cjs'
import { CaButton } from 'cssca-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { CaButton } from 'cssca-ui'
import 'cssca-ui/lib/components/button/style/css'

prefix

type Prefix = string

// prefix = Al
import { AlButton } from 'xx-lib'

ignoreComponents

type IgnoreComponents = string[]

Skip style imports for a list of components. Useful for CSSCA-UIcomponents which do not have a style file. At the time of writing, this is only the AutoResizer component.

// format: 'cjs'
import { CaAutoResizer } from 'cssca-ui'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { CaAutoResizer } from 'cssca-ui'

defaultLocale

Replace default locale, you can find locale list here.

Alternate

• unplugin-vue-components