@pandacss/preset-base - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/index.d.ts

@@ -292,11 +292,21 @@ import * as _pandacss_types_dist_pattern from '@pandacss/types/dist/pattern';
             blocklist: "aspectRatio"[];
-            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
-                aspectRatio: any;
-                overflow: "hidden";
-                display: "flex";
-                justifyContent: "center";
-                alignItems: "center";
-                '&>img, &>video': {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
+                position: "relative";
+                _before: {
+                    content: "\"\"";
+                    display: "block";
+                    height: "0";
+                    paddingBottom: any;
+                };
+                '&>*': {
+                    display: "flex";
+                    justifyContent: "center";
+                    alignItems: "center";
+                    overflow: "hidden";
+                    position: "absolute";
+                    inset: "0";
                     width: "100%";
                     height: "100%";
+                };
+                '&>img, &>video': {
                     objectFit: "cover";
@@ -432,3 +442,3 @@ };
                 height: any;
-                borderInlineStartWidth: any;
+                borderBlockEndWidth: any;
                 borderInlineEndWidth: any;
@@ -435,0 +445,0 @@ borderColor: any;

dist/index.js

@@ -87,3 +87,3 @@ "use strict";
   outOfRange: "&:out-of-range",
-  placeholder: "&:placeholder",
+  placeholder: "&::placeholder",
   placeholderShown: "&:placeholder-shown",
@@ -140,3 +140,9 @@ pressed: "&:where([aria-pressed=true], [data-pressed])",
     shorthand: "bgClip",
-    className: "bg-clip"
+    className: "bg-clip",
+    transform(value) {
+      return {
+        backgroundClip: value,
+        WebkitBackgroundClip: value
+      };
+    }
   },
@@ -682,2 +688,8 @@ background: {
       ].join(" ")
+    },
+    transform(value) {
+      return {
+        backdropFilter: value,
+        WebkitBackdropFilter: value
+      };
     }
@@ -1210,3 +1222,9 @@ },
   userSelect: {
-    className: "select"
+    className: "select",
+    transform(value) {
+      return {
+        WebkitUserSelect: value,
+        userSelect: value
+      };
+    }
   }
@@ -1220,2 +1238,3 @@ };
     values: {
+      auto: "auto",
       square: "1 / 1",
@@ -1230,3 +1249,9 @@ landscape: "4 / 3",
   boxDecorationBreak: {
-    className: "decoration"
+    className: "decoration",
+    transform(value) {
+      return {
+        boxDecorationBreak: value,
+        WebkitBoxDecorationBreak: value
+      };
+    }
   },
@@ -1276,3 +1301,6 @@ zIndex: {
     className: "inset",
-    values: "spacing"
+    values: (theme) => ({
+      auto: "auto",
+      ...theme("spacing")
+    })
   },
@@ -1400,2 +1428,3 @@ insetBlockEnd: {
 var widthValues = (theme) => ({
+  auto: "auto",
   ...theme("sizes"),
@@ -1431,2 +1460,3 @@ "1/2": "50%",
 var heightValues = (theme) => ({
+  auto: "auto",
   ...theme("sizes"),
@@ -1511,2 +1541,6 @@ svh: "100svh",
 // src/utilities/spacing.ts
+var marginValues = (theme) => ({
+  auto: "auto",
+  ...theme("spacing")
+});
 var spacing = {
@@ -1569,3 +1603,3 @@ padding: {
     shorthand: "ml",
-    values: "spacing"
+    values: marginValues
   },
@@ -1575,3 +1609,3 @@ marginRight: {
     shorthand: "mr",
-    values: "spacing"
+    values: marginValues
   },
@@ -1581,3 +1615,3 @@ marginTop: {
     shorthand: "mt",
-    values: "spacing"
+    values: marginValues
   },
@@ -1587,3 +1621,3 @@ marginBottom: {
     shorthand: "mb",
-    values: "spacing"
+    values: marginValues
   },
@@ -1593,7 +1627,7 @@ margin: {
     shorthand: "m",
-    values: "spacing"
+    values: marginValues
   },
   marginBlock: {
     className: "my",
-    values: "spacing",
+    values: marginValues,
     shorthand: ["my", "marginY"]
@@ -1603,11 +1637,11 @@ },
     className: "mb",
-    values: "spacing"
+    values: marginValues
   },
   marginBlockStart: {
     className: "mt",
-    values: "spacing"
+    values: marginValues
   },
   marginInline: {
     className: "mx",
-    values: "spacing",
+    values: marginValues,
     shorthand: ["mx", "marginX"]
@@ -1618,3 +1652,3 @@ },
     shorthand: ["me", "marginEnd"],
-    values: "spacing"
+    values: marginValues
   },
@@ -1624,3 +1658,3 @@ marginInlineStart: {
     shorthand: ["ms", "marginStart"],
-    values: "spacing"
+    values: marginValues
   }
@@ -1911,2 +1945,54 @@ };
 
+// src/utilities/polyfill.ts
+var polyfill = {
+  appearance: {
+    className: "appearance",
+    transform(value) {
+      return { appearance: value, WebkitAppearance: value };
+    }
+  },
+  backfaceVisibility: {
+    className: "backface",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
+  },
+  clipPath: {
+    className: "clip-path",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
+    }
+  },
+  hyphens: {
+    className: "hyphens",
+    transform(value) {
+      return { hyphens: value, WebkitHyphens: value };
+    }
+  },
+  mask: {
+    className: "mask",
+    transform(value) {
+      return { mask: value, WebkitMask: value };
+    }
+  },
+  maskImage: {
+    className: "mask-image",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
+    }
+  },
+  maskSize: {
+    className: "mask-size",
+    transform(value) {
+      return { maskSize: value, WebkitMaskSize: value };
+    }
+  },
+  textSizeAdjust: {
+    className: "text-size-adjust",
+    transform(value) {
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+    }
+  }
+};
+
 // src/utilities/index.ts
@@ -1932,3 +2018,4 @@ var utilities = Object.assign(
   svg,
-  helpers
+  helpers,
+  polyfill
 );
@@ -2169,13 +2256,23 @@
   blocklist: ["aspectRatio"],
-  transform(props) {
-    const { ratio, ...rest } = props;
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props;
     return {
-      aspectRatio: ratio,
-      overflow: "hidden",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        height: "0",
+        paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+      },
+      "&>*": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        position: "absolute",
+        inset: "0",
+        width: "100%",
+        height: "100%"
+      },
       "&>img, &>video": {
-        width: "100%",
-        height: "100%",
         objectFit: "cover"
@@ -2199,3 +2296,3 @@ },
       height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
-      borderInlineStartWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+      borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
       borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
@@ -2202,0 +2299,0 @@ borderColor: color,

package.json

 {
   "name": "@pandacss/preset-base",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
@@ -17,3 +17,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@pandacss/types": "0.3.2"
+    "@pandacss/types": "0.4.0"
   },
@@ -20,0 +20,0 @@ "scripts": {

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

122038

increased by3.93%

Lines of code

5214

increased by4.03%

Dependency changes

• + Added@pandacss/types@0.4.0(transitive)

• - Removed@pandacss/types@0.3.2(transitive)

• Updated@pandacss/types@0.4.0