@mantine/styles - npm Package Compare versions

Comparing version 6.0.0-alpha.4 to 6.0.0-alpha.5

cjs/index.js

@@ -47,2 +47,3 @@ 'use strict';
 exports.filterProps = filterProps.filterProps;
+exports.em = rem.em;
 exports.rem = rem.rem;
@@ -49,0 +50,0 @@ exports.px = px.px;

cjs/theme/default-theme.js

@@ -65,7 +65,7 @@ 'use strict';
   breakpoints: {
-    xs: "36rem",
-    sm: "48rem",
-    md: "62rem",
-    lg: "75rem",
-    xl: "88rem"
+    xs: "36em",
+    sm: "48em",
+    md: "62em",
+    lg: "75em",
+    xl: "88em"
   },
@@ -72,0 +72,0 @@ headings: {

cjs/theme/functions/fns/breakpoints/breakpoints.js

@@ -15,9 +15,12 @@ 'use strict';
   }
+  if (typeof value === "string" && value.includes("em")) {
+    return Number(value.replace("em", "")) * 16;
+  }
   return Number(value);
 }
 function largerThan(theme) {
-  return (breakpoint) => `@media (min-width: ${rem.rem(getBreakpointValue(getSize.getSize({ size: breakpoint, sizes: theme.breakpoints })))})`;
+  return (breakpoint) => `@media (min-width: ${rem.em(getBreakpointValue(getSize.getSize({ size: breakpoint, sizes: theme.breakpoints })))})`;
 }
 function smallerThan(theme) {
-  return (breakpoint) => `@media (max-width: ${rem.rem(getBreakpointValue(getSize.getSize({ size: breakpoint, sizes: theme.breakpoints })) - 1)})`;
+  return (breakpoint) => `@media (max-width: ${rem.em(getBreakpointValue(getSize.getSize({ size: breakpoint, sizes: theme.breakpoints })) - 1)})`;
 }
@@ -24,0 +27,0 @@

cjs/theme/utils/get-size/get-size.js

@@ -9,3 +9,4 @@ 'use strict';
   size,
