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):

• postcss-import
• postcss-url
• saladcss-bem
• postcss-mixins
• postcss-nested
• postcss-nesting
• postcss-advanced-variables
• postcss-property-lookup
• postcss-css-reset
• postcss-shape
• postcss-utils
• postcss-extend
• postcss-calc
• autoprefixer
• postcss-assets