postcss-clampwind 0.0.2 → 0.0.4

package/README.md

@@ -305,6 +305,33 @@ But Tailwind by default, will not output in your CSS any custom properties that
 }
 ```
 
+### Set a default clamp range
+
+You can set a default clamp range to use when no breakpoint modifier is used, like this:
+
+```html
+<div class="text-[clamp(16px,50px)]"></div>
+```
+
+To set a default clamp range you need to use the `--breakpoint-clamp-min` and `--breakpoint-clamp-max` custom properties, defined inside the `@theme static` directive.
+
+```css
+@theme static {
+  --breakpoint-clamp-min: 600px;
+  --breakpoint-clamp-max: 1200px;
+}
+```
+
+This will also apply for utilities that use only one breakpoint modifier. In this example the `md` breakpoint will be used as the minimum breakpoint, and `--breakpoint-clamp-max` will be used as the maximum breakpoint:
+
+```html
+<div class="md:text-[clamp(16px,50px)]"></div>
+```
+
+The default clamp range will let you to simplify your utilities, since usually you don't need to clamp between the smallest and largest Tailwind breakpoints, but only between two breakpoints. 
+
+You will still be able to clamp between any other Tailwind or custom breakpoints, even if out of the default clamp range.
+
 ### Use custom properties
 
 You can use any custom properties in your clamped values, for example:

package/dist/clampwind.cjs.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/clampwind.js
@@ -32,7 +22,6 @@ __export(clampwind_exports, {
   default: () => clampwind_default
 });
 module.exports = __toCommonJS(clampwind_exports);
-var import_postcss = __toESM(require("postcss"), 1);
 
 // src/screens.js
 var defaultScreens = {
@@ -75,28 +64,13 @@ var defaultContainerScreens = {
   "@7xl": "80rem"
   // 1280px
 };
-var convertSortScreens = (screens, rootFontSize = 16) => {
-  const convertedScreens = Object.entries(screens).reduce((acc, [key, value]) => {
-    if (value.includes("px")) {
-      const pxValue = parseFloat(value);
-      acc[key] = `${pxValue / rootFontSize}rem`;
-    } else {
-      acc[key] = value;
-    }
-    return acc;
-  }, {});
-  const sortedKeys = Object.keys(convertedScreens).sort((a, b) => {
-    const aValue = parseFloat(convertedScreens[a]);
-    const bValue = parseFloat(convertedScreens[b]);
-    return aValue - bValue;
-  });
-  return sortedKeys.reduce((acc, key) => {
-    acc[key] = convertedScreens[key];
-    return acc;
-  }, {});
-};
 
 // src/utils.js
+var smartRound = (value, maxDecimals = 4) => {
+  const precise = value.toFixed(maxDecimals);
+  const trimmed = precise.replace(/\.?0+$/, "");
+  return trimmed || "0";
+};
 var extractTwoValidClampArgs = (value) => {
   const m = value.match(/\bclamp\s*\(\s*(var\([^()]+\)|[^,()]+)\s*,\s*(var\([^()]+\)|[^,()]+)\s*\)$/);
   return m ? [m[1].trim(), m[2].trim()] : null;
@@ -123,28 +97,28 @@ var convertToRem = (value, rootFontSize, spacingSize, customProperties = {}) =>
     const spacingSizeInt = parseFloat(spacingSize);
     const spacingUnit = extractUnit(spacingSize);
     if (spacingUnit === "px") {
-      return `${parseFloat(value * spacingSizeInt / rootFontSize).toFixed(4)}rem`;
+      return `${smartRound(value * spacingSizeInt / rootFontSize)}rem`;
     }
     if (spacingUnit === "rem") {
-      return `${parseFloat(value * spacingSizeInt).toFixed(4)}rem`;
+      return `${smartRound(value * spacingSizeInt)}rem`;
     }
   }
   if (unit === "px") {
-    return `${parseFloat(value.replace("px", "") / rootFontSize).toFixed(4)}rem`;
+    return `${smartRound(value.replace("px", "") / rootFontSize)}rem`;
   }
   if (unit === "rem") {
     return value;
   }
   if (customProperties[formattedProperty]) {
-    return `${customProperties[formattedProperty]}rem`;
+    return customProperties[formattedProperty];
   }
   if (formattedProperty && !customProperties[formattedProperty] && fallbackValue) {
     const fallbackUnit = extractUnit(fallbackValue);
     if (!fallbackUnit) {
-      return `${parseFloat(fallbackValue * spacingSize).toFixed(4)}rem`;
+      return `${smartRound(fallbackValue * spacingSize)}rem`;
     }
     if (fallbackUnit === "px") {
-      return `${parseFloat(fallbackValue.replace("px", "") / rootFontSize).toFixed(4)}rem`;
+      return `${smartRound(fallbackValue.replace("px", "") / rootFontSize)}rem`;
     }
     if (fallbackUnit === "rem") {
       return fallbackValue;
@@ -165,10 +139,21 @@ var generateClamp = (lower, upper, minScreen, maxScreen, rootFontSize = 16, spac
   const min = isDescending ? upper : lower;
   const max = isDescending ? lower : upper;
   const widthUnit = containerQuery ? `100cqw` : `100vw`;
-  const slopeInt = parseFloat(((upperInt - lowerInt) / (maxScreenInt - minScreenInt)).toFixed(4));
+  const slopeInt = smartRound((upperInt - lowerInt) / (maxScreenInt - minScreenInt));
   const clamp = `clamp(${min}, calc(${lower} + ${slopeInt} * (${widthUnit} - ${minScreen})), ${max})`;
   return clamp;
 };
+var sortScreens = (screens) => {
+  const sortedKeys = Object.keys(screens).sort((a, b) => {
+    const aValue = parseFloat(screens[a]);
+    const bValue = parseFloat(screens[b]);
+    return aValue - bValue;
+  });
+  return sortedKeys.reduce((acc, key) => {
+    acc[key] = screens[key];
+    return acc;
+  }, {});
+};
 
 // src/clampwind.js
 var clampwind = (opts = {}) => {
@@ -176,13 +161,12 @@ var clampwind = (opts = {}) => {
     postcssPlugin: "clampwind",
     prepare() {
       let rootFontSize = 16;
-      let spacingSize = "1px";
+      let spacingSize = "0.25rem";
       let customProperties = {};
       let screens = defaultScreens || {};
       let containerScreens = defaultContainerScreens || {};
+      let defaultClampRange = {};
       const config = {
-        defaultLayerBreakpoints: {},
-        defaultLayerContainerBreakpoints: {},
         themeLayerBreakpoints: {},
         themeLayerContainerBreakpoints: {},
         rootElementBreakpoints: {},
@@ -206,17 +190,48 @@ var clampwind = (opts = {}) => {
           if (decl.parent?.selector === ":root") {
             if (decl.prop.startsWith("--breakpoint-")) {
               const key = decl.prop.replace("--breakpoint-", "");
-              config.rootElementBreakpoints[key] = decl.value;
+              config.rootElementBreakpoints[key] = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
             }
             if (decl.prop.startsWith("--container-")) {
               const key = decl.prop.replace("--container-", "@");
-              config.rootElementContainerBreakpoints[key] = decl.value;
+              config.rootElementContainerBreakpoints[key] = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
+            }
+            if (decl.prop === "--breakpoint-clamp-min") {
+              defaultClampRange.min = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
+            }
+            if (decl.prop === "--breakpoint-clamp-max") {
+              defaultClampRange.max = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
             }
             if (decl.prop === "--spacing") {
               spacingSize = decl.value;
             }
             if (decl.prop.startsWith("--")) {
-              const value = parseFloat(convertToRem(decl.value, rootFontSize, spacingSize, customProperties));
+              const value = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
               if (value) customProperties[decl.prop] = value;
             }
           }
@@ -231,35 +246,52 @@ var clampwind = (opts = {}) => {
           }
         });
         root.walkAtRules("layer", (atRule) => {
-          if (atRule.params === "default") {
-            if (!Object.keys(config.defaultLayerBreakpoints).length) {
-              atRule.walkDecls((decl) => {
-                if (decl.prop.startsWith("--breakpoint-")) {
-                  const key = decl.prop.replace("--breakpoint-", "");
-                  config.defaultLayerBreakpoints[key] = decl.value;
-                }
-                if (decl.prop.startsWith("--container-")) {
-                  const key = decl.prop.replace("--container-", "@");
-                  config.defaultLayerContainerBreakpoints[key] = decl.value;
-                }
-              });
-            }
-          }
           if (atRule.params === "theme") {
             atRule.walkDecls((decl) => {
               if (decl.prop.startsWith("--breakpoint-")) {
                 const key = decl.prop.replace("--breakpoint-", "");
-                config.themeLayerBreakpoints[key] = decl.value;
+                config.themeLayerBreakpoints[key] = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
               }
               if (decl.prop.startsWith("--container-")) {
                 const key = decl.prop.replace("--container-", "@");
-                config.themeLayerContainerBreakpoints[key] = decl.value;
+                config.themeLayerContainerBreakpoints[key] = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
+              }
+              if (decl.prop === "--breakpoint-clamp-min") {
+                defaultClampRange.min = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
+              }
+              if (decl.prop === "--breakpoint-clamp-max") {
+                defaultClampRange.max = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
               }
               if (decl.prop === "--spacing") {
                 spacingSize = decl.value;
               }
               if (decl.prop.startsWith("--")) {
-                const value = parseFloat(convertToRem(decl.value, rootFontSize, spacingSize, customProperties));
+                const value = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
                 if (value) customProperties[decl.prop] = value;
               }
             });
@@ -272,30 +304,38 @@ var clampwind = (opts = {}) => {
         screens = Object.assign(
           {},
           screens,
-          config.defaultLayerBreakpoints,
           config.rootElementBreakpoints,
           config.themeLayerBreakpoints
         );
-        screens = convertSortScreens(screens, rootFontSize);
+        screens = sortScreens(screens);
         containerScreens = Object.assign(
           {},
           containerScreens,
-          config.defaultLayerContainerBreakpoints,
           config.rootElementContainerBreakpoints,
           config.themeLayerContainerBreakpoints
         );
-        containerScreens = convertSortScreens(containerScreens, rootFontSize);
+        containerScreens = sortScreens(containerScreens);
         config.configReady = true;
       };
       const processClampDeclaration = (decl, minScreen, maxScreen, isContainer = false) => {
         const args = extractTwoValidClampArgs(decl.value);
-        const [lower, upper] = args.map((val) => convertToRem(val, rootFontSize, spacingSize, customProperties));
+        const [lower, upper] = args.map(
+          (val) => convertToRem(val, rootFontSize, spacingSize, customProperties)
+        );
         if (!args || !lower || !upper) {
           console.warn("Invalid clamp() values", { node: decl });
           decl.value = ` ${decl.value} /* Invalid clamp() values */`;
           return true;
         }
-        const clamp = generateClamp(lower, upper, minScreen, maxScreen, rootFontSize, spacingSize, isContainer);
+        const clamp = generateClamp(
+          lower,
+          upper,
+          minScreen,
+          maxScreen,
+          rootFontSize,
+          spacingSize,
+          isContainer
+        );
         decl.value = clamp;
         return true;
       };
@@ -305,8 +345,6 @@ var clampwind = (opts = {}) => {
           collectConfig(root);
           finalizeConfig();
           root.walkAtRules("media", (atRule) => {
-            const isNested = atRule.parent?.type === "atrule";
-            const isSameAtRule = atRule.parent?.name === atRule.name;
             const clampDecls = [];
             atRule.walkDecls((decl) => {
               if (extractTwoValidClampArgs(decl.value)) {
@@ -314,53 +352,56 @@ var clampwind = (opts = {}) => {
               }
             });
             if (!clampDecls.length) return;
-            if (isNested && isSameAtRule) {
-              const parentParams = atRule.parent.params;
-              const currentParams = atRule.params;
-              let minScreen = null;
-              let maxScreen = null;
-              if (parentParams.includes(">")) {
-                const match = parentParams.match(/>=?\s*([^)]+)/);
-                if (match) minScreen = match[1].trim();
-              }
-              if (currentParams.includes(">") && !minScreen) {
-                const match = currentParams.match(/>=?\s*([^)]+)/);
-                if (match) minScreen = match[1].trim();
-              }
-              if (parentParams.includes("<")) {
-                const match = parentParams.match(/<\s*([^)]+)/);
-                if (match) maxScreen = match[1].trim();
-              }
-              if (currentParams.includes("<") && !maxScreen) {
-                const match = currentParams.match(/<\s*([^)]+)/);
-                if (match) maxScreen = match[1].trim();
+            clampDecls.forEach((decl) => {
+              const isNested = decl.parent?.type === "atrule" && decl.parent?.parent.type === "atrule";
+              const isSameAtRule = decl.parent?.name === decl.parent?.parent.name;
+              if (isNested && isSameAtRule) {
+                const currentParams2 = decl.parent.params;
+                const parentParams = decl.parent.parent.params;
+                let minScreen = null;
+                let maxScreen = null;
+                if (parentParams.includes(">")) {
+                  const match = parentParams.match(/>=?\s*([^)]+)/);
+                  if (match) minScreen = match[1].trim();
+                }
+                if (currentParams2.includes(">") && !minScreen) {
+                  const match = currentParams2.match(/>=?\s*([^)]+)/);
+                  if (match) minScreen = match[1].trim();
+                }
+                if (parentParams.includes("<")) {
+                  const match = parentParams.match(/<\s*([^)]+)/);
+                  if (match) maxScreen = match[1].trim();
+                }
+                if (currentParams2.includes("<") && !maxScreen) {
+                  const match = currentParams2.match(/<\s*([^)]+)/);
+                  if (match) maxScreen = match[1].trim();
+                }
+                if (minScreen && maxScreen) {
+                  clampDecls.forEach((decl2) => {
+                    processClampDeclaration(decl2, minScreen, maxScreen, false);
+                  });
+                }
+                return;
               }
-              if (minScreen && maxScreen) {
-                clampDecls.forEach((decl) => {
-                  processClampDeclaration(decl, minScreen, maxScreen, false);
+              if (isNested && !isSameAtRule) {
+                clampDecls.forEach((decl2) => {
+                  decl2.value = ` ${decl2.value} /* Invalid nested @media rules */`;
                 });
+                return;
               }
-              return;
-            }
-            if (isNested && !isSameAtRule) {
-              clampDecls.forEach((decl) => {
-                decl.value = ` ${decl.value} /* Invalid nested @media rules */`;
-              });
-              return;
-            }
-            const screenValues = Object.values(screens);
-            clampDecls.forEach((decl) => {
-              if (atRule.params.includes(">")) {
-                const match = atRule.params.match(/>=?\s*([^)]+)/);
+              const screenValues = Object.values(screens);
+              const currentParams = decl.parent.params;
+              if (currentParams.includes(">")) {
+                const match = currentParams.match(/>=?\s*([^)]+)/);
                 if (match) {
                   const minScreen = match[1].trim();
-                  const maxScreen = screenValues[screenValues.length - 1];
+                  const maxScreen = defaultClampRange.max || screenValues[screenValues.length - 1];
                   processClampDeclaration(decl, minScreen, maxScreen, false);
                 }
-              } else if (atRule.params.includes("<")) {
-                const match = atRule.params.match(/<\s*([^)]+)/);
+              } else if (currentParams.includes("<")) {
+                const match = currentParams.match(/<\s*([^)]+)/);
                 if (match) {
-                  const minScreen = screenValues[0];
+                  const minScreen = defaultClampRange.min || screenValues[0];
                   const maxScreen = match[1].trim();
                   processClampDeclaration(decl, minScreen, maxScreen, false);
                 }
@@ -368,8 +409,6 @@ var clampwind = (opts = {}) => {
             });
           });
           root.walkAtRules("container", (atRule) => {
-            const isNested = atRule.parent?.type === "atrule";
-            const isSameAtRule = atRule.parent?.name === atRule.name;
             const clampDecls = [];
             atRule.walkDecls((decl) => {
               if (extractTwoValidClampArgs(decl.value)) {
@@ -377,55 +416,73 @@ var clampwind = (opts = {}) => {
               }
             });
             if (!clampDecls.length) return;
-            if (isNested && isSameAtRule) {
-              const parentParams = atRule.parent.params;
-              const currentParams = atRule.params;
-              let minContainer = null;
-              let maxContainer = null;
-              if (parentParams.includes(">")) {
-                const match = parentParams.match(/>=?\s*([^)]+)/);
-                if (match) minContainer = match[1].trim();
-              }
-              if (currentParams.includes(">") && !minContainer) {
-                const match = currentParams.match(/>=?\s*([^)]+)/);
-                if (match) minContainer = match[1].trim();
-              }
-              if (parentParams.includes("<")) {
-                const match = parentParams.match(/<\s*([^)]+)/);
-                if (match) maxContainer = match[1].trim();
-              }
-              if (currentParams.includes("<") && !maxContainer) {
-                const match = currentParams.match(/<\s*([^)]+)/);
-                if (match) maxContainer = match[1].trim();
+            clampDecls.forEach((decl) => {
+              const isNested = decl.parent?.type === "atrule" && decl.parent?.parent.type === "atrule";
+              const isSameAtRule = decl.parent?.name === decl.parent?.parent.name;
+              if (isNested && isSameAtRule) {
+                const currentParams2 = decl.parent.params;
+                const parentParams = decl.parent.parent.params;
+                let minContainer = null;
+                let maxContainer = null;
+                if (parentParams.includes(">")) {
+                  const match = parentParams.match(/>=?\s*([^)]+)/);
+                  if (match) minContainer = match[1].trim();
+                }
+                if (currentParams2.includes(">") && !minContainer) {
+                  const match = currentParams2.match(/>=?\s*([^)]+)/);
+                  if (match) minContainer = match[1].trim();
+                }
+                if (parentParams.includes("<")) {
+                  const match = parentParams.match(/<\s*([^)]+)/);
+                  if (match) maxContainer = match[1].trim();
+                }
+                if (currentParams2.includes("<") && !maxContainer) {
+                  const match = currentParams2.match(/<\s*([^)]+)/);
+                  if (match) maxContainer = match[1].trim();
+                }
+                if (minContainer && maxContainer) {
+                  clampDecls.forEach((decl2) => {
+                    processClampDeclaration(
+                      decl2,
+                      minContainer,
+                      maxContainer,
+                      true
+                    );
+                  });
+                }
+                return;
               }
-              if (minContainer && maxContainer) {
-                clampDecls.forEach((decl) => {
-                  processClampDeclaration(decl, minContainer, maxContainer, true);
+              if (isNested && !isSameAtRule) {
+                clampDecls.forEach((decl2) => {
+                  decl2.value = ` ${decl2.value} /* Invalid nested @container rules */`;
                 });
+                return;
               }
-              return;
-            }
-            if (isNested && !isSameAtRule) {
-              clampDecls.forEach((decl) => {
-                decl.value = ` ${decl.value} /* Invalid nested @container rules */`;
-              });
-              return;
-            }
-            const screenValues = Object.values(containerScreens);
-            clampDecls.forEach((decl) => {
-              if (atRule.params.includes(">")) {
-                const match = atRule.params.match(/>=?\s*([^)]+)/);
+              const containerValues = Object.values(containerScreens);
+              const currentParams = decl.parent.params;
+              if (currentParams.includes(">")) {
+                const match = currentParams.match(/>=?\s*([^)]+)/);
                 if (match) {
                   const minContainer = match[1].trim();
-                  const maxContainer = screenValues[screenValues.length - 1];
-                  processClampDeclaration(decl, minContainer, maxContainer, true);
+                  const maxContainer = containerValues[containerValues.length - 1];
+                  processClampDeclaration(
+                    decl,
+                    minContainer,
+                    maxContainer,
+                    true
+                  );
                 }
-              } else if (atRule.params.includes("<")) {
-                const match = atRule.params.match(/<\s*([^)]+)/);
+              } else if (currentParams.includes("<")) {
+                const match = currentParams.match(/<\s*([^)]+)/);
                 if (match) {
-                  const minContainer = screenValues[0];
+                  const minContainer = containerValues[0];
                   const maxContainer = match[1].trim();
-                  processClampDeclaration(decl, minContainer, maxContainer, true);
+                  processClampDeclaration(
+                    decl,
+                    minContainer,
+                    maxContainer,
+                    true
+                  );
                 }
               }
             });
@@ -446,8 +503,8 @@ var clampwind = (opts = {}) => {
             });
             if (clampDecls.length === 0) return;
             const screenValues = Object.values(screens);
-            const minScreen = screenValues[0];
-            const maxScreen = screenValues[screenValues.length - 1];
+            const minScreen = defaultClampRange.min || screenValues[0];
+            const maxScreen = defaultClampRange.max || screenValues[screenValues.length - 1];
             clampDecls.forEach((decl) => {
               processClampDeclaration(decl, minScreen, maxScreen, false);
             });

package/dist/clampwind.esm.js

@@ -1,6 +1,3 @@
-// src/clampwind.js
-import postcss from "postcss";
-
 // src/screens.js
 var defaultScreens = {
   sm: "40rem",
@@ -42,28 +39,13 @@ var defaultContainerScreens = {
   "@7xl": "80rem"
   // 1280px
 };
-var convertSortScreens = (screens, rootFontSize = 16) => {
-  const convertedScreens = Object.entries(screens).reduce((acc, [key, value]) => {
-    if (value.includes("px")) {
-      const pxValue = parseFloat(value);
-      acc[key] = `${pxValue / rootFontSize}rem`;
-    } else {
-      acc[key] = value;
-    }
-    return acc;
-  }, {});
-  const sortedKeys = Object.keys(convertedScreens).sort((a, b) => {
-    const aValue = parseFloat(convertedScreens[a]);
-    const bValue = parseFloat(convertedScreens[b]);
-    return aValue - bValue;
-  });
-  return sortedKeys.reduce((acc, key) => {
-    acc[key] = convertedScreens[key];
-    return acc;
-  }, {});
-};
 
 // src/utils.js
+var smartRound = (value, maxDecimals = 4) => {
+  const precise = value.toFixed(maxDecimals);
+  const trimmed = precise.replace(/\.?0+$/, "");
+  return trimmed || "0";
+};
 var extractTwoValidClampArgs = (value) => {
   const m = value.match(/\bclamp\s*\(\s*(var\([^()]+\)|[^,()]+)\s*,\s*(var\([^()]+\)|[^,()]+)\s*\)$/);
   return m ? [m[1].trim(), m[2].trim()] : null;
@@ -90,28 +72,28 @@ var convertToRem = (value, rootFontSize, spacingSize, customProperties = {}) =>
     const spacingSizeInt = parseFloat(spacingSize);
     const spacingUnit = extractUnit(spacingSize);
     if (spacingUnit === "px") {
-      return `${parseFloat(value * spacingSizeInt / rootFontSize).toFixed(4)}rem`;
+      return `${smartRound(value * spacingSizeInt / rootFontSize)}rem`;
     }
     if (spacingUnit === "rem") {
-      return `${parseFloat(value * spacingSizeInt).toFixed(4)}rem`;
+      return `${smartRound(value * spacingSizeInt)}rem`;
     }
   }
   if (unit === "px") {
-    return `${parseFloat(value.replace("px", "") / rootFontSize).toFixed(4)}rem`;
+    return `${smartRound(value.replace("px", "") / rootFontSize)}rem`;
   }
   if (unit === "rem") {
     return value;
   }
   if (customProperties[formattedProperty]) {
-    return `${customProperties[formattedProperty]}rem`;
+    return customProperties[formattedProperty];
   }
   if (formattedProperty && !customProperties[formattedProperty] && fallbackValue) {
     const fallbackUnit = extractUnit(fallbackValue);
     if (!fallbackUnit) {
-      return `${parseFloat(fallbackValue * spacingSize).toFixed(4)}rem`;
+      return `${smartRound(fallbackValue * spacingSize)}rem`;
     }
     if (fallbackUnit === "px") {
-      return `${parseFloat(fallbackValue.replace("px", "") / rootFontSize).toFixed(4)}rem`;
+      return `${smartRound(fallbackValue.replace("px", "") / rootFontSize)}rem`;
     }
     if (fallbackUnit === "rem") {
       return fallbackValue;
@@ -132,10 +114,21 @@ var generateClamp = (lower, upper, minScreen, maxScreen, rootFontSize = 16, spac
   const min = isDescending ? upper : lower;
   const max = isDescending ? lower : upper;
   const widthUnit = containerQuery ? `100cqw` : `100vw`;
-  const slopeInt = parseFloat(((upperInt - lowerInt) / (maxScreenInt - minScreenInt)).toFixed(4));
+  const slopeInt = smartRound((upperInt - lowerInt) / (maxScreenInt - minScreenInt));
   const clamp = `clamp(${min}, calc(${lower} + ${slopeInt} * (${widthUnit} - ${minScreen})), ${max})`;
   return clamp;
 };
+var sortScreens = (screens) => {
+  const sortedKeys = Object.keys(screens).sort((a, b) => {
+    const aValue = parseFloat(screens[a]);
+    const bValue = parseFloat(screens[b]);
+    return aValue - bValue;
+  });
+  return sortedKeys.reduce((acc, key) => {
+    acc[key] = screens[key];
+    return acc;
+  }, {});
+};
 
 // src/clampwind.js
 var clampwind = (opts = {}) => {
@@ -143,13 +136,12 @@ var clampwind = (opts = {}) => {
     postcssPlugin: "clampwind",
     prepare() {
       let rootFontSize = 16;
-      let spacingSize = "1px";
+      let spacingSize = "0.25rem";
       let customProperties = {};
       let screens = defaultScreens || {};
       let containerScreens = defaultContainerScreens || {};
+      let defaultClampRange = {};
       const config = {
-        defaultLayerBreakpoints: {},
-        defaultLayerContainerBreakpoints: {},
         themeLayerBreakpoints: {},
         themeLayerContainerBreakpoints: {},
         rootElementBreakpoints: {},
@@ -173,17 +165,48 @@ var clampwind = (opts = {}) => {
           if (decl.parent?.selector === ":root") {
             if (decl.prop.startsWith("--breakpoint-")) {
               const key = decl.prop.replace("--breakpoint-", "");
-              config.rootElementBreakpoints[key] = decl.value;
+              config.rootElementBreakpoints[key] = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
             }
             if (decl.prop.startsWith("--container-")) {
               const key = decl.prop.replace("--container-", "@");
-              config.rootElementContainerBreakpoints[key] = decl.value;
+              config.rootElementContainerBreakpoints[key] = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
+            }
+            if (decl.prop === "--breakpoint-clamp-min") {
+              defaultClampRange.min = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
+            }
+            if (decl.prop === "--breakpoint-clamp-max") {
+              defaultClampRange.max = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
             }
             if (decl.prop === "--spacing") {
               spacingSize = decl.value;
             }
             if (decl.prop.startsWith("--")) {
-              const value = parseFloat(convertToRem(decl.value, rootFontSize, spacingSize, customProperties));
+              const value = convertToRem(
+                decl.value,
+                rootFontSize,
+                spacingSize,
+                customProperties
+              );
               if (value) customProperties[decl.prop] = value;
             }
           }
@@ -198,35 +221,52 @@ var clampwind = (opts = {}) => {
           }
         });
         root.walkAtRules("layer", (atRule) => {
-          if (atRule.params === "default") {
-            if (!Object.keys(config.defaultLayerBreakpoints).length) {
-              atRule.walkDecls((decl) => {
-                if (decl.prop.startsWith("--breakpoint-")) {
-                  const key = decl.prop.replace("--breakpoint-", "");
-                  config.defaultLayerBreakpoints[key] = decl.value;
-                }
-                if (decl.prop.startsWith("--container-")) {
-                  const key = decl.prop.replace("--container-", "@");
-                  config.defaultLayerContainerBreakpoints[key] = decl.value;
-                }
-              });
-            }
-          }
           if (atRule.params === "theme") {
             atRule.walkDecls((decl) => {
               if (decl.prop.startsWith("--breakpoint-")) {
                 const key = decl.prop.replace("--breakpoint-", "");
-                config.themeLayerBreakpoints[key] = decl.value;
+                config.themeLayerBreakpoints[key] = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
               }
               if (decl.prop.startsWith("--container-")) {
                 const key = decl.prop.replace("--container-", "@");
-                config.themeLayerContainerBreakpoints[key] = decl.value;
+                config.themeLayerContainerBreakpoints[key] = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
+              }
+              if (decl.prop === "--breakpoint-clamp-min") {
+                defaultClampRange.min = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
+              }
+              if (decl.prop === "--breakpoint-clamp-max") {
+                defaultClampRange.max = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
               }
               if (decl.prop === "--spacing") {
                 spacingSize = decl.value;
               }
               if (decl.prop.startsWith("--")) {
-                const value = parseFloat(convertToRem(decl.value, rootFontSize, spacingSize, customProperties));
+                const value = convertToRem(
+                  decl.value,
+                  rootFontSize,
+                  spacingSize,
+                  customProperties
+                );
                 if (value) customProperties[decl.prop] = value;
               }
             });
@@ -239,30 +279,38 @@ var clampwind = (opts = {}) => {
         screens = Object.assign(
           {},
           screens,
-          config.defaultLayerBreakpoints,
           config.rootElementBreakpoints,
           config.themeLayerBreakpoints
         );
-        screens = convertSortScreens(screens, rootFontSize);
+        screens = sortScreens(screens);
         containerScreens = Object.assign(
           {},
           containerScreens,
-          config.defaultLayerContainerBreakpoints,
           config.rootElementContainerBreakpoints,
           config.themeLayerContainerBreakpoints
         );
-        containerScreens = convertSortScreens(containerScreens, rootFontSize);
+        containerScreens = sortScreens(containerScreens);
         config.configReady = true;
       };
       const processClampDeclaration = (decl, minScreen, maxScreen, isContainer = false) => {
         const args = extractTwoValidClampArgs(decl.value);
-        const [lower, upper] = args.map((val) => convertToRem(val, rootFontSize, spacingSize, customProperties));
+        const [lower, upper] = args.map(
+          (val) => convertToRem(val, rootFontSize, spacingSize, customProperties)
+        );
         if (!args || !lower || !upper) {
           console.warn("Invalid clamp() values", { node: decl });
           decl.value = ` ${decl.value} /* Invalid clamp() values */`;
           return true;
         }
-        const clamp = generateClamp(lower, upper, minScreen, maxScreen, rootFontSize, spacingSize, isContainer);
+        const clamp = generateClamp(
+          lower,
+          upper,
+          minScreen,
+          maxScreen,
+          rootFontSize,
+          spacingSize,
+          isContainer
+        );
         decl.value = clamp;
         return true;
       };
@@ -272,8 +320,6 @@ var clampwind = (opts = {}) => {
           collectConfig(root);
           finalizeConfig();
           root.walkAtRules("media", (atRule) => {
-            const isNested = atRule.parent?.type === "atrule";
-            const isSameAtRule = atRule.parent?.name === atRule.name;
             const clampDecls = [];
             atRule.walkDecls((decl) => {
               if (extractTwoValidClampArgs(decl.value)) {
@@ -281,53 +327,56 @@ var clampwind = (opts = {}) => {
               }
             });
             if (!clampDecls.length) return;
-            if (isNested && isSameAtRule) {
-              const parentParams = atRule.parent.params;
-              const currentParams = atRule.params;
-              let minScreen = null;
-              let maxScreen = null;
-              if (parentParams.includes(">")) {
-                const match = parentParams.match(/>=?\s*([^)]+)/);
-                if (match) minScreen = match[1].trim();
-              }
-              if (currentParams.includes(">") && !minScreen) {
-                const match = currentParams.match(/>=?\s*([^)]+)/);
-                if (match) minScreen = match[1].trim();
-              }
-              if (parentParams.includes("<")) {
-                const match = parentParams.match(/<\s*([^)]+)/);
-                if (match) maxScreen = match[1].trim();
-              }
-              if (currentParams.includes("<") && !maxScreen) {
-                const match = currentParams.match(/<\s*([^)]+)/);
-                if (match) maxScreen = match[1].trim();
+            clampDecls.forEach((decl) => {
+              const isNested = decl.parent?.type === "atrule" && decl.parent?.parent.type === "atrule";
+              const isSameAtRule = decl.parent?.name === decl.parent?.parent.name;
+              if (isNested && isSameAtRule) {
+                const currentParams2 = decl.parent.params;
+                const parentParams = decl.parent.parent.params;
+                let minScreen = null;
+                let maxScreen = null;
+                if (parentParams.includes(">")) {
+                  const match = parentParams.match(/>=?\s*([^)]+)/);
+                  if (match) minScreen = match[1].trim();
+                }
+                if (currentParams2.includes(">") && !minScreen) {
+                  const match = currentParams2.match(/>=?\s*([^)]+)/);
+                  if (match) minScreen = match[1].trim();
+                }
+                if (parentParams.includes("<")) {
+                  const match = parentParams.match(/<\s*([^)]+)/);
+                  if (match) maxScreen = match[1].trim();
+                }
+                if (currentParams2.includes("<") && !maxScreen) {
+                  const match = currentParams2.match(/<\s*([^)]+)/);
+                  if (match) maxScreen = match[1].trim();
+                }
+                if (minScreen && maxScreen) {
+                  clampDecls.forEach((decl2) => {
+                    processClampDeclaration(decl2, minScreen, maxScreen, false);
+                  });
+                }
+                return;
               }
-              if (minScreen && maxScreen) {
-                clampDecls.forEach((decl) => {
-                  processClampDeclaration(decl, minScreen, maxScreen, false);
+              if (isNested && !isSameAtRule) {
+                clampDecls.forEach((decl2) => {
+                  decl2.value = ` ${decl2.value} /* Invalid nested @media rules */`;
                 });
+                return;
               }
-              return;
-            }
-            if (isNested && !isSameAtRule) {
-              clampDecls.forEach((decl) => {
-                decl.value = ` ${decl.value} /* Invalid nested @media rules */`;
-              });
-              return;
-            }
-            const screenValues = Object.values(screens);
-            clampDecls.forEach((decl) => {
-              if (atRule.params.includes(">")) {
-                const match = atRule.params.match(/>=?\s*([^)]+)/);
+              const screenValues = Object.values(screens);
+              const currentParams = decl.parent.params;
+              if (currentParams.includes(">")) {
+                const match = currentParams.match(/>=?\s*([^)]+)/);
                 if (match) {
                   const minScreen = match[1].trim();
-                  const maxScreen = screenValues[screenValues.length - 1];
+                  const maxScreen = defaultClampRange.max || screenValues[screenValues.length - 1];
                   processClampDeclaration(decl, minScreen, maxScreen, false);
                 }
-              } else if (atRule.params.includes("<")) {
-                const match = atRule.params.match(/<\s*([^)]+)/);
+              } else if (currentParams.includes("<")) {
+                const match = currentParams.match(/<\s*([^)]+)/);
                 if (match) {
-                  const minScreen = screenValues[0];
+                  const minScreen = defaultClampRange.min || screenValues[0];
                   const maxScreen = match[1].trim();
                   processClampDeclaration(decl, minScreen, maxScreen, false);
                 }
@@ -335,8 +384,6 @@ var clampwind = (opts = {}) => {
             });
           });
           root.walkAtRules("container", (atRule) => {
-            const isNested = atRule.parent?.type === "atrule";
-            const isSameAtRule = atRule.parent?.name === atRule.name;
             const clampDecls = [];
             atRule.walkDecls((decl) => {
               if (extractTwoValidClampArgs(decl.value)) {
@@ -344,55 +391,73 @@ var clampwind = (opts = {}) => {
               }
             });
             if (!clampDecls.length) return;
-            if (isNested && isSameAtRule) {
-              const parentParams = atRule.parent.params;
-              const currentParams = atRule.params;
-              let minContainer = null;
-              let maxContainer = null;
-              if (parentParams.includes(">")) {
-                const match = parentParams.match(/>=?\s*([^)]+)/);
-                if (match) minContainer = match[1].trim();
-              }
-              if (currentParams.includes(">") && !minContainer) {
-                const match = currentParams.match(/>=?\s*([^)]+)/);
-                if (match) minContainer = match[1].trim();
-              }
-              if (parentParams.includes("<")) {
-                const match = parentParams.match(/<\s*([^)]+)/);
-                if (match) maxContainer = match[1].trim();
-              }
-              if (currentParams.includes("<") && !maxContainer) {
-                const match = currentParams.match(/<\s*([^)]+)/);
-                if (match) maxContainer = match[1].trim();
+            clampDecls.forEach((decl) => {
+              const isNested = decl.parent?.type === "atrule" && decl.parent?.parent.type === "atrule";
+              const isSameAtRule = decl.parent?.name === decl.parent?.parent.name;
+              if (isNested && isSameAtRule) {
+                const currentParams2 = decl.parent.params;
+                const parentParams = decl.parent.parent.params;
+                let minContainer = null;
+                let maxContainer = null;
+                if (parentParams.includes(">")) {
+                  const match = parentParams.match(/>=?\s*([^)]+)/);
+                  if (match) minContainer = match[1].trim();
+                }
+                if (currentParams2.includes(">") && !minContainer) {
+                  const match = currentParams2.match(/>=?\s*([^)]+)/);
+                  if (match) minContainer = match[1].trim();
+                }
+                if (parentParams.includes("<")) {
+                  const match = parentParams.match(/<\s*([^)]+)/);
+                  if (match) maxContainer = match[1].trim();
+                }
+                if (currentParams2.includes("<") && !maxContainer) {
+                  const match = currentParams2.match(/<\s*([^)]+)/);
+                  if (match) maxContainer = match[1].trim();
+                }
+                if (minContainer && maxContainer) {
+                  clampDecls.forEach((decl2) => {
+                    processClampDeclaration(
+                      decl2,
+                      minContainer,
+                      maxContainer,
+                      true
+                    );
+                  });
+                }
+                return;
               }
-              if (minContainer && maxContainer) {
-                clampDecls.forEach((decl) => {
-                  processClampDeclaration(decl, minContainer, maxContainer, true);
+              if (isNested && !isSameAtRule) {
+                clampDecls.forEach((decl2) => {
+                  decl2.value = ` ${decl2.value} /* Invalid nested @container rules */`;
                 });
+                return;
               }
-              return;
-            }
-            if (isNested && !isSameAtRule) {
-              clampDecls.forEach((decl) => {
-                decl.value = ` ${decl.value} /* Invalid nested @container rules */`;
-              });
-              return;
-            }
-            const screenValues = Object.values(containerScreens);
-            clampDecls.forEach((decl) => {
-              if (atRule.params.includes(">")) {
-                const match = atRule.params.match(/>=?\s*([^)]+)/);
+              const containerValues = Object.values(containerScreens);
+              const currentParams = decl.parent.params;
+              if (currentParams.includes(">")) {
+                const match = currentParams.match(/>=?\s*([^)]+)/);
                 if (match) {
                   const minContainer = match[1].trim();
-                  const maxContainer = screenValues[screenValues.length - 1];
-                  processClampDeclaration(decl, minContainer, maxContainer, true);
+                  const maxContainer = containerValues[containerValues.length - 1];
+                  processClampDeclaration(
+                    decl,
+                    minContainer,
+                    maxContainer,
+                    true
+                  );
                 }
-              } else if (atRule.params.includes("<")) {
-                const match = atRule.params.match(/<\s*([^)]+)/);
+              } else if (currentParams.includes("<")) {
+                const match = currentParams.match(/<\s*([^)]+)/);
                 if (match) {
-                  const minContainer = screenValues[0];
+                  const minContainer = containerValues[0];
                   const maxContainer = match[1].trim();
-                  processClampDeclaration(decl, minContainer, maxContainer, true);
+                  processClampDeclaration(
+                    decl,
+                    minContainer,
+                    maxContainer,
+                    true
+                  );
                 }
               }
             });
@@ -413,8 +478,8 @@ var clampwind = (opts = {}) => {
             });
             if (clampDecls.length === 0) return;
             const screenValues = Object.values(screens);
-            const minScreen = screenValues[0];
-            const maxScreen = screenValues[screenValues.length - 1];
+            const minScreen = defaultClampRange.min || screenValues[0];
+            const maxScreen = defaultClampRange.max || screenValues[screenValues.length - 1];
             clampDecls.forEach((decl) => {
               processClampDeclaration(decl, minScreen, maxScreen, false);
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-clampwind",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A PostCSS plugin to create fluid clamp values for any Tailwind CSS utility",
   "license": "Apache-2.0",
     "keywords": [
@@ -34,9 +34,6 @@
   "devDependencies": {
     "esbuild": "^0.25.6"
   },
-  "peerDependencies": {
-    "postcss": "^8.4.39"
-  },
   "scripts": {
     "dev": "node scripts/build.js --watch",
     "build": "node scripts/build.js"