First commit/release

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,yml}]
+indent_size = 2

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+npm-debug.log
+yarn-error.log

.npmignore

@@ -0,0 +1,10 @@
+.npmignore
+.gitignore
+.editorconfig
+
+node_modules/
+npm-debug.log
+yarn.lock
+
+*.test.js
+.travis.yml

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+cache: yarn
+node_js:
+  - stable
+  - "8"
+  - "6"
+  - "4"

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2017 Pierre Burel <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,80 @@
+# PostCSS Rem [![Build Status][ci-img]][ci]
+
+[PostCSS] plugin to use rem units with optional pixel fallback.
+
+[PostCSS]: https://github.com/postcss/postcss
+[ci-img]:  https://travis-ci.org/pierreburel/postcss-rem.svg
+[ci]:      https://travis-ci.org/pierreburel/postcss-rem
+
+```css
+.demo {
+  font-size: rem(24px); /* Simple */
+  padding: rem(5px 10px); /* Multiple values */
+  margin: rem(10px 1.5rem); /* Existing rem */
+  border-bottom: rem(1px solid black); /* Multiple mixed values */
+  box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); /* Comma-separated values */
+  text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; /* Alternate use */
+}
+```
+
+```css
+.demo {
+  font-size: 1.5rem; /* Simple */
+  padding: 0.3125rem 0.625rem; /* Multiple values */
+  margin: 0.625rem 1.5rem; /* Existing rem */
+  border-bottom: 0.0625rem solid black; /* Multiple mixed values */
+  box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee; /* Comma-separated values */
+  text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee; /* Alternate use */
+}
+```
+
+With `baseline` to `10` (`html { font-size: 62.5%; }`) and `fallback` to `true`:
+
+```css
+.demo {
+  font-size: 24px;
+  font-size: 2.4rem; /* Simple */
+  padding: 5px 10px;
+  padding: 0.5rem 1rem; /* Multiple values */
+  margin: 10px 15px;
+  margin: 1rem 1.5rem; /* Existing rem */
+  border-bottom: 1px solid black;
+  border-bottom: 0.1rem solid black; /* Multiple mixed values */
+  box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee;
+  box-shadow: 0 0 0.2rem #ccc, inset 0 0 0.5rem #eee; /* Comma-separated values */
+  text-shadow: 1px 1px #eee, -1px 0 #eee;
+  text-shadow: 0.1rem 0.1rem #eee, -0.1rem 0 #eee; /* Alternate use */
+}
+```
+
+With `convert` option to `px` (for a lt-ie9 only stylesheet for example):
+
+```css
+.demo {
+  font-size: 24px; /* Simple */
+  padding: 5px 10px; /* Multiple values */
+  margin: 10px 24px; /* Existing rem */
+  border-bottom: 1px solid black; /* Multiple mixed values */
+  box-shadow: 0 0 2px #ccc, inset 0 0 5px #eee; /* Comma-separated values */
+  text-shadow: 1px 1px #eee, -1px 0 #eee; /* Alternate use */
+}
+```
+
+
+## Usage
+
+```js
+postcss([ require('postcss-rem') ])
+```
+
+or with custom options
+
+```js
+postcss([ require('postcss-rem')({
+  baseline: 10,
+  // convert: 'px',
+  fallback: false
+}) ])
+```
+
+See [PostCSS] docs for examples for your environment.

index.js

@@ -0,0 +1,40 @@
+const postcss = require('postcss');
+const reduceFunctionCall = require('reduce-function-call');
+
+const pluginName = 'postcss-rem';
+const functionName = 'rem';
+const defaults = {
+  baseline: 16,
+  convert: 'rem',
+  fallback: false
+};
+
+module.exports = postcss.plugin(pluginName, (opts = {}) => (root) => {
+  const options = Object.assign({}, defaults, opts);
+
+  const convert = (values, to) => values.replace(/(-?(?:\d+)?(?:\.?\d+)?)(rem|px)/g, (match, value, from) => {
+    if (from === 'px' && to === 'rem') {
+      return parseFloat(value) / options.baseline + 'rem';
+    }
+    if (from === 'rem' && to === 'px') {
+      return parseFloat(value) * options.baseline + 'px';
+    }
+    return match;
+  })
+
+  root.walkDecls((decl) => {
+    if (decl.value && decl.value.includes(functionName + '(')) {
+      if (options.fallback && options.convert !== 'px') {
+        decl.cloneBefore({
+          value: reduceFunctionCall(decl.value, functionName, (values) => {
+            return convert(values, 'px');
+          })
+        });
+      }
+
+      decl.value = reduceFunctionCall(decl.value, functionName, (values) => {
+        return convert(values, options.convert);
+      });
+    }
+  });
+});

index.test.js

@@ -0,0 +1,32 @@
+const postcss = require('postcss');
+const plugin = require('./');
+
+function run(input, output, opts = {}) {
+  return postcss([ plugin(opts) ]).process(input, { from: undefined })
+    .then(result => {
+      expect(result.css).toEqual(output);
+      expect(result.warnings().length).toBe(0);
+    });
+}
+
+it('Simple', () => run('.simple { font-size: rem(24px); }', '.simple { font-size: 1.5rem; }'));
+
+it('Multiple values', () => run('.multiple { padding: rem(5px 10px); }', '.multiple { padding: 0.3125rem 0.625rem; }'));
+
+it('Multiple mixed values', () => run('.mixed { border-bottom: rem(1px solid black); }', '.mixed { border-bottom: 0.0625rem solid black; }'));
+
+it('Comma-separated values', () => run('.comma { box-shadow: rem(0 0 2px #ccc, inset 0 0 5px #eee); }', '.comma { box-shadow: 0 0 0.125rem #ccc, inset 0 0 0.3125rem #eee; }'));
+
+it('Alternate use', () => run('.alternate { text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; }', '.alternate { text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee; }'));
+
+it('Pixel fallback', () => run('.fallback { font-size: rem(24px); margin: rem(10px 1.5rem); }', '.fallback { font-size: 24px; font-size: 1.5rem; margin: 10px 24px; margin: 0.625rem 1.5rem; }', {
+    fallback: true
+}));
+
+it('Convert to pixel', () => run('.convert { font-size: rem(24px); margin: rem(10px 1.5rem); }', '.convert { font-size: 24px; margin: 10px 24px; }', {
+    convert: 'px'
+}));
+
+it('Changing baseline', () => run('html { font-size: 62.5%; } .baseline { font-size: rem(24px); }', 'html { font-size: 62.5%; } .baseline { font-size: 2.4rem; }', {
+    baseline: 10
+}));