Fix a bunch of API table crap

Author: adamwathan

src/docs/background-position.mdx

@@ -17,7 +17,7 @@ export const description = "Utilities for controlling the position of an element
     ["bg-right-bottom", "background-position: right bottom;"],
     ["bg-right-top", "background-position: right top;"],
     ["bg-top", "background-position: top;"],
-    ["bg-(<custom-property>)", "background-position: var(<custom-property>);"],
+    ["bg-(position:<custom-property>)", "background-position: var(<custom-property>);"],
     ["bg-[<value>]", "background-position: <value>;"],
   ]}
 />

src/docs/background-size.mdx

@@ -12,7 +12,7 @@ export const description = "Utilities for controlling the background size of an
     ["bg-auto", "background-size: auto;"],
     ["bg-cover", "background-size: cover;"],
     ["bg-contain", "background-size: contain;"],
-    ["bg-(<custom-property>)", "background-size: var(<custom-property>);"],
+    ["bg-(length:<custom-property>)", "background-size: var(<custom-property>);"],
     ["bg-[<value>]", "background-size: <value>;"],
   ]}
 />

src/docs/grid-column.mdx

@@ -10,8 +10,9 @@ export const description = "Utilities for controlling how elements are sized and
 <ApiTable
   rows={[
     ["col-span-<number>", "grid-column: span <number> / span <number>;"],
-    ["col-(<custom-property>)", "grid-column: var(<custom-property>);"],
-    ["col-[<value>]", "grid-column: <value>;"],
+    ["col-span-full", "grid-column: 1 / -1;"],
+    ["col-span-(<custom-property>)", "grid-column: span var(<custom-property>) / span var(<custom-property>);"],
+    ["col-span-[<value>]", "grid-column: span <value> / span <value>;"],
     ["col-start-<number>", "grid-column-start: <number>;"],
     ["-col-start-<number>", "grid-column-start: calc(<number> * -1);"],
     ["col-start-auto", "grid-column-start: auto;"],
@@ -22,6 +23,9 @@ export const description = "Utilities for controlling how elements are sized and
     ["col-end-auto", "grid-column-end: auto;"],
     ["col-end-(<custom-property>)", "grid-column-end: var(<custom-property>);"],
     ["col-end-[<value>]", "grid-column-end: <value>;"],
+    ["col-auto", "grid-column: auto;"],
+    ["col-(<custom-property>)", "grid-column: var(<custom-property>);"],
+    ["col-[<value>]", "grid-column: <value>;"],
   ]}
 />
 

src/docs/grid-row.mdx

@@ -10,8 +10,9 @@ export const description = "Utilities for controlling how elements are sized and
 <ApiTable
   rows={[
     ["row-span-<number>", "grid-row: span <number> / span <number>;"],
-    ["row-(<custom-property>)", "grid-row: var(<custom-property>);"],
-    ["row-[<value>]", "grid-row: <value>;"],
+    ["row-span-full", "grid-row: 1 / -1;"],
+    ["row-span-(<custom-property>)", "grid-row: span var(<custom-property>) / span var(<custom-property>);"],
+    ["row-span-[<value>]", "grid-row: span <value> / span <value>;"],
     ["row-start-<number>", "grid-row-start: <number>;"],
     ["-row-start-<number>", "grid-row-start: calc(<number> * -1);"],
     ["row-start-auto", "grid-row-start: auto;"],
@@ -22,6 +23,9 @@ export const description = "Utilities for controlling how elements are sized and
     ["row-end-auto", "grid-row-end: auto;"],
     ["row-end-(<custom-property>)", "grid-row-end: var(<custom-property>);"],
     ["row-end-[<value>]", "grid-row-end: <value>;"],
+    ["row-auto", "grid-row: auto;"],
+    ["row-(<custom-property>)", "grid-row: var(<custom-property>);"],
+    ["row-[<value>]", "grid-row: <value>;"],
   ]}
 />
 

src/docs/margin.mdx

