postcss-preset-mantine - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "postcss-preset-mantine",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "PostCSS preset for Mantine (7.0+) applications",
@@ -11,4 +11,3 @@ "main": "preset.js",
     "postcss-mixins": "^9.0.4",
-    "postcss-nested": "^6.0.1",
-    "startijenn-rem": "^1.1.1"
+    "postcss-nested": "^6.0.1"
   },
@@ -15,0 +14,0 @@ "devDependencies": {

postcss-rem-em.js

@@ -1,3 +0,32 @@
-const { convert } = require('startijenn-rem');
+function scaleRem(remValue) {
+  return `calc(${remValue} * var(--mantine-scale))`;
+}
 
+function createConverter(units, { shouldScale = false } = {}) {
+  return (value) => {
+    if (typeof value === 'number') {
+      const val = `${value / 16}${units}`;
+      return shouldScale ? scaleRem(val) : val;
+    }
+
+    if (typeof value === 'string') {
+      if (value.includes(units)) {
+        return shouldScale ? scaleRem(value) : value;
+      }
+
+      const replaced = value.replace('px', '');
+      if (!Number.isNaN(Number(replaced))) {
+        const val = `${Number(replaced) / 16}${units}`;
+        return shouldScale ? scaleRem(val) : val;
+      }
+    }
+
+    return value;
+  };
+}
+
+const rem = createConverter('rem', { shouldScale: true });
+const remNoScale = createConverter('rem');
+const em = createConverter('em');
+
 const getRegExp = (units) => new RegExp('(?!\\W+)' + units + '\\(([^()]+)\\)', 'g');
@@ -12,8 +41,4 @@ const emRegExp = getRegExp('em');
     Once(root) {
-      root.replaceValues(remRegExp, { fast: `rem(` }, (_, values) =>
-        convert(values, 'rem', { convert: 'rem' })
-      );
-      root.replaceValues(emRegExp, { fast: `em(` }, (_, values) =>
-        convert(values, 'em', { convert: 'em' })
-      );
+      root.replaceValues(remRegExp, { fast: `rem(` }, (_, values) => rem(values));
+      root.replaceValues(emRegExp, { fast: `em(` }, (_, values) => em(values));
     },
@@ -24,6 +49,4 @@
         atRule.params = atRule.params
-          .replace(remRegExp, (value) => convert(value, 'rem', { convert: 'rem' }))
-          .replace(/rem\((.*?)\)/g, '$1')
-          .replace(emRegExp, (value) => convert(value, 'em', { convert: 'em' }))
-          .replace(/em\((.*?)\)/g, '$1');
+          .replace(remRegExp, (value) => remNoScale(value.replace(/rem\((.*?)\)/g, '$1')))
+          .replace(emRegExp, (value) => em(value.replace(/em\((.*?)\)/g, '$1')));
       },
@@ -30,0 +53,0 @@ },

test.js

@@ -6,5 +6,11 @@ const postcss = require('postcss');
 .button {
-  &[data-disabled] {
-    border-color: light-dark(red, blue);
+  border-radius: rem(16px);
+
+  @media (min-width: em(500px)) {
+    color: red
   }
+
+  @media (min-width: rem(500px)) {
+    color: red
+  }
 }
@@ -11,0 +17,0 @@ `;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7049

increased by10.04%

Dependency count

3

decreased by-25%

Lines of code

191

increased by13.02%

Dependency changes

• - Removedstartijenn-rem@^1.1.1

• - Removedstartijenn-rem@1.1.1(transitive)