feat: add border-spacing utilities

tw-in-js · Oct 3, 2022 · 3192816 · 3192816
1 parent a73f177
commit 3192816
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 5 deletions.
diff --git a/.changeset/gold-trains-enjoy.md b/.changeset/gold-trains-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': patch
+---
+
+add `border-spacing` utilities
diff --git a/package.json b/package.json
@@ -63,13 +63,13 @@
       "name": "@twind/cdn",
       "path": "packages/cdn/dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15.1kb"
+      "limit": "15.2kb"
     },
     {
       "name": "@twind/preset-tailwind",
       "path": "packages/preset-tailwind/dist/preset-tailwind.esnext.js",
       "brotli": true,
-      "limit": "9.1kb",
+      "limit": "9.2kb",
       "ignore": [
         "twind"
       ]

diff --git a/packages/cdn/package.json b/packages/cdn/package.json
@@ -32,7 +32,7 @@
       "name": "@twind/cdn",
       "path": "dist/cdn.esnext.js",
       "brotli": true,
-      "limit": "15.1kb"
+      "limit": "15.2kb"
     }
   ],
   "dependencies": {

diff --git a/packages/preset-tailwind/package.json b/packages/preset-tailwind/package.json
@@ -31,7 +31,7 @@
       "name": "@twind/preset-tailwind",
       "path": "dist/preset-tailwind.esnext.js",
       "brotli": true,
-      "limit": "9.1kb",
+      "limit": "9.2kb",
       "ignore": [
         "twind"
       ]

diff --git a/packages/preset-tailwind/src/defaultTheme.ts b/packages/preset-tailwind/src/defaultTheme.ts
@@ -241,6 +241,7 @@ const theme: DefaultTheme = {
     '1/2': '50%',
     full: '9999px',
   },
+  borderSpacing: /* #__PURE__ */ alias('spacing'),
   borderWidth: {
     .../* #__PURE__ */ exponential(8, 'px'),
     // 0: '0px',

diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json
@@ -2049,5 +2049,11 @@
       ".disabled\\:shadow-sm:disabled{--tw-shadow:0 1px 2px 0 rgba(0,0,0,0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}",
       ".enabled\\:shadow-md:enabled{--tw-shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}"
     ]
+  ],
+  "border-spacing-4 border-spacing-x-6 border-spacing-y-8": [
+    "*,::before,::after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0}",
+    ".border-spacing-4{--tw-border-spacing-x:1rem;--tw-border-spacing-y:1rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}",
+    ".border-spacing-x-6{--tw-border-spacing-x:1.5rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}",
+    ".border-spacing-y-8{--tw-border-spacing-y:2rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}"
   ]
 }
diff --git a/packages/preset-tailwind/src/rules.ts b/packages/preset-tailwind/src/rules.ts
@@ -586,6 +586,22 @@ const rules: Rule<TailwindTheme>[] = [
   // Border Style
   ['border-(solid|dashed|dotted|double|none)', 'borderStyle'],
 
+  // Border Spacing
+  [
+    'border-spacing(-[xy])?(?:-|$)',
+    fromTheme('borderSpacing', ({ 1: $1, _ }) => ({
+      '@layer defaults': {
+        '*,::before,::after,::backdrop': {
+          '--tw-border-spacing-x': 0,
+          '--tw-border-spacing-y': 0,
+        },
+      },
+      [('--tw-border-spacing' + ($1 || '-x')) as '--tw-border-spacing-x']: _,
+      [('--tw-border-spacing' + ($1 || '-y')) as '--tw-border-spacing-y']: _,
+      'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+    })),
+  ],
+
   // Border Color
   ['border-([xytrbl])-', colorFromTheme({ section: 'borderColor' }, edge('border', 'Color'))],
   ['border-', colorFromTheme()],

diff --git a/packages/preset-tailwind/src/types.ts b/packages/preset-tailwind/src/types.ts
@@ -14,6 +14,8 @@ declare module 'twind' {
     '--tw-bg-opacity'?: string | number
     '--tw-blur'?: string
     '--tw-border-opacity'?: string | number
+    '--tw-border-spacing-x'?: string | number
+    '--tw-border-spacing-y'?: string | number
     '--tw-brightness'?: string
     '--tw-contrast'?: string
     '--tw-divide-opacity'?: string | number
@@ -99,6 +101,7 @@ export interface TailwindTheme extends BaseTheme {
   borderColor: BaseTheme['colors']
   borderOpacity: Record<string, string>
   borderRadius: Record<string, string>
+  borderSpacing: Record<string, string>
   borderWidth: Record<string, string>
   boxShadow: Record<string, MaybeArray<string>>
   boxShadowColor: BaseTheme['colors']

diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
@@ -41,7 +41,7 @@
       "name": "@twind/tailwind",
       "path": "dist/tailwind.esnext.js",
       "brotli": true,
-      "limit": "9.9kb"
+      "limit": "10kb"
     }
   ],
   "dependencies": {