Fox postcss-plugin-scope-prefixer

postcss plugin scope prefixer, 可以给css样式加上prefix， 目的是为了解决fox微前端的css样式全局污染问题

说明

Scope Prefixer插件，能够统一给css样式加上prefix

安装

npm

npm i @fox-js/postcss-plugin-scope-prefixer -D

yarn

yarn add @fox-js/postcss-plugin-scope-prefixer -D

pnpm

pnpm add @fox-js/postcss-plugin-scope-prefixer -D

使用说明

with vite

import scopePrefixer from '@fox-js/postcss-plugin-scope-prefixer'
 
export default {
   postcss: {
       plugins: [
          scopePrefixer({
            prefix: '.my-theme',
            includes: [join(root, 'src')]
          })
       ]
      }
}

配置

配置类型

// scope prefix options
export type ScopePrefixOptions = {
  // prefix
  prefix?: string | PrefixMethod
  // 文件排除规则
  excludes?: FilterMethod | string[] | RegExp[]
  // 文件包含规则(include优先exclude)
  includes?: FilterMethod | string[] | RegExp[]
  // 自定义转换函数
  transform?: (prefix: string, selector: string, scopeSelector: string, filePath: string, rule: Rule) => string
  // 忽略规则
  ignoreAtRules?: string[]
  // 是否跳过处理gloabl selector
  skipGlobalSelectors?: boolean
  // 是否跳过处理scoped selector
  skipScopedSelectors?: boolean
  // 范围 pattern
  scopedPatterns?: RegExp[]
}