├── .gitignore ├── .npmignore ├── .travis.yml ├── ChangeLog.mg ├── LICENSE ├── README.md ├── gulpfile.js ├── index.js ├── package.json └── test ├── fixtures ├── functions.css ├── functions.out.css ├── mq.css ├── mq.out.css ├── multiple.css ├── multiple.out.css ├── simple.css └── simple.out.css └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | 3 | node_modules/ 4 | 5 | test/ 6 | .travis.yml 7 | 8 | gulpfile.js 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - stable 5 | - "6" 6 | - "4" 7 | -------------------------------------------------------------------------------- /ChangeLog.mg: -------------------------------------------------------------------------------- 1 | 3.0.0 - 2017-05-11 2 | 3 | * Update to PostCSS 6 4 | * Remove Node 0.12 support 5 | 6 | 2.0.0 - 2015-09-14 7 | 8 | * Update to PostCSS 5 9 | * Correct PostCSS plugin declaration 10 | 11 | 1.0.0 12 | 13 | * Initial release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 Vincent De Oliveira 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 Vmin [![Build Status](https://travis-ci.org/iamvdo/postcss-vmin.svg)](https://travis-ci.org/iamvdo/postcss-vmin) 2 | 3 | A simple [PostCSS] plugin to convert `vmin` to `vm` for IE9. 4 | 5 | [PostCSS]: https://github.com/postcss/postcss 6 | 7 | ```css 8 | /* Input example */ 9 | .foo { 10 | width: 50vmin; 11 | } 12 | ``` 13 | 14 | ```css 15 | /* Output example */ 16 | .foo { 17 | width: 50vm; 18 | width: 50vmin; 19 | } 20 | ``` 21 | 22 | ## Usage 23 | 24 | ```js 25 | postcss([ require('postcss-vmin') ]) 26 | ``` 27 | 28 | See [PostCSS] docs for examples for your environment. 29 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | gulp.task('lint', function () { 4 | var jshint = require('gulp-jshint'); 5 | return gulp.src(['index.js', 'test/*.js', 'gulpfile.js']) 6 | .pipe(jshint()) 7 | .pipe(jshint.reporter('jshint-stylish')) 8 | .pipe(jshint.reporter('fail')); 9 | }); 10 | 11 | gulp.task('test', function () { 12 | var mocha = require('gulp-mocha'); 13 | return gulp.src('test/*.js', { read: false }).pipe(mocha()); 14 | }); 15 | 16 | gulp.task('default', ['lint', 'test']); 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | 3 | module.exports = postcss.plugin("postcss-vmin", function (opts) { 4 | opts = opts || {}; 5 | 6 | var REGEX = /(\d*\.?\d+)vmin/ig; 7 | 8 | return function (css) { 9 | 10 | // for each rules, each decl 11 | css.walkRules(function (rule) { 12 | rule.walkDecls(function (decl, i) { 13 | 14 | if (decl.value.indexOf('vmin') === -1) { return; } 15 | 16 | if (REGEX.exec(decl.value) !== null) { 17 | var value = decl.value.replace(REGEX, function (_, number) { 18 | return number + 'vm'; 19 | }); 20 | rule.insertBefore(i, decl.clone({ value: value })); 21 | } 22 | 23 | }); 24 | }); 25 | 26 | return css; 27 | 28 | }; 29 | }); 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-vmin", 3 | "version": "3.0.0", 4 | "description": "PostCSS plugin to convert vmin to vm for IE9", 5 | "keywords": ["postcss", "css", "postcssplugin", "vmin", "viewport units"], 6 | "author": "Vincent De Oliveira ", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/iamvdo/postcss-vmin.git" 11 | }, 12 | "dependencies": { 13 | "postcss": "^6.0.0" 14 | }, 15 | "devDependencies": { 16 | "jshint-stylish": "1.0.0", 17 | "gulp-jshint": "1.9.2", 18 | "gulp-mocha": "2.0.0", 19 | "mocha": "2.1.0", 20 | "chai": "1.10.0", 21 | "gulp": "3.8.11" 22 | }, 23 | "scripts": { 24 | "test": "gulp" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/fixtures/functions.css: -------------------------------------------------------------------------------- 1 | a { 2 | width: calc(100vmin - 1px); 3 | } 4 | a { 5 | background: linear-gradient(red 50vmin, green); 6 | } -------------------------------------------------------------------------------- /test/fixtures/functions.out.css: -------------------------------------------------------------------------------- 1 | a { 2 | width: calc(100vm - 1px); 3 | width: calc(100vmin - 1px); 4 | } 5 | a { 6 | background: linear-gradient(red 50vm, green); 7 | background: linear-gradient(red 50vmin, green); 8 | } -------------------------------------------------------------------------------- /test/fixtures/mq.css: -------------------------------------------------------------------------------- 1 | a { 2 | color: #fff; 3 | } 4 | @media screen { 5 | a { 6 | width: 100vmin; 7 | } 8 | } -------------------------------------------------------------------------------- /test/fixtures/mq.out.css: -------------------------------------------------------------------------------- 1 | a { 2 | color: #fff; 3 | } 4 | @media screen { 5 | a { 6 | width: 100vm; 7 | width: 100vmin; 8 | } 9 | } -------------------------------------------------------------------------------- /test/fixtures/multiple.css: -------------------------------------------------------------------------------- 1 | a { 2 | margin: 5px 50vmin 10px 100vmin; 3 | } -------------------------------------------------------------------------------- /test/fixtures/multiple.out.css: -------------------------------------------------------------------------------- 1 | a { 2 | margin: 5px 50vm 10px 100vm; 3 | margin: 5px 50vmin 10px 100vmin; 4 | } -------------------------------------------------------------------------------- /test/fixtures/simple.css: -------------------------------------------------------------------------------- 1 | a { 2 | width: 50vmin; 3 | } 4 | a { 5 | width: 50.5vmin; 6 | } 7 | a { 8 | width: .5vmin; 9 | } -------------------------------------------------------------------------------- /test/fixtures/simple.out.css: -------------------------------------------------------------------------------- 1 | a { 2 | width: 50vm; 3 | width: 50vmin; 4 | } 5 | a { 6 | width: 50.5vm; 7 | width: 50.5vmin; 8 | } 9 | a { 10 | width: .5vm; 11 | width: .5vmin; 12 | } -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var postcss = require('postcss'); 3 | var expect = require('chai').expect; 4 | 5 | var plugin = require('../'); 6 | 7 | var test = function (name, opts) { 8 | var input = read('test/fixtures/' + name + '.css'); 9 | var output = read('test/fixtures/' + name + '.out.css'); 10 | expect(postcss(plugin(opts)).process(input).css).to.eql(output); 11 | }; 12 | var testString = function (input, output, opts) { 13 | expect(postcss(plugin(opts)).process(input).css).to.eql(output); 14 | }; 15 | var read = function (path) { 16 | return fs.readFileSync(path, 'utf-8'); 17 | }; 18 | 19 | describe('postcss-vmin', function () { 20 | 21 | describe('adds fallback vm unit', function () { 22 | 23 | it('simple', function () { 24 | test('simple'); 25 | }); 26 | it('in MQs', function () { 27 | test('mq'); 28 | }); 29 | it('in functions (calc, linear-gradient)', function () { 30 | test('functions'); 31 | }); 32 | it('multiple times in same value', function () { 33 | test('multiple'); 34 | }); 35 | 36 | }); 37 | 38 | }); 39 | --------------------------------------------------------------------------------