@@ -23,6 +23,9 @@ export const description = "Utilities for controlling an element's margin.";
     ].flatMap(([prefix, property]) => [
       [`${prefix}-<number>`, `${property}: calc(var(--spacing) * <number>);`],
       [`-${prefix}-<number>`, `${property}: calc(var(--spacing) * -<number>);`],
+      [`${prefix}-auto`, `${property}: auto;`],
+      [`${prefix}-px`, `${property}: 1px;`],
+      [`-${prefix}-px`, `${property}: -1px;`],
       [`${prefix}-(<custom-property>)`, `${property}: var(<custom-property>);`],
       [`${prefix}-[<value>]`, `${property}: <value>;`],
     ]),
@@ -33,29 +36,49 @@ export const description = "Utilities for controlling an element's margin.";
       [
         `${prefix}-<number>`,
         dedent`& > :not(:last-child) {
-          ${property}-start: calc(var(--spacing) * <number>);
-          ${property}-end: calc(var(--spacing) * <number>);
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(calc(var(--spacing) * <number>) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(calc(var(--spacing) * <number>) * calc(1 - var(--tw-${prefix}-reverse)));
         };`,
       ],
       [
         `-${prefix}-<number>`,
         dedent`& > :not(:last-child) {
-          ${property}-start: calc(var(--spacing) * -<number>);
-          ${property}-end: calc(var(--spacing) * -<number>);
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(calc(var(--spacing) * -<number>) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(calc(var(--spacing) * -<number>) * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `${prefix}-px`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(calc(var(--spacing) * 1px) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(calc(var(--spacing) * 1px) * calc(1 - var(--tw-${prefix}-reverse)));
+        };`,
+      ],
+      [
+        `-${prefix}-px`,
+        dedent`& > :not(:last-child) {
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(calc(var(--spacing) * -1px) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(calc(var(--spacing) * -1px) * calc(1 - var(--tw-${prefix}-reverse)));
         };`,
       ],
       [
         `${prefix}-(<custom-property>)`,
         dedent`& > :not(:last-child) {
-          ${property}-start: <custom-property>;
-          ${property}-end: <custom-property>);
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(var(<custom-property>) * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(var(<custom-property>) * calc(1 - var(--tw-${prefix}-reverse)));
         };`,
       ],
       [
         `${prefix}-[<value>]`,
         dedent`& > :not(:last-child) {
-          ${property}-start: <value>;
-          ${property}-end: <value>);
+          --tw-${prefix}-reverse: 0;
+          ${property}-start: calc(<value> * var(--tw-${prefix}-reverse));
+          ${property}-end: calc(<value> * calc(1 - var(--tw-${prefix}-reverse)));
         };`,
       ],
     ]),
@@ -71,7 +94,8 @@ export const description = "Utilities for controlling an element's margin.";
         --tw-space-y-reverse: 1;
       }`,
     ],
-  ]}
+
+]}
 />
 
 ## Examples

src/docs/outline-offset.mdx

@@ -10,7 +10,7 @@ export const description = "Utilities for controlling the offset of an element's
   rows={[
     ["outline-offset-<number>", "outline-offset: <number>px;"],
     ["-outline-offset-<number>", "outline-offset: calc(<number>px * -1);"],
-    ["outline-offset-(length:<custom-property>)", "outline-offset: var(<custom-property>);"],
+    ["outline-offset-(<custom-property>)", "outline-offset: var(<custom-property>);"],
     ["outline-offset-[<value>]", "outline-offset: <value>;"],
   ]}
 />

src/docs/padding.mdx

@@ -22,6 +22,7 @@ export const description = "Utilities for controlling an element's padding.";
     ["pl", "padding-left"],
   ].flatMap(([prefix, property]) => [
     [`${prefix}-<number>`, `${property}: calc(var(--spacing) * <number>);`],
+    [`${prefix}-px`, `${property}: calc(var(--spacing) * 1px);`],
     [`${prefix}-(<custom-property>)`, `${property}: var(<custom-property>);`],
     [`${prefix}-[<value>]`, `${property}: <value>;`],
   ])}