Postcss-ui-theme NPM

postcss-ui-theme

项目介绍

postcss-ui-theme let you can easy change ui theme by postcss.

feature

自定义导入文件配置
支持 bem 命名
支持类 sass 语法
支持打包 css4 变量
支持配置静态文件路径

用法

Add postcss-ui-theme to your build tool:

npm install postcss-ui-theme --save-dev

Node

Use postcss-ui-theme to process your CSS:

import postcssUiTheme from 'postcss-ui-theme';
postcssUiTheme.process(YOUR_CSS);

Add PostCSS to your build tool:

npm install postcss --save-dev

Use postcss-ui-theme as a plugin:

import postcss from 'postcss';
import postcssUI from 'postcss-ui-theme';

postcss([
  postcssUI(/* options */)
]).process(YOUR_CSS);

Webpack, add postcss.config.js and used as a plugin:

module.exports = {
    plugins: [require('postcss-ui-theme')]
}

Options

import

The postcss-import configs

import : {
    postcssImportOptions
}

customProperties

默认配置

customProperties: {
    preserve: true,
    warnings: false
}

the postcss-custom-properties configs

assets

默认配置

assets: {
    basePath: './',
    relative: true
}

the postcss-assets configs

bem

有关 bem 参考saladcss-bem configs。 默认配置

defaultNamespace: undefined, // means no prefix
separators: {
    descendent: '__'
},
shortcuts: {
    modifier: 'm',
    descendent: 'd',
    component: 'c'
}

autoprefixer

有关 autoprefixer 参考 autoprefixer configs

默认配置

overrideBrowserslist: ['ie > 8', 'last 2 versions']

参考

测试用例

plugins

postcss-ui-theme is powered by the following plugins (in this order):