tailwind-clamp 2.0.2 → 2.2.0

package/README.md

@@ -10,7 +10,8 @@ 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
 
@@ -24,12 +25,14 @@ Add the plugin in your Tailwind CSS configuration file:
 
 ```js
 // tailwind.config.js
-module.exports = {
+import tailwindClamp from 'tailwind-clamp';
+
+export default {
   theme: {
     // ...
   },
   plugins: [
-    require('tailwind-clamp'),
+    tailwindClamp,
     // ...
   ],
 };
@@ -39,19 +42,23 @@ module.exports = {
 
 The plugin allows two configuration options:
 
-| Name               | Description                          | Default value |
-| ------------------ | ------------------------------------ | ------------- |
-| `minViewportWidth` | Viewport size where the clamp starts | `375`         |
-| `maxViewportWidth` | Viewport size where the clamp end    | `1440`        |
+| Name                   | Type               | Description                           | Default value |
+| ---------------------- | ------------------ | ------------------------------------- | ------------- |
+| **`minViewportWidth`** | `{number\|string}` | Viewport size where the clamp starts. | `375`         |
+| **`maxViewportWidth`** | `{number\|string}` | Viewport size where the clamp end.    | `1440`        |
+
+Value should be a css value (`px`, `rem`, `em`) or a number (unit will be `px`). The unit for both options need to match.
 
 ```js
 // tailwind.config.js
-module.exports = {
+import tailwindClamp from 'tailwind-clamp';
+
+export default {
   theme: {
     // ...
   },
   plugins: [
-    require('tailwind-clamp')({
+    tailwindClamp({
       minViewportWidth: 375,
       maxViewportWidth: 1440,
     }),
@@ -73,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
@@ -84,7 +91,45 @@ clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
 </div>
 ```
 
-##### Supported properties
+## Clamped values in config
+
+The plugin includes a utility function to create clamped values directly in your config file.
+
+```js
+// tailwind.config.js
+import tailwindClamp, { clampValue } from 'tailwind-clamp';
+
+export default {
+  theme: {
+    // ...
+    padding: {
+      'my-claped-value': clampValue(20, 40),
+      'my-other-claped-value': clampValue(30, 60, {
+        unit: 'px',
+        maxViewportWidth: 1960,
+      }),
+    },
+  },
+  plugins: [
+    tailwindClamp,
+    // ...
+  ],
+};
+```
+
+### Arguments
+
+| Name                             | Type                  | Description                                | Default value |
+| -------------------------------- | --------------------- | ------------------------------------------ | ------------- |
+| **`start`**                      | `{number}`            | Value at `minViewportWidth` viewport size. |               |
+| **`end`**                        | `{number}`            | Value at `maxViewportWidth` viewport size. |               |
+| **`[options.minViewportWidth]`** | `{number}`            | Viewport size, where the clamp starts.     | `375`         |
+| **`[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]`.
+
+## Supported properties
 
 - `p` including `pt`, `pb`, `pl`, `pr`, `px`, `py`.
 - `m` including `mt`, `mb`, `ml`, `mr`, `mx`, `my`.

package/package.json

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

package/src/clamp.js

@@ -55,3 +55,30 @@ export const clamp = (
 
   return negative ? `calc(${value} * -1)` : value;
 };
+
+const defaultOptions = {
+  unit: 'rem',
+  minViewportWidth: 375,
+  maxViewportWidth: 1440,
+};
+
+export const clampValue = (
+  start,
+  end,
+  options = {
+    unit: 'rem',
+    minViewportWidth: 375,
+    maxViewportWidth: 1440,
+  }
+) => {
+  const o = { ...defaultOptions, ...options };
+
+  const convert = (val) => (o.unit === 'rem' ? val / 16 : val);
+
+  return clamp(
+    { number: convert(start), unit: o.unit },
+    { number: convert(end), unit: o.unit },
+    { number: convert(o.minViewportWidth), unit: o.unit },
+    { number: convert(o.maxViewportWidth), unit: o.unit }
+  );
+};

package/src/index.js

@@ -2,13 +2,15 @@ import plugin from 'tailwindcss/plugin';
 import { resolveProperty } from './resolve-property.js';
 import { log } from './log.js';
 import { parseValue, parseFontSizeValue, checkValues } from './parse-value.js';
-import { clamp } from './clamp.js';
+import { clamp, clampValue } from './clamp.js';
 
 const defaultOptions = {
   minViewportWidth: 375,
   maxViewportWidth: 1440,
 };
 
+export const clampValue = clampValue;
+
 export default plugin.withOptions(function (options = defaultOptions) {
   return function ({ matchUtilities, theme, config }) {
     matchUtilities(
@@ -70,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}]".`
     );