tailwind-clamp 2.1.0 → 2.2.1

package/README.md

@@ -10,7 +10,7 @@ The plugin is based on the formula presented in this [article](https://chriskirk
 - Possibility to use small to large, large to small, negative to positive, positive to negative and negative to negative values. (Negative values only work on properties that allow them, e.g. `margin`)
 - Supports `px`, `rem` and `em` units.
 - Support `text` values with multiple properties (`fontSize`, `lineHeight`, `letterSpacing`).
-- Support using defined in the Tailwind CSS configuration file, arbitrary values or a combination.
+- Supports using values defined in the Tailwind CSS configuration file, arbitrary values or a combination.
 - Helper function to create clamped values directly in your config file.
 
 ## Installation
@@ -80,7 +80,7 @@ clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
 - `property`: Property that the value should be applied to. See a list of all supported properties below.
 - `start`: Value at `minViewportWidth` viewport size. It can be a key from your Tailwind CSS config file, a css value (`px`, `rem`, `em`) or a number (unit will be `px`), the unit will need to match `end`.
 - `end`: Value at `maxViewportWidth` viewport size. It can be a key from your Tailwind CSS config file, a css value (`px`, `rem`, `em`) or a number (unit will be `px`), the unit will need to match `start`.
-- `[minViewportWidth=375]`: Viewport size, where the clamp starts, defaults to `375`. Can be a key from `screens` a css value (`px`, `rem`, `em`) or a number (unit will be `px`), the unit will need to match `maxViewportWidth`. Value needs be smaller than `maxViewportWidth`.
+- `[minViewportWidth=375]`: Viewport size, where the clamp starts, defaults to `375`. Can be a key from `screens` a css value (`px`, `rem`, `em`) or a number (unit will be `px`), the unit will need to match `maxViewportWidth`. Value needs to be smaller than `maxViewportWidth`.
 - `[maxViewportWidth=1440]`: Viewport size, where the clamp stops, defaults to `1440`. Can be a key from `screens` a css value (`px`, `rem`, `em`) or a number (unit will be `px`), the unit will need to match `minViewportWidth`. Value needs to be larger than `minViewportWidth`.
 
 ### Examples
@@ -127,7 +127,7 @@ export default {
 | **`[options.maxViewportWidth]`** | `{number}`            | Viewport size, where the clamp stops.      | `1440`        |
 | **`[options.unit]`**             | `{'px'\|'rem'\|'em'}` | Unit that should be used in the css value. | `rem`         |
 
-Al values are expected in pixels and will be converted to `[options.unit]`.
+All values are expected in pixels and will be converted to `[options.unit]`.
 
 ## Supported properties
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-clamp",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Tailwind CSS plugin to use CSS clamp in your projects",
   "main": "src/index.js",
   "type": "module",

package/src/clamp.js

@@ -6,7 +6,7 @@ export const clamp = (
   _minvw = { number: 375, unit: 'px' },
   _maxvw = { number: 1440, unit: 'px' }
 ) => {
-  const unit = _start.unit;
+  const unit = _start.unit === 'zero' ? _end.unit : _start.unit;
   const isPx = unit === 'px';
 
   let start = _start.number;

package/src/index.js

@@ -72,8 +72,17 @@ export default plugin.withOptions(function (options = defaultOptions) {
           }
 
           // handle other properties
-          const start = parseValue(config().theme[key][args[1]] || args[1]);
-          const end = parseValue(config().theme[key][args[2]] || args[2]);
+          const startNegative = args[1].startsWith('-');
+          const endNegative = args[2].startsWith('-');
+
+          const startVal = startNegative ? args[1].slice(1) : args[1];
+          const endVal = endNegative ? args[2].slice(1) : args[2];
+
+          const start = parseValue(config().theme[key][startVal] || startVal);
+          const end = parseValue(config().theme[key][endVal] || endVal);
+
+          if (startNegative) start.number = start.number * -1;
+          if (endNegative) end.number = end.number * -1;
 
           if (!checkValues(start, end, value)) {
             return null;

package/src/parse-value.js

@@ -5,7 +5,7 @@ export const parseValue = (v) => {
   const number = parseFloat(value);
   let unit = 'unsupported';
 
-  if (/^\d+$/.test(value)) {
+  if (/^\d+$/.test(value) && number !== 0) {
     unit = 'px';
   }
 
@@ -14,6 +14,10 @@ export const parseValue = (v) => {
     unit = match[0];
   }
 
+  if (number === 0) {
+    unit = 'zero';
+  }
+
   return { number, unit };
 };
 
@@ -47,7 +51,7 @@ export const checkValues = (start, end, value, prop = null) => {
     return null;
   }
 
-  if (start.unit !== end.unit) {
+  if (start.unit !== end.unit && start.unit !== 'zero' && end.unit !== 'zero') {
     log.error(
       `Units need to match${prop ? ` (${prop})` : ''}: "clamp-[${value}]".`
     );