-  sizes
+  sizes,
+  units
 }) {
@@ -16,3 +17,3 @@ if (size in sizes) {
   if (typeof size === "number") {
-    return rem.rem(size);
+    return units === "em" ? rem.em(size) : rem.rem(size);
   }
@@ -19,0 +20,0 @@ return size || sizes.md;

cjs/theme/utils/rem/rem.js

@@ -5,16 +5,21 @@ 'use strict';
 
-function rem(px) {
-  if (typeof px === "number") {
-    return `${px / 16}rem`;
-  }
-  if (typeof px === "string") {
-    const replaced = px.replace("px", "");
-    if (!Number.isNaN(Number(replaced))) {
-      return `${Number(replaced) / 16}rem`;
+function createConverter(units) {
+  return (px) => {
+    if (typeof px === "number") {
+      return `${px / 16}${units}`;
     }
-  }
-  return px;
+    if (typeof px === "string") {
+      const replaced = px.replace("px", "");
+      if (!Number.isNaN(Number(replaced))) {
+        return `${Number(replaced) / 16}${units}`;
+      }
+    }
+    return px;
+  };
 }
+const rem = createConverter("rem");
+const em = createConverter("em");
 
+exports.em = em;
 exports.rem = rem;
 //# sourceMappingURL=rem.js.map

esm/index.js

@@ -10,3 +10,3 @@ export { default as clsx } from 'clsx';
 export { filterProps } from './theme/utils/filter-props/filter-props.js';
-export { rem } from './theme/utils/rem/rem.js';
+export { em, rem } from './theme/utils/rem/rem.js';
 export { px } from './theme/utils/px/px.js';
@@ -13,0 +13,0 @@ export { getSize } from './theme/utils/get-size/get-size.js';

esm/theme/default-theme.js

@@ -61,7 +61,7 @@ import { DEFAULT_COLORS } from './default-colors.js';
   breakpoints: {
-    xs: "36rem",
-    sm: "48rem",
-    md: "62rem",
-    lg: "75rem",
-    xl: "88rem"
+    xs: "36em",
+    sm: "48em",
+    md: "62em",
+    lg: "75em",
+    xl: "88em"
   },
@@ -68,0 +68,0 @@ headings: {

esm/theme/functions/fns/breakpoints/breakpoints.js

@@ -1,2 +0,2 @@
-import { rem } from '../../../utils/rem/rem.js';
+import { em } from '../../../utils/rem/rem.js';
 import { getSize } from '../../../utils/get-size/get-size.js';
@@ -11,9 +11,12 @@
   }
+  if (typeof value === "string" && value.includes("em")) {
+    return Number(value.replace("em", "")) * 16;
+  }
   return Number(value);
 }
 function largerThan(theme) {
-  return (breakpoint) => `@media (min-width: ${rem(getBreakpointValue(getSize({ size: breakpoint, sizes: theme.breakpoints })))})`;
+  return (breakpoint) => `@media (min-width: ${em(getBreakpointValue(getSize({ size: breakpoint, sizes: theme.breakpoints })))})`;
 }
 function smallerThan(theme) {
-  return (breakpoint) => `@media (max-width: ${rem(getBreakpointValue(getSize({ size: breakpoint, sizes: theme.breakpoints })) - 1)})`;
+  return (breakpoint) => `@media (max-width: ${em(getBreakpointValue(getSize({ size: breakpoint, sizes: theme.breakpoints })) - 1)})`;
 }
@@ -20,0 +23,0 @@

esm/theme/utils/get-size/get-size.js

@@ -1,6 +0,7 @@
-import { rem } from '../rem/rem.js';
+import { em, rem } from '../rem/rem.js';
 
 function getSize({
   size,
-  sizes
+  sizes,
+  units
 }) {
@@ -11,3 +12,3 @@ if (size in sizes) {
   if (typeof size === "number") {
-    return rem(size);
+    return units === "em" ? em(size) : rem(size);
   }
@@ -14,0 +15,0 @@ return size || sizes.md;

esm/theme/utils/rem/rem.js

@@ -1,15 +0,19 @@
-function rem(px) {
-  if (typeof px === "number") {
-    return `${px / 16}rem`;
-  }
-  if (typeof px === "string") {
-    const replaced = px.replace("px", "");
-    if (!Number.isNaN(Number(replaced))) {
-      return `${Number(replaced) / 16}rem`;
+function createConverter(units) {
+  return (px) => {
+    if (typeof px === "number") {
+      return `${px / 16}${units}`;
     }
-  }
-  return px;
+    if (typeof px === "string") {
+      const replaced = px.replace("px", "");
+      if (!Number.isNaN(Number(replaced))) {
+        return `${Number(replaced) / 16}${units}`;
+      }
+    }
+    return px;
+  };
 }
+const rem = createConverter("rem");
+const em = createConverter("em");
 
-export { rem };
+export { em, rem };
 //# sourceMappingURL=rem.js.map

lib/theme/utils/get-size/get-size.d.ts

 import { MantineNumberSize } from '../../types';
-export declare function getSize<Sizes extends Record<string, any>, Key extends keyof Sizes, Size extends MantineNumberSize>({ size, sizes, }: {
+export declare function getSize<Sizes extends Record<string, any>, Key extends keyof Sizes, Size extends MantineNumberSize>({ size, sizes, units, }: {
     size: Size;
     sizes: Sizes;
+    units?: 'em' | 'rem';
 }): Size extends Key ? Sizes[Size] : Size extends number ? string : Size;
 //# sourceMappingURL=get-size.d.ts.map

lib/theme/utils/index.d.ts

 export { getDefaultZIndex } from './get-default-z-index/get-default-z-index';
 export { filterProps } from './filter-props/filter-props';
-export { rem } from './rem/rem';
+export { rem, em } from './rem/rem';
 export { px } from './px/px';
 export { getSize } from './get-size/get-size';
 //# sourceMappingURL=index.d.ts.map

lib/theme/utils/rem/rem.d.ts

@@ -1,2 +0,3 @@
-export declare function rem(px: unknown): string;
+export declare const rem: (px: unknown) => string;
+export declare const em: (px: unknown) => string;
 //# sourceMappingURL=rem.d.ts.map

package.json

 {
   "name": "@mantine/styles",
   "description": "Mantine css-in-js styles engine, based on emotion",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-alpha.5",
   "main": "cjs/index.js",
@@ -6,0 +6,0 @@ "module": "esm/index.js",

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

364515

increased by0.62%

Lines of code

3493

increased by0.58%

No dependency changes