├── CHANGELOG.md ├── .gitignore ├── .travis.yml ├── gulpfile.js ├── package.json ├── index.js ├── LICENSE ├── test └── test.js └── README.md /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - iojs 5 | - "0.12" -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | var files = ['index.js', 'test/*.js', 'gulpfile.js']; 4 | 5 | gulp.task('lint', function () { 6 | var eslint = require('gulp-eslint'); 7 | return gulp.src(files) 8 | .pipe(eslint()) 9 | .pipe(eslint.format()) 10 | .pipe(eslint.failAfterError()); 11 | }); 12 | 13 | gulp.task('test', function () { 14 | var mocha = require('gulp-mocha'); 15 | return gulp.src('test/*.js', { read: false }) 16 | .pipe(mocha()); 17 | }); 18 | 19 | gulp.task('default', ['lint', 'test']); 20 | 21 | gulp.task('watch', function () { 22 | gulp.watch(files, ['lint', 'test']); 23 | }); 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-chinese-stylesheets", 3 | "version": "1.0.2", 4 | "description": "PostCSS plugin PostCSS plugin for writing chinese Style Sheets", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "chinese" 10 | ], 11 | "author": "zhouwenbin ", 12 | "license": "MIT", 13 | "repository": "johnie/postcss-chinese-stylesheets", 14 | "bugs": { 15 | "url": "https://github.com/johnie/postcss-chinese-stylesheets/issues" 16 | }, 17 | "homepage": "https://github.com/johnie/postcss-chinese-stylesheets", 18 | "dependencies": { 19 | "lodash": "^3.10.1", 20 | "postcss": "^5.0.2", 21 | "chinese-css-properties": "^1.0.2", 22 | "chinese-css-values": "^1.0.6" 23 | }, 24 | "devDependencies": { 25 | "chai": "^3.2.0", 26 | "gulp": "^3.9.0", 27 | "gulp-eslint": "^1.0.0", 28 | "gulp-mocha": "^2.1.3" 29 | }, 30 | "scripts": { 31 | "test": "gulp" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var postcss = require('postcss'); 3 | var SEProperties = require('chinese-css-properties'); 4 | var SEValues = require('chinese-css-values'); 5 | 6 | module.exports = postcss.plugin('postcss-chinese-stylesheets', function (opts) { 7 | opts = opts || {}; 8 | 9 | // Work with options here 10 | 11 | return function (css) { 12 | 13 | css.walkDecls(function transformDecl(decl) { 14 | // Properties 15 | _.forEach(SEProperties, function (value, key) { 16 | if (decl.prop === value) { 17 | decl.prop = key; 18 | } 19 | }); 20 | 21 | // Values 22 | _.forEach(SEValues, function (value, key) { 23 | decl.value = decl.value.replace(value, key); 24 | }); 25 | 26 | // Important 27 | if (decl.value.indexOf('!重要') >= 0) { 28 | decl.value = decl.value.replace(/\s*!重要\s*/, ''); 29 | decl.important = true; 30 | } 31 | }); 32 | 33 | }; 34 | }); 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 zhouwenbin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var postcss = require('postcss'); 3 | var expect = require('chai').expect; 4 | var SEProperties = require('chinese-css-properties'); 5 | var SEValues = require('chinese-css-values'); 6 | 7 | var plugin = require('../'); 8 | 9 | var test = function (input, output, opts, done) { 10 | postcss([ plugin(opts) ]).process(input).then(function (result) { 11 | expect(result.css).to.eql(output); 12 | expect(result.warnings()).to.be.empty; 13 | done(); 14 | }).catch(function (error) { 15 | done(error); 16 | }); 17 | }; 18 | 19 | var chinesePropertiesTest = function (chinese, english, value) { 20 | it('converts ' + chinese + ' to ' + english, function (done) { 21 | test( 22 | 'a{ ' + chinese + ': ' + value + '; }', 23 | 'a{ ' + english + ': ' + value + '; }', 24 | {}, 25 | done 26 | ); 27 | }); 28 | }; 29 | 30 | var chineseValuesTest = function (chinese, english, property) { 31 | it('converts ' + chinese + ' to ' + english, function (done) { 32 | test( 33 | 'a{ ' + property + ': ' + chinese + '; }', 34 | 'a{ ' + property + ': ' + english + '; }', 35 | {}, 36 | done 37 | ); 38 | }); 39 | }; 40 | 41 | describe('postcss-chinese-stylesheets', function () { 42 | 43 | // Test Properties 44 | _.forEach(SEProperties, function (value, key) { 45 | chinesePropertiesTest(value, key, '10px'); 46 | }); 47 | 48 | // Test Values 49 | _.forEach(SEValues, function (value, key) { 50 | chineseValuesTest(value, key, 'color'); 51 | }); 52 | 53 | // Test important 54 | it('converts !重要 to !important', function (done) { 55 | test( 56 | 'a{ color: white !重要; }', 57 | 'a{ color: white !important; }', 58 | {}, 59 | done 60 | ); 61 | }); 62 | 63 | }); 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # china PostCSS chinese Stylesheets [![Build Status][ci-img]][ci][![npm version](https://badge.fury.io/js/postcss-chinese-stylesheets.svg)](https://badge.fury.io/js/postcss-chinese-stylesheets) 2 | 3 | [![Join the chat at https://gitter.im/zhouwenbin/postcss-chinese-stylesheets](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/zhouwenbin/postcss-chinese-stylesheets?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | > [PostCSS] plugin for writing chinese Style Sheets. 6 | 7 | [PostCSS]: https://github.com/postcss/postcss 8 | [ci-img]: https://travis-ci.org/zhouwenbin/postcss-chinese-stylesheets.svg 9 | [ci]: https://travis-ci.org/zhouwenbin/postcss-chinese-stylesheets 10 | [chinese Values]: https://github.com/zhouwenbin/chinese-css-values 11 | 12 | ## Installation 13 | 14 | ```console 15 | $ npm install postcss-chinese-stylesheets --save-dev 16 | ``` 17 | 18 | ### Quick Start 19 | 20 | ```js 21 | // Dependencies 22 | var fs = require('fs'); 23 | var postcss = require('postcss'); 24 | var cncss = require('postcss-chinese-stylesheets'); 25 | 26 | // CSS to be processed 27 | var css = fs.readFileSync('input.css', 'utf8'); 28 | 29 | // Process our chinese stylesheets css using postcss-chinese-stylesheets 30 | var output = postcss() 31 | .use(cncss()) 32 | .process(css) 33 | .css 34 | 35 | console.log('\n===>Output CSS:\n', output); 36 | ``` 37 | 38 | Or just: 39 | 40 | ```js 41 | var output = postcss(cncss()) 42 | .process(css) 43 | .css 44 | ``` 45 | 46 | 47 | ### chinese syntax 48 | 49 | ```css 50 | .foo { 51 | 定位: 相对; 52 | 背景颜色: 三文鱼; 53 | 背景图片: 无; 54 | 字体家族: Helvetica, Arial; 55 | 颜色: 白; 56 | 行高: 1.68; 57 | 字母间距: 2px; 58 | 浮动: 左; 59 | 显示: 无; 60 | 层级: 1000 !重要; 61 | } 62 | ``` 63 | 64 | ### CSS output 65 | 66 | ```css 67 | .foo { 68 | position: relative; 69 | background-color: salmon; 70 | background-image: none; 71 | font-family: Helvetica, Arial; 72 | color: white; 73 | line-height: 1.68; 74 | letter-spacing: 2px; 75 | float: left; 76 | display: none; 77 | z-index: 1000 !important; 78 | } 79 | ``` 80 | 81 | #### [Here you can see the full list of chinese CSS Properties](https://github.com/zhouwenbin/chinese-css-properties) 82 | 83 | #### [Here you can see the full list of chinese CSS Values](https://github.com/zhouwenbin/chinese-css-values) 84 | 85 | ## Usage 86 | 87 | ### Gulp 88 | 89 | ```js 90 | var gulp = require('gulp'); 91 | var rename = require('gulp-rename'); 92 | var postcss = require('gulp-postcss'); 93 | var cncss = require('postcss-chinese-stylesheets') 94 | var autoprefixer = require('autoprefixer-core') 95 | 96 | gulp.task('default', function () { 97 | var processors = [ 98 | autoprefixer({ browsers: ['> 0%'] }), //Other plugin 99 | cncss() 100 | ]; 101 | gulp.src('src/*.css') 102 | .pipe(postcss(processors)) 103 | .pipe(rename('gulp.css')) 104 | .pipe(gulp.dest('build')) 105 | }); 106 | gulp.watch('src/*.css', ['default']); 107 | ``` 108 | 109 | ### Grunt 110 | 111 | ```js 112 | module.exports = function(grunt) { 113 | grunt.initConfig({ 114 | pkg: grunt.file.readJSON('package.json'), 115 | postcss: { 116 | options: { 117 | processors: [ 118 | require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin 119 | require('postcss-chinese-stylesheets')(), 120 | ] 121 | }, 122 | dist: { 123 | src: ['src/*.css'], 124 | dest: 'build/grunt.css' 125 | } 126 | } 127 | }); 128 | 129 | grunt.loadNpmTasks('grunt-contrib-uglify'); 130 | grunt.loadNpmTasks('grunt-postcss'); 131 | 132 | grunt.registerTask('default', ['postcss']); 133 | } 134 | ``` 135 | 136 | --- 137 | 138 | ## Contributing 139 | 140 | Fork, work on a branch, install dependencies & run tests before submitting a PR. 141 | 142 | ```console 143 | $ git clone https://github.com/YOU/postcss-chinese-stylesheets.git 144 | $ git checkout -b patch-1 145 | $ npm install 146 | $ npm test 147 | ``` 148 | 149 | ## [Changelog](CHANGELOG.md) 150 | 151 | ## [License](LICENSE) 152 | 153 | ## thanks [postcss-swedish-stylesheets](https://github.com/johnie/postcss-swedish-stylesheets) 154 | 155 | --------------------------------------------------------------------------------