Renamed rem to rem-convert

pierreburel · Nov 10, 2023 · 43eb1d2 · 43eb1d2
1 parent 925510b
commit 43eb1d2
Show file tree

Hide file tree

Showing 5 changed files with 2,016 additions and 1,604 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 [PostCSS] plugin to use rem units with optional pixel fallback. Based on [sass-rem](https://github.com/pierreburel/sass-rem).
 
+**Breaking change in 3.0**: changed default function name to `rem-convert` as [CSS now use `rem()` for calculating the remainder](https://developer.mozilla.org/en-US/docs/Web/CSS/rem).
+
 See also: [startijenn-rem](https://github.com/pierreburel/startijenn-rem), vanilla JavaScript version.
 
 [postcss]: https://github.com/postcss/postcss
@@ -12,15 +14,15 @@ See also: [startijenn-rem](https://github.com/pierreburel/startijenn-rem), vanil
 
 ```scss
 .demo {
-  font-size: rem(24px); /* Simple */
-  padding: rem(5px 10px); /* Multiple values */
-  margin: rem(10px 0.5rem); /* Existing rem */
-  border-bottom: rem(1px solid black); /* Multiple mixed values */
-  box-shadow: rem(
+  font-size: rem-convert(24px); /* Simple */
+  padding: rem-convert(5px 10px); /* Multiple values */
+  margin: rem-convert(10px 0.5rem); /* Existing rem */
+  border-bottom: rem-convert(1px solid black); /* Multiple mixed values */
+  box-shadow: rem-convert(
     0 0 2px #ccc,
     inset 0 0 5px #eee
   ); /* Comma-separated values */
-  text-shadow: rem(1px 1px) #eee, rem(-1px) 0 #eee; /* Alternate use */
+  text-shadow: rem-convert(1px 1px) #eee, rem-convert(-1px) 0 #eee; /* Alternate use */
 }
 ```
 
@@ -84,11 +86,11 @@ Example with custom options:
 ```js
 postcss([
   require("postcss-rem")({
-    name: "to-rem", // Default to 'rem'
-    baseline: 10, // Default to 16
-    // convert: "px", // Default to 'rem'
-    fallback: true, // Default to false
-    precision: 6, // Default to 5
+    name: "convert-rem", // Default to 'rem-convert'
+    baseline: 10,        // Default to 16
+    // convert: "px",    // Default to 'rem'
+    fallback: true,      // Default to false
+    precision: 6,        // Default to 5
   }),
 ]);
 ```

diff --git a/index.js b/index.js
@@ -1,7 +1,7 @@
 const { convert } = require('startijenn-rem');
 
 const defaults = {
-  name: 'rem',
+  name: 'rem-convert',
   fallback: false,
   convert: 'rem',
   baseline: 16,

diff --git a/index.test.js b/index.test.js
@@ -8,61 +8,61 @@ async function run(input, output, options = {}) {
 }
 
 it('Simple', () => run(
-  '.simple { font-size: rem(24px); }',
+  '.simple { font-size: rem-convert(24px); }',
   '.simple { font-size: 1.5rem; }'
 ));
 
 it('Multiple values', () => run(
-  '.multiple { padding: rem(5px 10px); }',
+  '.multiple { padding: rem-convert(5px 10px); }',
   '.multiple { padding: 0.3125rem 0.625rem; }'
 ));
 
 it('Multiple mixed values', () => run(
-  '.mixed { border-bottom: rem(1px solid black); }',
+  '.mixed { border-bottom: rem-convert(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: rem-convert(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: rem-convert(1px 1px) #eee, rem-convert(-1px) 0 #eee; }',
   '.alternate { text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem 0 #eee; }'
 ));
 
 it('In function', () => run(
-  '.function { font-size: calc(rem(16px) + 3vw); }',
+  '.function { font-size: calc(rem-convert(16px) + 3vw); }',
   '.function { font-size: calc(1rem + 3vw); }'
 ));
 
 it('Pixel fallback', () => run(
-  '.fallback { font-size: rem(24px); margin: rem(10px 1.5rem); }',
+  '.fallback { font-size: rem-convert(24px); margin: rem-convert(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: rem-convert(24px); margin: rem-convert(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: rem-convert(24px); }',
   'html { font-size: 62.5%; } .baseline { font-size: 2.4rem; }',
   {
     baseline: 10
   }
 ));
 
 it('Changing precision', () => run(
-  '.precision { font-size: rem(16px); }',
+  '.precision { font-size: rem-convert(16px); }',
   '.precision { font-size: 1.333rem; }',
   {
     baseline: 12,
@@ -71,9 +71,9 @@ it('Changing precision', () => run(
 ));
 
 it('Changing function name', () => run(
-  '.name { font-size: to-rem(24px); }',
+  '.name { font-size: convert-rem(24px); }',
   '.name { font-size: 1.5rem; }',
   {
-    name: 'to-rem',
+    name: 'convert-rem',
   }
 ));