tailwind-clamp 1.0.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # Tailwind clamp
 
-Tailwind CSS utilities & plugin to use CSS `clamp` in your project. Enabling fluid interfaces using Tailwind syntax.
+Tailwind CSS plugin to use CSS `clamp` in your project. Enabling fluid interfaces using Tailwind syntax.
 
 The plugin is based on the formula presented in this [article](https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/)
 
@@ -8,9 +8,9 @@ The plugin is based on the formula presented in this [article](https://chriskirk
 
 - Clamp values between a min and max viewport width, making it grow / shrink with the viewport.
 - 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`)
-- Helper functions to simplify the definition of clamped values in your config.
-- Tailwind plugin to allow the usage of arbitrary values using the `clamp-[...]` syntax.
-- Values are interpreted as pixels and output as `rem`
+- 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.
 
 ## Installation
 
@@ -20,107 +20,63 @@ Install the plugin from npm:
 npm install nicolas-cusan/tailwind-clamp
 ```
 
-## Usage
-
-### Predefine values in your config
-
-The package provides two helper functions to help you define "clamped" values in your config:
-
-#### `clamp(start, end, [minViewportWidth=375, maxViewportWidth=1440])`
-
-##### Arguments
-
-- `start` `{number}`: Value at `minViewportWidth` viewport size. The value is interpreted as pixels and outputted as `rem` in the generated CSS.
-- `end` `{number}`: Value at `maxViewportWidth` viewport size. The value is interpreted as pixels and outputted as `rem` in the generated CSS.
-- `[minViewportWidth=375]` `{number}`: Viewport size, where the clamp starts, defaults to `375`. The value is interpreted as pixels. Value should be smaller than `maxViewportWidth`.
-- `[maxViewportWidth=1440]` `{number}`: Viewport size, where the clamp stops, defaults to `1440` The value is interpreted as pixels. Value should be smaller than `minViewportWidth`.
-
-#### `clampFs(start, end, [tracking=null, minViewportWidth=375, maxViewportWidth=1440])`
-
-##### Arguments
-
-- `start` `{[fontSize: number, lineHeight: number]}`: Array of two numbers: `font-size` and `line-height` respectively at `minViewportWidth` viewport size. Both values are interpreted as pixels and outputted as `rem` in the generated CSS.
-- `end` `{[fontSize: number, lineHeight: number]}`: Array of two numbers: `font-size` and `line-height` respectively at `maxViewportWidth` viewport size. Both values are interpreted as pixels and outputted as `rem` in the generated CSS.
-- `[tracking=null]` `{string|null}`: `letter-spacing` setting, it is recommended to use the `em` unit as it proportional to the font size, e.g. `-0.01em`
-- `[minViewportWidth=375]` `{number}`: Viewport size, where the clamp starts, defaults to `375`. The value is interpreted as pixels. Value should be smaller than `maxViewportWidth`.
-- `[maxViewportWidth=1440]` `{number}`: Viewport size, where the clamp stops, defaults to `1440` The value is interpreted as pixels. Value should be smaller than `minViewportWidth`.
+Add the plugin in your Tailwind CSS configuration file:
 
 ```js
 // tailwind.config.js
-const { setupClamp } = require('../src/utils.js');
-
-const clampOptions = {
-  minViewportWidth: 375,
-  maxViewportWidth: 1440,
-};
-
-// Setup the clamp helper functions with the default min and max viewport sizes you want to use
-const { clamp, clampFs } = setupClamp(options);
-
 module.exports = {
   theme: {
     // ...
-    extend: {
-      spacing: {
-        // Use
-        grid: clamp(10, 20),
-      },
-
-      fontSize: {
-        base: clampFs([16, 20], [24, 28], '-0.01em'),
-      },
-    },
   },
-  // ...
+  plugins: [
+    require('tailwind-clamp'),
+    // ...
+  ],
 };
 ```
 
-### Use the plugin with `clamp-[...]`
+### Configuration
 
-The package also provides a plugin to use arbitrary values via the `clamp-[...]` syntax.
+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`        |
 
 ```js
 // tailwind.config.js
-const clampOptions = {
-  minViewportWidth: 375,
-  maxViewportWidth: 1440,
-};
-
 module.exports = {
   theme: {
     // ...
   },
   plugins: [
-    require('tailwind-clamp')(clampOptions),
+    require('tailwind-clamp')({
+      minViewportWidth: 375,
+      maxViewportWidth: 1440,
+    }),
     // ...
   ],
 };
 ```
 
-#### Configuration
-
-This 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`        |
-
-#### Using the plugin
+## Usage
 
-The arbitrary values syntax for clamp requires at least three arguments separated by commas without whitespace:
+The plugin relies on the arbitrary values syntax `clamp-[...]`. You need to pass at least three arguments separated by commas without whitespace, optionally you can also pass the `minViewportWidth` and the `maxViewportWidth`:
 
-#### `clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]`
+```
+clamp-[<property>,<start>,<end>,[minViewportWidth,maxViewportWidth]]
+```
 
-##### Arguments
+### Arguments
 
-- `property` `{string}`: Property that the value should be applied to. See a list of all supported properties below.
-- `start` `{number}`: Value at `minViewportWidth` viewport size. The value is interpreted as pixels and output as `rem` in the generated CSS.
-- `end` `{number}`: Value at `maxViewportWidth` viewport size. The value is interpreted as pixels and output as `rem` in the generated CSS.
-- `[minViewportWidth=375]` `{number}`: Viewport size, where the clamp starts, defaults to `375`. The value is interpreted as pixels. Value should be smaller than `maxViewportWidth`.
-- `[maxViewportWidth=1440]` `{number}`: Viewport size, where the clamp stops, defaults to `1440` The value is interpreted as pixels. Value should be smaller than `minViewportWidth`.
+- `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`.
+- `[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`.
 
-##### Example
+### Examples
 
 ```html
 <div class="clamp-[px,20,40] clamp-[py,10,18]">
@@ -137,7 +93,7 @@ The arbitrary values syntax for clamp requires at least three arguments separate
 - `left`
 - `right`
 - `bottom`
-- `text` applied to `font-size`.
+- `text` including `font-size`, `line-height` and `letter-spacing` if defined.
 - `gap` including `gap-x`, `gap-y`.
 - `w`
 - `h`
@@ -157,6 +113,5 @@ The arbitrary values syntax for clamp requires at least three arguments separate
 
 ## Roadmap
 
-- Support other units e.g `%`
 - Support directional properties e.g. `ps`
 - Add showcase

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "tailwind-clamp",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Tailwind CSS plugin to use CSS clamp in your projects",
   "main": "src/index.js",
+  "type": "module",
   "scripts": {
     "dev": "next dev demo",
     "build": "next build demo",
@@ -25,13 +26,14 @@
   },
   "homepage": "https://github.com/nicolas-cusan/tailwind-clamp#readme",
   "dependencies": {
+    "chalk": "^5.3.0",
+    "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "autoprefixer": "^10.0.1",
+    "autoprefixer": "^10.4.19",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.4.4"
   }
 }

package/src/clamp.js

@@ -0,0 +1,57 @@
+// https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/
+
+export const clamp = (
+  _start,
+  _end,
+  _minvw = { number: 375, unit: 'px' },
+  _maxvw = { number: 1440, unit: 'px' }
+) => {
+  const unit = _start.unit;
+  const isPx = unit === 'px';
+
+  let start = _start.number;
+  let end = _end.number;
+  let negative = false;
+
+  let minvw = _minvw.number;
+  let maxvw = _maxvw.number;
+
+  if (_minvw.unit !== 'px' && isPx) {
+    minvw = _minvw.number * 16;
+  }
+
+  if (_minvw.unit === 'px' && !isPx) {
+    minvw = _minvw.number / 16;
+  }
+
+  if (_maxvw.unit !== 'px' && isPx) {
+    maxvw = _maxvw.number * 16;
+  }
+
+  if (_maxvw.unit === 'px' && !isPx) {
+    maxvw = _maxvw.number / 16;
+  }
+
+  if (end < start && start < 0 && end < 0) {
+    start = Math.abs(start);
+    end = Math.abs(end);
+    negative = true;
+  } else if (end < start && start > 0 && end > 0) {
+    start = start * -1;
+    end = end * -1;
+    negative = true;
+  } else if (end < start) {
+    start = Math.abs(start) * -1;
+    end = Math.abs(end);
+    negative = true;
+  }
+
+  const slope = (end - start) / (maxvw - minvw);
+  const calc = `${(start - minvw * slope).toFixed(6)}${unit} + ${(
+    100 * slope
+  ).toFixed(6)}vw`;
+
+  const value = `clamp(${start}${unit}, ${calc}, ${end}${unit})`;
+
+  return negative ? `calc(${value} * -1)` : value;
+};

package/src/index.js

@@ -1,288 +1,92 @@
-const plugin = require('tailwindcss/plugin');
-const { clamp } = require('./utils.js');
+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';
 
-let cssTransformValue = [
-  'translate(var(--tw-translate-x), var(--tw-translate-y))',
-  'rotate(var(--tw-rotate))',
-  'skewX(var(--tw-skew-x))',
-  'skewY(var(--tw-skew-y))',
-  'scaleX(var(--tw-scale-x))',
-  'scaleY(var(--tw-scale-y))',
-].join(' ');
-
-function resolveProperty(property, value) {
-  switch (property) {
-    case 'p':
-      return {
-        padding: value,
-      };
-    case 'pt':
-      return {
-        paddingTop: value,
-      };
-    case 'pb':
-      return {
-        paddingBottom: value,
-      };
-    case 'pl':
-      return {
-        paddingLeft: value,
-      };
-    case 'pr':
-      return {
-        paddingRight: value,
-      };
-    case 'px':
-      return {
-        paddingLeft: value,
-        paddingRight: value,
-      };
-    case 'py':
-      return {
-        paddingTop: value,
-        paddingBottom: value,
-      };
-    case 'm':
-      return {
-        margin: value,
-      };
-    case 'mt':
-      return {
-        marginTop: value,
-      };
-    case 'mb':
-      return {
-        marginBottom: value,
-      };
-    case 'ml':
-      return {
-        marginLeft: value,
-      };
-    case 'mr':
-      return {
-        marginRight: value,
-      };
-    case 'mx':
-      return {
-        marginLeft: value,
-        marginRight: value,
-      };
-    case 'my':
-      return {
-        marginTop: value,
-        marginBottom: value,
-      };
-    case 'inset':
-      return {
-        top: value,
-        left: value,
-        right: value,
-        bottom: value,
-      };
-    case 'top':
-      return {
-        top: value,
-      };
-    case 'left':
-      return {
-        left: value,
-      };
-    case 'right':
-      return {
-        right: value,
-      };
-    case 'bottom':
-      return {
-        bottom: value,
-      };
-    case 'text':
-      return {
-        fontSize: value,
-      };
-    case 'gap':
-      return {
-        gap: value,
-      };
-    case 'gap-x':
-      return {
-        columnGap: value,
-      };
-    case 'gap-y':
-      return {
-        rowGap: value,
-      };
-    case 'w':
-      return {
-        width: value,
-      };
-    case 'h':
-      return {
-        height: value,
-      };
-    case 'size':
-      return {
-        width: value,
-        height: value,
-      };
-    case 'min-w':
-      return {
-        minWidth: value,
-      };
-    case 'min-h':
-      return {
-        minHeight: value,
-      };
-    case 'max-w':
-      return {
-        maxWidth: value,
-      };
-    case 'max-h':
-      return {
-        maxHeight: value,
-      };
-    case 'rounded':
-      return {
-        borderRadius: value,
-      };
-    case 'rounded-t':
-      return {
-        borderTopLeftRadius: value,
-        borderTopRightRadius: value,
-      };
-    case 'rounded-r':
-      return {
-        borderTopRightRadius: value,
-        borderBottomRightRadius: value,
-      };
-    case 'rounded-b':
-      return {
-        borderBottomLeftRadius: value,
-        borderBottomRightRadius: value,
-      };
-    case 'rounded-l':
-      return {
-        borderTopLeftRadius: value,
-        borderBottomLeftRadius: value,
-      };
-    case 'rounded-tl':
-      return {
-        borderTopLeftRadius: value,
-      };
-    case 'rounded-tr':
-      return {
-        borderTopRightRadius: value,
-      };
-    case 'rounded-bl':
-      return {
-        borderBottomLeftRadius: value,
-      };
-    case 'rounded-br':
-      return {
-        borderBottomRightRadius: value,
-      };
-    case 'translate-x':
-      return {
-        '--tw-translate-x': value,
-        '@defaults transform': {},
-        transform: cssTransformValue,
-      };
-    case 'translate-y':
-      return {
-        '--tw-translate-y': value,
-        '@defaults transform': {},
-        transform: cssTransformValue,
-      };
-    case 'text-stroke':
-      return {
-        '-webkit-text-stroke': value,
-        textStroke: value,
-      };
-    case 'stroke':
-      return {
-        strokeWidth: value,
-      };
-    case 'leading':
-      return {
-        lineHeight: value,
-      };
-    case 'border':
-      return {
-        borderWidth: value,
-      };
-    case 'border-t':
-      return {
-        borderTopWidth: value,
-      };
-    case 'border-b':
-      return {
-        borderBottomWidth: value,
-      };
-    case 'border-l':
-      return {
-        borderLeftWidth: value,
-      };
-    case 'border-r':
-      return {
-        borderRightWidth: value,
-      };
-    case 'border-x':
-      return {
-        borderLeftWidth: value,
-        borderRightWidth: value,
-      };
-    case 'border-y':
-      return {
-        borderTopWidth: value,
-        borderBottomWidth: value,
-      };
-    case 'scroll-m':
-      return {
-        scrollMargin: value,
-      };
-    default:
-      return null;
-  }
-}
-
-module.exports = plugin.withOptions(function (
+export default plugin.withOptions(function (
   options = {
     minViewportWidth: 375,
     maxViewportWidth: 1440,
   }
 ) {
-  return function ({ matchUtilities, theme }) {
+  return function ({ matchUtilities, theme, config }) {
     matchUtilities(
       {
         clamp: (value) => {
-          const props = value.split(',');
-          props[1] = parseFloat(props[1]);
-          props[2] = parseFloat(props[2]);
+          const args = value.split(',');
+
+          const minvw = parseValue(
+            config().theme.screens[args[3]] ||
+              args[3] ||
+              `${options.minViewportWidth}`
+          );
 
-          if (props.length < 3) {
-            throw new Error('The clamp utility requires at least 3 arguments.');
+          const maxvw = parseValue(
+            config().theme.screens[args[4]] ||
+              args[4] ||
+              `${options.maxViewportWidth}`
+          );
+
+          if (args.length < 3) {
+            log.error(
+              `The clamp utility requires at least 3 arguments: "clamp-[${value}]".`
+            );
+            return null;
           }
 
-          if (typeof props[1] !== 'number' || typeof props[2] !== 'number') {
-            throw new Error(
-              'The clamp utility requires that the second and third arguments are numbers representing a pixel value.'
+          const resolvedProp = resolveProperty(args[0]);
+
+          if (!resolvedProp) {
+            log.error(
+              `Property "${args[0]}" is not supported: "clamp-[${value}]".`
             );
+            return null;
           }
 
-          const prop = resolveProperty(
-            props[0],
-            clamp(
-              props[1],
-              props[2],
-              props[3] || options.minViewportWidth,
-              props[4] || options.maxViewportWidth
-            )
-          );
+          const { key, props } = resolvedProp;
 
-          if (prop === null) {
-            throw new Error(`Property "${props[0]}" is not supported.`);
+          // handle fontSize separately
+          if (key === 'fontSize') {
+            const start = parseFontSizeValue(
+              config().theme[key][args[1]] || args[1]
+            );
+            const end = parseFontSizeValue(
+              config().theme[key][args[2]] || args[2]
+            );
+
+            const css = {};
+
+            Object.keys(start).forEach((k) => {
+              if (k in end && checkValues(start[k], end[k], value, k)) {
+                const val = clamp(start[k], end[k], minvw, maxvw);
+                css[k] = val;
+              }
+            });
+
+            return Object.keys(css).length > 0 ? css : null;
           }
 
-          return prop;
+          // handle other properties
+          const start = parseValue(config().theme[key][args[1]] || args[1]);
+          const end = parseValue(config().theme[key][args[2]] || args[2]);
+
+          if (!checkValues(start, end, value)) {
+            return null;
+          }
+
+          const val = clamp(start, end, minvw, maxvw);
+
+          const css = props.reduce((acc, prop) => {
+            if (typeof prop === 'string') {
+              acc[prop] = val;
+            } else {
+              acc = { ...acc, ...prop };
+            }
+            return acc;
+          }, {});
+
+          return css;
         },
       },
       { values: theme('clamp') }

package/src/log.js

@@ -0,0 +1,16 @@
+import chalk from 'chalk';
+
+export const log = {
+  error() {
+    console.log(chalk.red(...arguments));
+  },
+  warn() {
+    console.log(chalk.yellow(...arguments));
+  },
+  info() {
+    console.log(chalk.blue(...arguments));
+  },
+  log() {
+    console.log(chalk.gray(...arguments));
+  },
+};

package/src/parse-value.js

@@ -0,0 +1,66 @@
+import { log } from './log.js';
+
+export const parseValue = (value) => {
+  const number = parseFloat(value);
+  let unit = 'unsupported';
+
+  if (/^\d+$/.test(value)) {
+    unit = 'px';
+  }
+
+  const match = value.match(/px|rem|em/);
+  if (match) {
+    unit = match[0];
+  }
+
+  return { number, unit };
+};
+
+export const parseFontSizeValue = (value) => {
+  const values = {};
+  if (typeof value === 'string') {
+    values.fontSize = parseValue(value);
+  } else if (Array.isArray(value)) {
+    values.fontSize = parseValue(value[0]);
+    if (typeof value[1] === 'string') {
+      values.lineHeight = parseValue(value[1]);
+    } else if (typeof value[1] === 'object') {
+      if ('lineHeight' in value[1]) {
+        values.lineHeight = parseValue(value[1].lineHeight);
+      }
+      if ('letterSpacing' in value[1]) {
+        values.letterSpacing = parseValue(value[1].letterSpacing);
+      }
+    }
+  }
+  return values;
+};
+
+export const checkValues = (start, end, value, prop = null) => {
+  if (start.number === end.number) {
+    log.error(
+      `Same value for start an end${
+        prop ? ` (${prop})` : ''
+      }: "clamp-[${value}]".`
+    );
+    return null;
+  }
+
+  if (start.unit !== end.unit) {
+    log.error(
+      `Units need to match${prop ? ` (${prop})` : ''}: "clamp-[${value}]".`
+    );
+    return null;
+  }
+
+  if (start.unit === 'unsupported' || end.unit === 'unsupported') {
+    log.error(
+      `Only px, rem and em units are supported${
+        prop ? ` (${prop})` : ''
+      }: "clamp-[${value}]".`
+    );
+    return null;
+  }
+
+  return true;
+};

package/src/resolve-property.js

@@ -0,0 +1,302 @@
+const cssTransformValue = [
+  'translate(var(--tw-translate-x), var(--tw-translate-y))',
+  'rotate(var(--tw-rotate))',
+  'skewX(var(--tw-skew-x))',
+  'skewY(var(--tw-skew-y))',
+  'scaleX(var(--tw-scale-x))',
+  'scaleY(var(--tw-scale-y))',
+].join(' ');
+
+export const resolveProperty = (name) => {
+  switch (name) {
+    case 'p':
+      return {
+        key: 'padding',
+        props: ['padding'],
+      };
+    case 'pt':
+      return {
+        key: 'padding',
+        props: ['paddingTop'],
+      };
+    case 'pb':
+      return {
+        key: 'padding',
+        props: ['paddingBottom'],
+      };
+    case 'pl':
+      return {
+        key: 'padding',
+        props: ['paddingLeft'],
+      };
+    case 'pr':
+      return {
+        key: 'padding',
+        props: ['paddingRight'],
+      };
+    case 'px':
+      return {
+        key: 'padding',
+        props: ['paddingLeft', 'paddingRight'],
+      };
+    case 'py':
+      return {
+        key: 'padding',
+        props: ['paddingTop', 'paddingBottom'],
+      };
+    case 'm':
+      return {
+        key: 'margin',
+        props: ['margin'],
+      };
+    case 'mt':
+      return {
+        key: 'margin',
+        props: ['marginTop'],
+      };
+    case 'mb':
+      return {
+        key: 'margin',
+        props: ['marginBottom'],
+      };
+    case 'ml':
+      return {
+        key: 'margin',
+        props: ['marginLeft'],
+      };
+    case 'mr':
+      return {
+        key: 'margin',
+        props: ['marginRight'],
+      };
+    case 'mx':
+      return {
+        key: 'margin',
+        props: ['marginLeft', 'marginRight'],
+      };
+    case 'my':
+      return {
+        key: 'margin',
+        props: ['marginTop', 'marginBottom'],
+      };
+    case 'inset':
+      return {
+        key: 'inset',
+        props: ['top', 'left', 'right', 'bottom'],
+      };
+    case 'top':
+      return {
+        key: 'inset',
+        props: ['top'],
+      };
+
+    case 'left':
+      return {
+        key: 'inset',
+        props: ['left'],
+      };
+    case 'right':
+      return {
+        key: 'inset',
+        props: ['right'],
+      };
+    case 'bottom':
+      return {
+        key: 'inset',
+        props: ['bottom'],
+      };
+    case 'text':
+      return {
+        key: 'fontSize',
+        props: ['fontSize'],
+      };
+    case 'gap':
+      return {
+        key: 'gap',
+        props: ['gap'],
+      };
+    case 'gap-x':
+      return {
+        key: 'gap',
+        props: ['columnGap'],
+      };
+    case 'gap-y':
+      return {
+        key: 'gap',
+        props: ['rowGap'],
+      };
+    case 'w':
+      return {
+        key: 'width',
+        props: ['width'],
+      };
+    case 'h':
+      return {
+        key: 'height',
+        props: ['height'],
+      };
+    case 'size':
+      return {
+        key: 'size',
+        props: ['width', 'height'],
+      };
+
+    case 'min-w':
+      return {
+        key: 'minWidth',
+        props: ['minWidth'],
+      };
+
+    case 'min-h':
+      return {
+        key: 'minHeight',
+        props: ['minHeight'],
+      };
+
+    case 'max-w':
+      return {
+        key: 'maxWidth',
+        props: ['maxWidth'],
+      };
+
+    case 'max-h':
+      return {
+        key: 'maxHeight',
+        props: ['maxHeight'],
+      };
+
+    case 'rounded':
+      return {
+        key: 'borderRadius',
+        props: ['borderRadius'],
+      };
+
+    case 'rounded-t':
+      return {
+        key: 'borderRadius',
+        props: ['borderTopLeftRadius', 'borderTopRightRadius'],
+      };
+
+    case 'rounded-r':
+      return {
+        key: 'borderRadius',
+        props: ['borderTopRightRadius', 'borderBottomRightRadius'],
+      };
+
+    case 'rounded-b':
+      return {
+        key: 'borderRadius',
+        props: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+      };
+
+    case 'rounded-l':
+      return {
+        key: 'borderRadius',
+        props: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
+      };
+
+    case 'rounded-tl':
+      return {
+        key: 'borderRadius',
+        props: ['borderTopLeftRadius'],
+      };
+
+    case 'rounded-tr':
+      return {
+        key: 'borderRadius',
+        props: ['borderTopRightRadius'],
+      };
+
+    case 'rounded-bl':
+      return {
+        key: 'borderRadius',
+        props: ['borderBottomLeftRadius'],
+      };
+
+    case 'rounded-br':
+      return {
+        key: 'borderRadius',
+        props: ['borderBottomRightRadius'],
+      };
+
+    case 'translate-x':
+      return {
+        key: 'translate',
+        props: [
+          '--tw-translate-x',
+          { '@defaults transform': {} },
+          { transform: cssTransformValue },
+        ],
+      };
+
+    case 'translate-y':
+      return {
+        key: 'translate',
+        props: [
+          '--tw-translate-y',
+          { '@defaults transform': {} },
+          { transform: cssTransformValue },
+        ],
+      };
+    case 'stroke':
+      return {
+        key: 'strokeWidth',
+        props: ['strokeWidth'],
+      };
+
+    case 'leading':
+      return {
+        key: 'lineHeight',
+        props: ['lineHeight'],
+      };
+
+    case 'border':
+      return {
+        key: 'borderWidth',
+        props: ['borderWidth'],
+      };
+    case 'border-t':
+      return {
+        key: 'borderWidth',
+        props: ['borderTopWidth'],
+      };
+    case 'border-b':
+      return {
+        key: 'borderWidth',
+        props: ['borderBottomWidth'],
+      };
+
+    case 'border-l':
+      return {
+        key: 'borderWidth',
+        props: ['borderLeftWidth'],
+      };
+
+    case 'border-r':
+      return {
+        key: 'borderWidth',
+        props: ['borderRightWidth'],
+      };
+
+    case 'border-x':
+      return {
+        key: 'borderWidth',
+        props: ['borderLeftWidth', 'borderRightWidth'],
+      };
+
+    case 'border-y':
+      return {
+        key: 'borderWidth',
+        props: ['borderTopWidth', 'borderBottomWidth'],
+      };
+
+    case 'scroll-m':
+      return {
+        key: 'scrollMargin',
+        props: ['scrollMargin'],
+      };
+
+    default:
+      return null;
+  }
+};

package/src/utils.js

@@ -1,82 +0,0 @@
-// https://chriskirknielsen.com/blog/modern-fluid-typography-with-clamp/
-
-const clamp = (_start, _end, minvw = 375, maxvw = 1440) => {
-  let start = _start;
-  let end = _end;
-  let negative = false;
-
-  if (_end < _start && _start < 0 && _end < 0) {
-    start = Math.abs(_start);
-    end = Math.abs(_end);
-    negative = true;
-  } else if (_end < _start && _start > 0 && _end > 0) {
-    start = _start * -1;
-    end = _end * -1;
-    negative = true;
-  } else if (_end < _start) {
-    start = Math.abs(_start) * -1;
-    end = Math.abs(_end);
-    negative = true;
-  }
-
-  const rem = (px) => `${px / 16}rem`;
-  const factor = (1 / (maxvw - minvw)) * (end - start);
-  const calc = `${rem(start - minvw * factor)} + ${100 * factor}vw`;
-
-  const value = `clamp(${rem(start)}, ${calc}, ${rem(end)})`;
-
-  return negative ? `calc(${value} * -1)` : value;
-};
-
-const clampFs = (start, end, tracking = null, minvw = 375, maxvw = 1440) => {
-  const [startFs, startLh] = start;
-  const [endFs, endLh] = end;
-
-  const sameLh =
-    (startFs == startLh && endFs === endLh) ||
-    startLh / startFs === endLh / endFs;
-
-  const settings = [
-    clamp(startFs, endFs, minvw, maxvw),
-    {
-      lineHeight: sameLh
-        ? startLh / startFs
-        : clamp(startLh, endLh, minvw, maxvw),
-    },
-  ];
-
-  if (tracking) {
-    settings[1].letterSpacing = tracking;
-  }
-
-  return settings;
-};
-
-const setupClamp = (
-  options = {
-    minViewportWidth: 375,
-    maxViewportWidth: 1440,
-  }
-) => {
-  return {
-    clamp: (
-      start,
-      end,
-      minvw = options.minViewportWidth,
-      maxvw = options.maxViewportWidth
-    ) => clamp(start, end, minvw, maxvw),
-    clampFs: (
-      start,
-      end,
-      tracking = null,
-      minvw = options.minViewportWidth,
-      maxvw = options.maxViewportWidth
-    ) => clampFs(start, end, tracking, minvw, maxvw),
-  };
-};
-
-module.exports = {
-  clamp,
-  clampFs,
-  setupClamp,
-};