postcss-clampwind 0.0.3 → 0.0.5

package/README.md

@@ -28,6 +28,21 @@ Install the plugin from npm:
 ```sh
 npm install -D postcss-clampwind
 ```
+### Vite project setup
+
+If you are using Vite, you are probably using Tailwind with `@tailwindcss/vite`. You need to import the plugin and use it in your `postcss.config.js` file.
+
+```js
+// postcss.config.js
+import clampwind from "postcss-clampwind";
+
+export default { 
+  plugins: [ 
+    clampwind()
+  ] 
+}; 
+```
+**Demo on StackBlitz:** [postcss-clampwind-vite](https://stackblitz.com/edit/postcss-clampwind-vite?file=postcss.config.js)
 
 ### PostCSS setup
 
@@ -46,6 +61,8 @@ export default {
 }
 ```
 
+**Demo on StackBlitz:** [postcss-clampwind-postcss](https://stackblitz.com/edit/postcss-clampwind-postcss?file=postcss.config.mjs)
+
 #### CommonJS usage
 
 If you are using CommonJS-based build tools like Webpack, you will need to use the `require` syntax and add `.default` to the import.
@@ -60,21 +77,6 @@ module.exports = {
 };
 ```
 
-### Vite project setup
-
-If you are using Vite, you are probably using Tailwind with `@tailwindcss/vite`. You need to import the plugin and use it in your `postcss.config.js` file.
-
-```js
-// postcss.config.js
-import clampwind from "postcss-clampwind";
-
-export default { 
-  plugins: [ 
-    clampwind()
-  ] 
-}; 
-```
-
 ## Features
 
 ### Interchangeable px / rem units
@@ -305,6 +307,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:
@@ -342,4 +371,4 @@ or like this:
 
 This project is licensed under the [Apache-2.0 license](https://apache.org/licenses/LICENSE-2.0).
 
-Copyright © 2025 Daniele De Pietri.
+Copyright © 2025 Daniele De Pietri.

package/dist/clampwind.cjs.cjs

@@ -64,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;
@@ -112,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;
@@ -154,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 = {}) => {
@@ -169,9 +165,8 @@ var clampwind = (opts = {}) => {
       let customProperties = {};
       let screens = defaultScreens || {};
       let containerScreens = defaultContainerScreens || {};
+      let defaultClampRange = {};
       const config = {
-        defaultLayerBreakpoints: {},
-        defaultLayerContainerBreakpoints: {},
         themeLayerBreakpoints: {},
         themeLayerContainerBreakpoints: {},
         rootElementBreakpoints: {},
@@ -195,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;
             }
           }
@@ -220,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;
               }
             });
@@ -261,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;
       };
@@ -294,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)) {
@@ -303,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);
                 }
@@ -357,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)) {
@@ -366,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
+                  );
                 }
               }
             });
@@ -435,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

@@ -39,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;
@@ -87,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;
@@ -129,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 = {}) => {
@@ -144,9 +140,8 @@ var clampwind = (opts = {}) => {
       let customProperties = {};
       let screens = defaultScreens || {};
       let containerScreens = defaultContainerScreens || {};
+      let defaultClampRange = {};
       const config = {
-        defaultLayerBreakpoints: {},
-        defaultLayerContainerBreakpoints: {},
         themeLayerBreakpoints: {},
         themeLayerContainerBreakpoints: {},
         rootElementBreakpoints: {},
@@ -170,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;
             }
           }
@@ -195,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;
               }
             });
@@ -236,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;
       };
@@ -269,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)) {
@@ -278,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);
                 }
@@ -332,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)) {
@@ -341,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
+                  );
                 }
               }
             });
@@ -410,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.3",
+  "version": "0.0.5",
   "description": "A PostCSS plugin to create fluid clamp values for any Tailwind CSS utility",
   "license": "Apache-2.0",
     "keywords": [