├── .editorconfig ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.js ├── index.test.js ├── package-lock.json └── package.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | yarn-error.log 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .npmignore 2 | .gitignore 3 | .editorconfig 4 | 5 | node_modules/ 6 | npm-debug.log 7 | yarn.lock 8 | 9 | *.test.js 10 | .travis.yml 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: yarn 3 | node_js: 4 | - node 5 | - "10" 6 | - "8" 7 | - "6" 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.0.0 / 2019.3.11 4 | 5 | - 完成`includePath` 6 | - 完成`units` 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2019 闫雪峰 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PostCSS Custom Unit [![Build Status][ci-img]][ci] 2 | 3 | [PostCSS] plugin custom unit, custom convert function. 4 | 5 | ```css 6 | .foo { 7 | width: 100munit; 8 | padding: 100munit 200munit; 9 | } 10 | ``` 11 | 12 | ```css 13 | .foo { 14 | width: 200rem; 15 | padding: 200rem 400rem; 16 | } 17 | ``` 18 | 19 | ## Usage 20 | 21 | ```js 22 | postcss([ require('postcss-custom-unit') ]) 23 | ``` 24 | 25 | See [PostCSS] docs for examples for your environment. 26 | 27 | ## Option 28 | 29 | - includePath custom include path 30 | - units custom unit and convert function 31 | 32 | ```js 33 | var customUnit = require("postcss-custom-unit") 34 | 35 | module.exports = ctx => ({ 36 | plugins: [ 37 | customUnit({ 38 | includePath: /xxxx/, 39 | units: [{ from: 'munit', convert: function (val) { return val * 2 + 'rem' }}] 40 | }) 41 | ] 42 | }) 43 | ``` 44 | 45 | [PostCSS]: https://github.com/postcss/postcss 46 | [ci-img]: https://travis-ci.org/yanhaijing/postcss-custom-unit.svg 47 | [ci]: https://travis-ci.org/yanhaijing/postcss-custom-unit 48 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss') 2 | var extendDeep = require('@jsmini/extend').extendDeep; 3 | 4 | module.exports = (opts = {}) => { 5 | opts = extendDeep({}, { 6 | includePath: /.*/, 7 | units: [], // {from, convert} 8 | }, opts); 9 | 10 | // Work with options here 11 | const customUnit = (root, result) => { 12 | // Transform CSS AST here 13 | root.walkDecls(function(decl) { 14 | if (!opts.includePath.test(decl.source.input.file)) { 15 | return; 16 | } 17 | 18 | opts.units.forEach(function (unit) { 19 | var reg = new RegExp('(([-\\d\.]+)' + unit.from + ')', 'g'); 20 | decl.value = decl.value.replace(reg, function (match, p1, p2) { 21 | return unit.convert(p2); 22 | }); 23 | }) 24 | }); 25 | } 26 | 27 | return { 28 | postcssPlugin: 'postcss-custom-unit', 29 | Once: customUnit 30 | }; 31 | } 32 | 33 | module.exports.postcss = true; 34 | -------------------------------------------------------------------------------- /index.test.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss') 2 | 3 | var plugin = require('./') 4 | 5 | function run (input, output, opts) { 6 | return postcss([plugin(opts)]).process(input).then(function (result) { 7 | expect(result.css).toEqual(output) 8 | expect(result.warnings()).toHaveLength(0) 9 | }) 10 | } 11 | 12 | /* Write tests here 13 | 14 | it('does something', function () { 15 | return run('a{ }', 'a{ }', { }) 16 | }) 17 | 18 | */ 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-custom-unit", 3 | "version": "1.0.0", 4 | "description": "PostCSS plugin custom unit", 5 | "keywords": [ 6 | "postcss", 7 | "css", 8 | "postcss-plugin", 9 | "unit" 10 | ], 11 | "scripts": { 12 | "test": "jest && eslint *.js" 13 | }, 14 | "author": "yanhaijing ", 15 | "license": "MIT", 16 | "repository": "yanhaijing/postcss-custom-unit", 17 | "bugs": { 18 | "url": "https://github.com/yanhaijing/postcss-custom-unit/issues" 19 | }, 20 | "homepage": "https://github.com/yanhaijing/postcss-custom-unit", 21 | "dependencies": { 22 | "@jsmini/extend": "^0.3.1" 23 | }, 24 | "peerDependencies": { 25 | "postcss": "^8.0.0" 26 | }, 27 | "devDependencies": { 28 | "@logux/eslint-config": "^27.0.0", 29 | "eslint": "^5.10.0", 30 | "eslint-config-postcss": "^3.0.7", 31 | "eslint-config-standard": "^12.0.0", 32 | "eslint-plugin-es5": "^1.3.1", 33 | "eslint-plugin-import": "^2.14.0", 34 | "eslint-plugin-jest": "^22.1.2", 35 | "eslint-plugin-node": "^8.0.0", 36 | "eslint-plugin-promise": "^4.0.1", 37 | "eslint-plugin-security": "^1.4.0", 38 | "eslint-plugin-standard": "^4.0.0", 39 | "jest": "^23.6.0" 40 | }, 41 | "eslintConfig": { 42 | "extends": "eslint-config-postcss/es5" 43 | }, 44 | "jest": { 45 | "testEnvironment": "node" 46 | } 47 | } 48 | --------------------------------------------------------------------------------