Add auto-rem plugin

Author: rtivital

src/auto-rem.ts

@@ -0,0 +1,19 @@
+import { Declaration } from 'postcss';
+const unitsConverters = require('./converters');
+
+const rem = unitsConverters.rem;
+
+module.exports = () => {
+  return {
+    postcssPlugin: 'postcss-auto-rem',
+    Declaration: (decl: Declaration) => {
+      if (!decl.value.includes('px')) {
+        return;
+      }
+
+      decl.value = rem(decl.value);
+    },
+  };
+};
+
+module.exports.postcss = true;

src/preset.ts

@@ -5,6 +5,7 @@ const colorMixAlpha = require('./postcss-color-mix');
 const lightDark = require('./postcss-light-dark');
 const converters = require('./converters');
 const theme = require('./postcss-mantine-theme');
+const autorem = require('./auto-rem');
 
 function colorSchemeMixin(colorScheme: 'light' | 'dark', type: 'where' | 'default' = 'default') {
   if (type === 'where') {
@@ -127,7 +128,17 @@ const largerThanMixin = (_mixin: string, breakpoint: string) => ({
   },
 });
 
-module.exports = () => {
+interface Options {
+  autoRem?: boolean;
+}
+
+module.exports = (options: Options = {}) => {
+  const plugins = [];
+
+  if (options.autoRem) {
+    plugins.push(autorem());
+  }
+
   return {
     postcssPlugin: 'postcss-preset-mantine',
     plugins: [
@@ -136,6 +147,7 @@ module.exports = () => {
       nested(),
       colorMixAlpha(),
       remEm(),
+      ...plugins,
       mixins({
         mixins: {
           light: colorSchemeMixin('light'),

src/tests/__snapshots__/auto-rem.test.ts.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`auto-rem it transforms input with rem function correctly 1`] = `
+"
+.demo {
+  font-size: calc(1rem * var(--mantine-scale));
+  border: calc(0.0625rem * var(--mantine-scale)) solid red;
+  padding: calc(1rem * var(--mantine-scale));
+}
+"
+`;
+
+exports[`auto-rem it transforms media query correctly 1`] = `
+"
+@media (min-width: 320px) {
+.demo {
+    font-size: calc(2rem * var(--mantine-scale))
+}
+  }
+"
+`;
+
+exports[`auto-rem it transforms px to rem values correctly 1`] = `
+"
+.demo {
+  font-size: calc(1rem * var(--mantine-scale));
+  height: calc(2.5rem * var(--mantine-scale));
+  padding: calc(0.625rem * var(--mantine-scale)) calc(3.125rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale)) calc(1.875rem * var(--mantine-scale));
+  background: red;
+  border: calc(0.0625rem * var(--mantine-scale)) solid black;
+  box-shadow: 0 0 calc(0.625rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale)) rgba(0, 0, 0, 0.5);
+}
+"
+`;

src/tests/__snapshots__/rem-em.test.ts.snap

@@ -49,3 +49,11 @@ exports[`rem-em works when rem/em is inside the class name 1`] = `
 }
 "
 `;
+
+exports[`rem-em works with space separated values with non-px values 1`] = `
+"
+.demo {
+  border: calc(1rem * var(--mantine-scale)) solid red;
+}
+"
+`;

src/tests/auto-rem.test.ts

@@ -0,0 +1,45 @@
+import { testTransform } from './utils';
+
+const baseInput = `
+.demo {
+  font-size: 16px;
+  height: 40px;
+  padding: 10px 50px 20px 30px;
+  background: red;
+  border: 1px solid black;
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
+}
+`;
+
+const remFunctionInput = `
+.demo {
+  font-size: rem(16px);
+  border: rem(1px) solid red;
+  padding: 16px;
+}
+`;
+
+const mediaInput = `
+.demo {
+  @media (min-width: 320px) {
+    font-size: 32px;
+  }
+}
+`;
+
+describe('auto-rem', () => {
+  it('it transforms px to rem values correctly', async () => {
+    const res = await testTransform(baseInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('it transforms input with rem function correctly', async () => {
+    const res = await testTransform(remFunctionInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
+
+  it('it transforms media query correctly', async () => {
+    const res = await testTransform(mediaInput, { autoRem: true });
+    expect(res.css).toMatchSnapshot();
+  });
+});

src/tests/rem-em.test.ts

@@ -13,6 +13,12 @@ const spaceSeparatedInput = `
 }
 `;
 
+const spaceSeparatedWithNonPxValuesInput = `
+.demo {
+  border: rem(16px solid red);
+}
+`;
+
 const mediaInput = `
 @media (min-width: em(320px)) {
   font-size: rem(32px);
@@ -65,4 +71,9 @@ describe('rem-em', () => {
     const res = await testTransform(remEmInsideFunctionInput);
     expect(res.css).toMatchSnapshot();
   });
+
+  it('works with space separated values with non-px values', async () => {
+    const res = await testTransform(spaceSeparatedWithNonPxValuesInput);
+    expect(res.css).toMatchSnapshot();
+  });
 });

src/tests/utils.ts

@@ -1,6 +1,6 @@
 import postcss from 'postcss';
 const preset = require('../preset');
 
-export function testTransform(input: string) {
-  return postcss([preset]).process(input, { from: undefined });
+export function testTransform(input: string, options?: Record<string, any>) {
+  return postcss([preset(options)]).process(input, { from: undefined });
 }