PostCSS plugin for writing chinese Style Sheets
Switch branches/tags
Nothing to show
Clone or download
zhouwenbin Merge pull request #2 from gitter-badger/gitter-badge
Add a Gitter chat badge to README.md
Latest commit fcff1fd Nov 24, 2015
Permalink
Failed to load latest commit information.
test update gulp file and package Nov 24, 2015
.gitignore fixed bug Nov 24, 2015
.travis.yml UPDATE YML Nov 24, 2015
CHANGELOG.md add Nov 24, 2015
LICENSE add Nov 24, 2015
README.md Add Gitter badge Nov 24, 2015
gulpfile.js update gulp file and package Nov 24, 2015
index.js add Nov 24, 2015
package.json fixed bug Nov 24, 2015

README.md

china PostCSS chinese Stylesheets Build Statusnpm version

Join the chat at https://gitter.im/zhouwenbin/postcss-chinese-stylesheets

PostCSS plugin for writing chinese Style Sheets.

Installation

$ npm install postcss-chinese-stylesheets --save-dev

Quick Start

// Dependencies
var fs = require('fs');
var postcss = require('postcss');
var cncss = require('postcss-chinese-stylesheets');

// CSS to be processed
var css = fs.readFileSync('input.css', 'utf8');

// Process our chinese stylesheets css using postcss-chinese-stylesheets
var output = postcss()
  .use(cncss())
  .process(css)
  .css

console.log('\n===>Output CSS:\n', output);

Or just:

var output = postcss(cncss())
  .process(css)
  .css

chinese syntax

.foo {
    定位: 相对;
    背景颜色: 三文鱼;
    背景图片: 无;
    字体家族: Helvetica, Arial;
    颜色: 白;
    行高: 1.68;
    字母间距: 2px;
    浮动: 左;
    显示: 无;
    层级: 1000 !重要;
}

CSS output

.foo {
    position: relative;
    background-color: salmon;
    background-image: none;
    font-family: Helvetica, Arial;
    color: white;
    line-height: 1.68;
    letter-spacing: 2px;
    float: left;
    display: none;
    z-index: 1000 !important;
}

Here you can see the full list of chinese CSS Properties

Here you can see the full list of chinese CSS Values

Usage

Gulp

var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var cncss = require('postcss-chinese-stylesheets')
var autoprefixer = require('autoprefixer-core')

gulp.task('default', function () {
    var processors = [
        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
        cncss()
    ];
    gulp.src('src/*.css')
        .pipe(postcss(processors))
        .pipe(rename('gulp.css'))
        .pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);

Grunt

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    postcss: {
      options: {
        processors: [
          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
          require('postcss-chinese-stylesheets')(),
        ]
      },
      dist: {
        src: ['src/*.css'],
        dest: 'build/grunt.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
}

Contributing

Fork, work on a branch, install dependencies & run tests before submitting a PR.

$ git clone https://github.com/YOU/postcss-chinese-stylesheets.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License

thanks postcss-swedish-stylesheets