diff --git a/packages/fractures/package.json b/packages/fractures/package.json index d3ee8cd..fa00101 100644 --- a/packages/fractures/package.json +++ b/packages/fractures/package.json @@ -1,6 +1,6 @@ { "name": "@heliosgraphics/fractures", - "version": "6.2.3", + "version": "6.3.0", "type": "module", "author": "03b8 <03b8@helios.graphics>", "license": "MIT", diff --git a/packages/fractures/src/root.config.ts b/packages/fractures/src/root.config.ts index 4c04165..733a819 100644 --- a/packages/fractures/src/root.config.ts +++ b/packages/fractures/src/root.config.ts @@ -1,4 +1,5 @@ export const config: string = `:root { + --box-px: unset; --box-1: unset; --box-2: unset; --box-3: unset; diff --git a/packages/fractures/src/rules/cursor.ts b/packages/fractures/src/rules/cursor.ts index 915d65e..c7bcec7 100644 --- a/packages/fractures/src/rules/cursor.ts +++ b/packages/fractures/src/rules/cursor.ts @@ -2,10 +2,7 @@ import type { FractureRuleType } from "../types/meta" export const CURSOR: Array = [ { selector: "no-pointer-events", declarations: { pointerEvents: "none" } }, - { - selector: "cursor-context-menu", - declarations: { cursor: "context-menu" }, - }, + { selector: "cursor-context-menu", declarations: { cursor: "context-menu" }, }, { selector: "cursor-crosshair", declarations: { cursor: "crosshair" } }, { selector: "cursor-grab", declarations: { cursor: "grab" } }, { selector: "cursor-grabbing", declarations: { cursor: "grabbing" } }, diff --git a/packages/fractures/src/rules/display.ts b/packages/fractures/src/rules/display.ts index 381f6bc..933c279 100644 --- a/packages/fractures/src/rules/display.ts +++ b/packages/fractures/src/rules/display.ts @@ -18,23 +18,11 @@ export const DISPLAY: Array = [ { selector: "table-caption", declarations: { display: "table-caption" } }, { selector: "table-cell", declarations: { display: "table-cell" } }, { selector: "table-column", declarations: { display: "table-column" } }, - { - selector: "table-column-group", - declarations: { display: "table-column-group" }, - }, - { - selector: "table-footer-group", - declarations: { display: "table-footer-group" }, - }, - { - selector: "table-header-group", - declarations: { display: "table-header-group" }, - }, + { selector: "table-column-group", declarations: { display: "table-column-group" }, }, + { selector: "table-footer-group", declarations: { display: "table-footer-group" }, }, + { selector: "table-header-group", declarations: { display: "table-header-group" }, }, { selector: "table-row", declarations: { display: "table-row" } }, - { - selector: "table-row-group", - declarations: { display: "table-row-group" }, - }, + { selector: "table-row-group", declarations: { display: "table-row-group" }, }, { selector: "table-layout-fixed", declarations: { tableLayout: "fixed" } }, { selector: "float-left", declarations: { float: "left" } }, { selector: "float-right", declarations: { float: "right" } }, diff --git a/packages/fractures/src/rules/flex.ts b/packages/fractures/src/rules/flex.ts index 96eb878..13d62ce 100644 --- a/packages/fractures/src/rules/flex.ts +++ b/packages/fractures/src/rules/flex.ts @@ -2,24 +2,18 @@ import type { FractureRuleType } from "../types/meta" export const FLEX: Array = [ { selector: "flex-wrap", declarations: { flexWrap: "wrap" } }, + { selector: "flex-row", declarations: { flexDirection: "row" } }, { selector: "flex-column", declarations: { flexDirection: "column" } }, - { - selector: "space-around", - declarations: { justifyContent: "space-around" }, - }, - { - selector: "space-between", - declarations: { justifyContent: "space-between" }, - }, - { - selector: "space-evenly", - declarations: { justifyContent: "space-evenly" }, - }, - { - selector: "flex-center", - declarations: { alignItems: "center", justifyContent: "center" }, - }, + + { selector: "space-around", declarations: { justifyContent: "space-around" }, }, + { selector: "space-between", declarations: { justifyContent: "space-between" }, }, + { selector: "space-evenly", declarations: { justifyContent: "space-evenly" }, }, + { selector: "flex-x-center", declarations: { justifyContent: "center" } }, + { selector: "justify-flex-start", declarations: { justifyContent: "flex-start" } }, + { selector: "justify-flex-end", declarations: { justifyContent: "flex-end" } }, + { selector: "flex-center", declarations: { alignItems: "center", justifyContent: "center" }, }, + { selector: "align-baseline", declarations: { alignItems: "baseline" } }, { selector: "align-flex-start", declarations: { alignItems: "flex-start" } }, { selector: "align-flex-end", declarations: { alignItems: "flex-end" } }, @@ -27,14 +21,8 @@ export const FLEX: Array = [ { selector: "align-start", declarations: { alignItems: "start" } }, { selector: "align-end", declarations: { alignItems: "end" } }, { selector: "flex-y-center", declarations: { alignItems: "center" } }, - { selector: "flex-x-center", declarations: { justifyContent: "center" } }, - { selector: "justify-flex-start", declarations: { justifyContent: "flex-start" } }, - { selector: "justify-flex-end", declarations: { justifyContent: "flex-end" } }, - { - selector: "self-center", - declarations: { alignSelf: "center", justifySelf: "center" }, - }, + { selector: "self-center", declarations: { alignSelf: "center", justifySelf: "center" }, }, { selector: "self-justify-center", declarations: { justifySelf: "center" } }, { selector: "self-justify-start", declarations: { justifySelf: "flex-start" } }, { selector: "self-justify-end", declarations: { justifySelf: "flex-end" } }, @@ -43,6 +31,7 @@ export const FLEX: Array = [ { selector: "self-align-start", declarations: { alignSelf: "flex-start" } }, { selector: "self-align-end", declarations: { alignSelf: "flex-end" } }, + { selector: "gap-px", declarations: { gap: "var(--box-px)" } }, { selector: "gap-1", declarations: { gap: "var(--box-1)" } }, { selector: "gap-2", declarations: { gap: "var(--box-2)" } }, { selector: "gap-3", declarations: { gap: "var(--box-3)" } }, diff --git a/packages/fractures/src/rules/grid.ts b/packages/fractures/src/rules/grid.ts index fb51604..5aa667d 100644 --- a/packages/fractures/src/rules/grid.ts +++ b/packages/fractures/src/rules/grid.ts @@ -1,6 +1,7 @@ import type { FractureRuleType } from "../types/meta" export const GRID: Array = [ + { selector: "grid-gap-px", declarations: { gridGap: "var(--box-px)" } }, { selector: "grid-gap-1", declarations: { gridGap: "var(--box-1)" } }, { selector: "grid-gap-2", declarations: { gridGap: "var(--box-2)" } }, { selector: "grid-gap-3", declarations: { gridGap: "var(--box-3)" } }, @@ -22,6 +23,7 @@ export const GRID: Array = [ { selector: "grid-gap-40", declarations: { gridGap: "var(--box-40)" } }, { selector: "grid-gap-48", declarations: { gridGap: "var(--box-48)" } }, + { selector: "grid-gap-x-px", declarations: { gridRowGap: "var(--box-px)" } }, { selector: "grid-gap-x-1", declarations: { gridRowGap: "var(--box-1)" } }, { selector: "grid-gap-x-2", declarations: { gridRowGap: "var(--box-2)" } }, { selector: "grid-gap-x-3", declarations: { gridRowGap: "var(--box-3)" } }, @@ -31,233 +33,66 @@ export const GRID: Array = [ { selector: "grid-gap-x-7", declarations: { gridRowGap: "var(--box-7)" } }, { selector: "grid-gap-x-8", declarations: { gridRowGap: "var(--box-8)" } }, { selector: "grid-gap-x-9", declarations: { gridRowGap: "var(--box-9)" } }, - { - selector: "grid-gap-x-10", - declarations: { gridRowGap: "var(--box-10)" }, - }, - { - selector: "grid-gap-x-11", - declarations: { gridRowGap: "var(--box-11)" }, - }, - { - selector: "grid-gap-x-12", - declarations: { gridRowGap: "var(--box-12)" }, - }, - { - selector: "grid-gap-x-13", - declarations: { gridRowGap: "var(--box-13)" }, - }, - { - selector: "grid-gap-x-14", - declarations: { gridRowGap: "var(--box-14)" }, - }, - { - selector: "grid-gap-x-15", - declarations: { gridRowGap: "var(--box-15)" }, - }, - { - selector: "grid-gap-x-16", - declarations: { gridRowGap: "var(--box-16)" }, - }, - { - selector: "grid-gap-x-24", - declarations: { gridRowGap: "var(--box-24)" }, - }, - { - selector: "grid-gap-x-32", - declarations: { gridRowGap: "var(--box-32)" }, - }, - { - selector: "grid-gap-x-40", - declarations: { gridRowGap: "var(--box-40)" }, - }, - { - selector: "grid-gap-x-48", - declarations: { gridRowGap: "var(--box-48)" }, - }, + { selector: "grid-gap-x-10", declarations: { gridRowGap: "var(--box-10)" }, }, + { selector: "grid-gap-x-11", declarations: { gridRowGap: "var(--box-11)" }, }, + { selector: "grid-gap-x-12", declarations: { gridRowGap: "var(--box-12)" }, }, + { selector: "grid-gap-x-13", declarations: { gridRowGap: "var(--box-13)" }, }, + { selector: "grid-gap-x-14", declarations: { gridRowGap: "var(--box-14)" }, }, + { selector: "grid-gap-x-15", declarations: { gridRowGap: "var(--box-15)" }, }, + { selector: "grid-gap-x-16", declarations: { gridRowGap: "var(--box-16)" }, }, + { selector: "grid-gap-x-24", declarations: { gridRowGap: "var(--box-24)" }, }, + { selector: "grid-gap-x-32", declarations: { gridRowGap: "var(--box-32)" }, }, + { selector: "grid-gap-x-40", declarations: { gridRowGap: "var(--box-40)" }, }, + { selector: "grid-gap-x-48", declarations: { gridRowGap: "var(--box-48)" }, }, - { - selector: "grid-gap-y-1", - declarations: { gridColumnGap: "var(--box-1)" }, - }, - { - selector: "grid-gap-y-2", - declarations: { gridColumnGap: "var(--box-2)" }, - }, - { - selector: "grid-gap-y-3", - declarations: { gridColumnGap: "var(--box-3)" }, - }, - { - selector: "grid-gap-y-4", - declarations: { gridColumnGap: "var(--box-4)" }, - }, - { - selector: "grid-gap-y-5", - declarations: { gridColumnGap: "var(--box-5)" }, - }, - { - selector: "grid-gap-y-6", - declarations: { gridColumnGap: "var(--box-6)" }, - }, - { - selector: "grid-gap-y-7", - declarations: { gridColumnGap: "var(--box-7)" }, - }, - { - selector: "grid-gap-y-8", - declarations: { gridColumnGap: "var(--box-8)" }, - }, - { - selector: "grid-gap-y-9", - declarations: { gridColumnGap: "var(--box-9)" }, - }, - { - selector: "grid-gap-y-10", - declarations: { gridColumnGap: "var(--box-10)" }, - }, - { - selector: "grid-gap-y-11", - declarations: { gridColumnGap: "var(--box-11)" }, - }, - { - selector: "grid-gap-y-12", - declarations: { gridColumnGap: "var(--box-12)" }, - }, - { - selector: "grid-gap-y-13", - declarations: { gridColumnGap: "var(--box-13)" }, - }, - { - selector: "grid-gap-y-14", - declarations: { gridColumnGap: "var(--box-14)" }, - }, - { - selector: "grid-gap-y-15", - declarations: { gridColumnGap: "var(--box-15)" }, - }, - { - selector: "grid-gap-y-16", - declarations: { gridColumnGap: "var(--box-16)" }, - }, - { - selector: "grid-gap-y-24", - declarations: { gridColumnGap: "var(--box-24)" }, - }, - { - selector: "grid-gap-y-32", - declarations: { gridColumnGap: "var(--box-32)" }, - }, - { - selector: "grid-gap-y-40", - declarations: { gridColumnGap: "var(--box-40)" }, - }, - { - selector: "grid-gap-y-48", - declarations: { gridColumnGap: "var(--box-48)" }, - }, + { selector: "grid-gap-y-px", declarations: { gridColumnGap: "var(--box-px)" }, }, + { selector: "grid-gap-y-1", declarations: { gridColumnGap: "var(--box-1)" }, }, + { selector: "grid-gap-y-2", declarations: { gridColumnGap: "var(--box-2)" }, }, + { selector: "grid-gap-y-3", declarations: { gridColumnGap: "var(--box-3)" }, }, + { selector: "grid-gap-y-4", declarations: { gridColumnGap: "var(--box-4)" }, }, + { selector: "grid-gap-y-5", declarations: { gridColumnGap: "var(--box-5)" }, }, + { selector: "grid-gap-y-6", declarations: { gridColumnGap: "var(--box-6)" }, }, + { selector: "grid-gap-y-7", declarations: { gridColumnGap: "var(--box-7)" }, }, + { selector: "grid-gap-y-8", declarations: { gridColumnGap: "var(--box-8)" }, }, + { selector: "grid-gap-y-9", declarations: { gridColumnGap: "var(--box-9)" }, }, + { selector: "grid-gap-y-10", declarations: { gridColumnGap: "var(--box-10)" }, }, + { selector: "grid-gap-y-11", declarations: { gridColumnGap: "var(--box-11)" }, }, + { selector: "grid-gap-y-12", declarations: { gridColumnGap: "var(--box-12)" }, }, + { selector: "grid-gap-y-13", declarations: { gridColumnGap: "var(--box-13)" }, }, + { selector: "grid-gap-y-14", declarations: { gridColumnGap: "var(--box-14)" }, }, + { selector: "grid-gap-y-15", declarations: { gridColumnGap: "var(--box-15)" }, }, + { selector: "grid-gap-y-16", declarations: { gridColumnGap: "var(--box-16)" }, }, + { selector: "grid-gap-y-24", declarations: { gridColumnGap: "var(--box-24)" }, }, + { selector: "grid-gap-y-32", declarations: { gridColumnGap: "var(--box-32)" }, }, + { selector: "grid-gap-y-40", declarations: { gridColumnGap: "var(--box-40)" }, }, + { selector: "grid-gap-y-48", declarations: { gridColumnGap: "var(--box-48)" }, }, { selector: "grid-dense-row", declarations: { gridAutoFlow: "row dense" } }, - { - selector: "grid-dense-column", - declarations: { gridAutoFlow: "column dense" }, - }, + { selector: "grid-dense-column", declarations: { gridAutoFlow: "column dense" }, }, - { - selector: "grid-cols-1", - declarations: { gridTemplateColumns: "repeat(1, 1fr)" }, - }, - { - selector: "grid-cols-2", - declarations: { gridTemplateColumns: "repeat(2, 1fr)" }, - }, - { - selector: "grid-cols-3", - declarations: { gridTemplateColumns: "repeat(3, 1fr)" }, - }, - { - selector: "grid-cols-4", - declarations: { gridTemplateColumns: "repeat(4, 1fr)" }, - }, - { - selector: "grid-cols-5", - declarations: { gridTemplateColumns: "repeat(5, 1fr)" }, - }, - { - selector: "grid-cols-6", - declarations: { gridTemplateColumns: "repeat(6, 1fr)" }, - }, - { - selector: "grid-cols-7", - declarations: { gridTemplateColumns: "repeat(7, 1fr)" }, - }, - { - selector: "grid-cols-8", - declarations: { gridTemplateColumns: "repeat(8, 1fr)" }, - }, - { - selector: "grid-cols-9", - declarations: { gridTemplateColumns: "repeat(9, 1fr)" }, - }, - { - selector: "grid-cols-10", - declarations: { gridTemplateColumns: "repeat(10, 1fr)" }, - }, - { - selector: "grid-cols-11", - declarations: { gridTemplateColumns: "repeat(11, 1fr)" }, - }, - { - selector: "grid-cols-12", - declarations: { gridTemplateColumns: "repeat(12, 1fr)" }, - }, + { selector: "grid-cols-1", declarations: { gridTemplateColumns: "repeat(1, 1fr)" }, }, + { selector: "grid-cols-2", declarations: { gridTemplateColumns: "repeat(2, 1fr)" }, }, + { selector: "grid-cols-3", declarations: { gridTemplateColumns: "repeat(3, 1fr)" }, }, + { selector: "grid-cols-4", declarations: { gridTemplateColumns: "repeat(4, 1fr)" }, }, + { selector: "grid-cols-5", declarations: { gridTemplateColumns: "repeat(5, 1fr)" }, }, + { selector: "grid-cols-6", declarations: { gridTemplateColumns: "repeat(6, 1fr)" }, }, + { selector: "grid-cols-7", declarations: { gridTemplateColumns: "repeat(7, 1fr)" }, }, + { selector: "grid-cols-8", declarations: { gridTemplateColumns: "repeat(8, 1fr)" }, }, + { selector: "grid-cols-9", declarations: { gridTemplateColumns: "repeat(9, 1fr)" }, }, + { selector: "grid-cols-10", declarations: { gridTemplateColumns: "repeat(10, 1fr)" }, }, + { selector: "grid-cols-11", declarations: { gridTemplateColumns: "repeat(11, 1fr)" }, }, + { selector: "grid-cols-12", declarations: { gridTemplateColumns: "repeat(12, 1fr)" }, }, - { - selector: "grid-rows-1", - declarations: { gridTemplateRows: "repeat(1, 1fr)" }, - }, - { - selector: "grid-rows-2", - declarations: { gridTemplateRows: "repeat(2, 1fr)" }, - }, - { - selector: "grid-rows-3", - declarations: { gridTemplateRows: "repeat(3, 1fr)" }, - }, - { - selector: "grid-rows-4", - declarations: { gridTemplateRows: "repeat(4, 1fr)" }, - }, - { - selector: "grid-rows-5", - declarations: { gridTemplateRows: "repeat(5, 1fr)" }, - }, - { - selector: "grid-rows-6", - declarations: { gridTemplateRows: "repeat(6, 1fr)" }, - }, - { - selector: "grid-rows-7", - declarations: { gridTemplateRows: "repeat(7, 1fr)" }, - }, - { - selector: "grid-rows-8", - declarations: { gridTemplateRows: "repeat(8, 1fr)" }, - }, - { - selector: "grid-rows-9", - declarations: { gridTemplateRows: "repeat(9, 1fr)" }, - }, - { - selector: "grid-rows-10", - declarations: { gridTemplateRows: "repeat(10, 1fr)" }, - }, - { - selector: "grid-rows-11", - declarations: { gridTemplateRows: "repeat(11, 1fr)" }, - }, - { - selector: "grid-rows-12", - declarations: { gridTemplateRows: "repeat(12, 1fr)" }, - }, + { selector: "grid-rows-1", declarations: { gridTemplateRows: "repeat(1, 1fr)" }, }, + { selector: "grid-rows-2", declarations: { gridTemplateRows: "repeat(2, 1fr)" }, }, + { selector: "grid-rows-3", declarations: { gridTemplateRows: "repeat(3, 1fr)" }, }, + { selector: "grid-rows-4", declarations: { gridTemplateRows: "repeat(4, 1fr)" }, }, + { selector: "grid-rows-5", declarations: { gridTemplateRows: "repeat(5, 1fr)" }, }, + { selector: "grid-rows-6", declarations: { gridTemplateRows: "repeat(6, 1fr)" }, }, + { selector: "grid-rows-7", declarations: { gridTemplateRows: "repeat(7, 1fr)" }, }, + { selector: "grid-rows-8", declarations: { gridTemplateRows: "repeat(8, 1fr)" }, }, + { selector: "grid-rows-9", declarations: { gridTemplateRows: "repeat(9, 1fr)" }, }, + { selector: "grid-rows-10", declarations: { gridTemplateRows: "repeat(10, 1fr)" }, }, + { selector: "grid-rows-11", declarations: { gridTemplateRows: "repeat(11, 1fr)" }, }, + { selector: "grid-rows-12", declarations: { gridTemplateRows: "repeat(12, 1fr)" }, }, ] as const diff --git a/packages/fractures/src/rules/height.ts b/packages/fractures/src/rules/height.ts index 0f55856..de18637 100644 --- a/packages/fractures/src/rules/height.ts +++ b/packages/fractures/src/rules/height.ts @@ -3,6 +3,7 @@ import type { FractureRuleType } from "../types/meta" export const HEIGHT: Array = [ { selector: "h-0", declarations: { height: 0 } }, { selector: "h-viewport", declarations: { height: "100vh" } }, + { selector: "h-px", declarations: { height: "var(--box-px)" } }, { selector: "h-1", declarations: { height: "var(--box-1)" } }, { selector: "h-2", declarations: { height: "var(--box-2)" } }, { selector: "h-3", declarations: { height: "var(--box-3)" } }, @@ -14,7 +15,6 @@ export const HEIGHT: Array = [ { selector: "h-9", declarations: { height: "var(--box-9)" } }, { selector: "h-10", declarations: { height: "var(--box-10)" } }, { selector: "h-11", declarations: { height: "var(--box-11)" } }, - { selector: "h-11", declarations: { height: "var(--box-11)" } }, { selector: "h-12", declarations: { height: "var(--box-12)" } }, { selector: "h-12", declarations: { height: "var(--box-12)" } }, { selector: "h-13", declarations: { height: "var(--box-13)" } }, diff --git a/packages/fractures/src/rules/list.ts b/packages/fractures/src/rules/list.ts index 6536148..69a7e72 100644 --- a/packages/fractures/src/rules/list.ts +++ b/packages/fractures/src/rules/list.ts @@ -1,69 +1,17 @@ import type { FractureRuleType } from "../types/meta" export const LIST: Array = [ - { - selector: "list-circle > li", - declarations: { listStyleType: "circle" }, - selectorNice: "list-circle", - }, - { - selector: "list-decimal > li", - declarations: { listStyleType: "decimal" }, - selectorNice: "list-decimal", - }, - { - selector: "list-decimal-leading-zero > li", - declarations: { listStyleType: "decimal-leading-zero" }, - selectorNice: "list-decimal-leading-zero", - }, - { - selector: "list-disc > li", - declarations: { listStyleType: "disc" }, - selectorNice: "list-disc", - }, - { - selector: "list-greek > li", - declarations: { listStyleType: "lower-greek" }, - selectorNice: "list-greek", - }, - { - selector: "list-lower-latin > li", - declarations: { listStyleType: "lower-latin" }, - selectorNice: "list-lower-latin", - }, - { - selector: "list-lower-roman > li", - declarations: { listStyleType: "lower-roman" }, - selectorNice: "list-lower-roman", - }, - { - selector: "list-none > li", - declarations: { listStyleType: "none" }, - selectorNice: "list-none", - }, - { - selector: "list-square > li", - declarations: { listStyleType: "square" }, - selectorNice: "list-square", - }, - { - selector: "list-upper-latin > li", - declarations: { listStyleType: "upper-latin" }, - selectorNice: "list-upper-latin", - }, - { - selector: "list-upper-roman > li", - declarations: { listStyleType: "upper-roman" }, - selectorNice: "list-upper-roman", - }, - { - selector: "list-comma > *", - declarations: { display: "inline-block" }, - selectorNice: "list-comma", - }, - { - selector: "list-comma > *:not(:last-child):after", - declarations: { content: "', '" }, - isHidden: true, - }, + { selector: "list-circle > li", declarations: { listStyleType: "circle" }, selectorNice: "list-circle", }, + { selector: "list-decimal > li", declarations: { listStyleType: "decimal" }, selectorNice: "list-decimal", }, + { selector: "list-decimal-leading-zero > li", declarations: { listStyleType: "decimal-leading-zero" }, selectorNice: "list-decimal-leading-zero", }, + { selector: "list-disc > li", declarations: { listStyleType: "disc" }, selectorNice: "list-disc", }, + { selector: "list-greek > li", declarations: { listStyleType: "lower-greek" }, selectorNice: "list-greek", }, + { selector: "list-lower-latin > li", declarations: { listStyleType: "lower-latin" }, selectorNice: "list-lower-latin", }, + { selector: "list-lower-roman > li", declarations: { listStyleType: "lower-roman" }, selectorNice: "list-lower-roman", }, + { selector: "list-none > li", declarations: { listStyleType: "none" }, selectorNice: "list-none", }, + { selector: "list-square > li", declarations: { listStyleType: "square" }, selectorNice: "list-square", }, + { selector: "list-upper-latin > li", declarations: { listStyleType: "upper-latin" }, selectorNice: "list-upper-latin", }, + { selector: "list-upper-roman > li", declarations: { listStyleType: "upper-roman" }, selectorNice: "list-upper-roman", }, + { selector: "list-comma > *", declarations: { display: "inline-block" }, selectorNice: "list-comma", }, + { selector: "list-comma > *:not(:last-child):after", declarations: { content: "', '" }, isHidden: true, }, ] as const diff --git a/packages/fractures/src/rules/margin.ts b/packages/fractures/src/rules/margin.ts index 6cf4166..7dd37c1 100644 --- a/packages/fractures/src/rules/margin.ts +++ b/packages/fractures/src/rules/margin.ts @@ -2,6 +2,7 @@ import type { FractureRuleType } from "../types/meta" export const MARGIN: Array = [ { selector: "m-0", declarations: { margin: "0" } }, + { selector: "m-px", declarations: { margin: "var(--box-px)" } }, { selector: "m-1", declarations: { margin: "var(--box-1)" } }, { selector: "m-2", declarations: { margin: "var(--box-2)" } }, { selector: "m-3", declarations: { margin: "var(--box-3)" } }, @@ -13,15 +14,10 @@ export const MARGIN: Array = [ { selector: "m-9", declarations: { margin: "var(--box-9)" } }, { selector: "m-10", declarations: { margin: "var(--box-10)" } }, { selector: "m-11", declarations: { margin: "var(--box-11)" } }, - { selector: "m-11", declarations: { margin: "var(--box-11)" } }, - { selector: "m-12", declarations: { margin: "var(--box-12)" } }, { selector: "m-12", declarations: { margin: "var(--box-12)" } }, { selector: "m-13", declarations: { margin: "var(--box-13)" } }, - { selector: "m-13", declarations: { margin: "var(--box-13)" } }, - { selector: "m-14", declarations: { margin: "var(--box-14)" } }, { selector: "m-14", declarations: { margin: "var(--box-14)" } }, { selector: "m-15", declarations: { margin: "var(--box-15)" } }, - { selector: "m-15", declarations: { margin: "var(--box-15)" } }, { selector: "m-16", declarations: { margin: "var(--box-16)" } }, { selector: "m-24", declarations: { margin: "var(--box-24)" } }, { selector: "m-32", declarations: { margin: "var(--box-32)" } }, @@ -29,6 +25,7 @@ export const MARGIN: Array = [ { selector: "m-48", declarations: { margin: "var(--box-48)" } }, { selector: "mr-0", declarations: { marginRight: "0" } }, + { selector: "mr-px", declarations: { marginRight: "var(--box-px)" } }, { selector: "mr-1", declarations: { marginRight: "var(--box-1)" } }, { selector: "mr-2", declarations: { marginRight: "var(--box-2)" } }, { selector: "mr-3", declarations: { marginRight: "var(--box-3)" } }, @@ -40,15 +37,10 @@ export const MARGIN: Array = [ { selector: "mr-9", declarations: { marginRight: "var(--box-9)" } }, { selector: "mr-10", declarations: { marginRight: "var(--box-10)" } }, { selector: "mr-11", declarations: { marginRight: "var(--box-11)" } }, - { selector: "mr-11", declarations: { marginRight: "var(--box-11)" } }, - { selector: "mr-12", declarations: { marginRight: "var(--box-12)" } }, { selector: "mr-12", declarations: { marginRight: "var(--box-12)" } }, { selector: "mr-13", declarations: { marginRight: "var(--box-13)" } }, - { selector: "mr-13", declarations: { marginRight: "var(--box-13)" } }, - { selector: "mr-14", declarations: { marginRight: "var(--box-14)" } }, { selector: "mr-14", declarations: { marginRight: "var(--box-14)" } }, { selector: "mr-15", declarations: { marginRight: "var(--box-15)" } }, - { selector: "mr-15", declarations: { marginRight: "var(--box-15)" } }, { selector: "mr-16", declarations: { marginRight: "var(--box-16)" } }, { selector: "mr-24", declarations: { marginRight: "var(--box-24)" } }, { selector: "mr-32", declarations: { marginRight: "var(--box-32)" } }, @@ -56,6 +48,7 @@ export const MARGIN: Array = [ { selector: "mr-48", declarations: { marginRight: "var(--box-48)" } }, { selector: "ml-0", declarations: { marginLeft: "0" } }, + { selector: "ml-px", declarations: { marginLeft: "var(--box-px)" } }, { selector: "ml-1", declarations: { marginLeft: "var(--box-1)" } }, { selector: "ml-2", declarations: { marginLeft: "var(--box-2)" } }, { selector: "ml-3", declarations: { marginLeft: "var(--box-3)" } }, @@ -67,14 +60,9 @@ export const MARGIN: Array = [ { selector: "ml-9", declarations: { marginLeft: "var(--box-9)" } }, { selector: "ml-10", declarations: { marginLeft: "var(--box-10)" } }, { selector: "ml-11", declarations: { marginLeft: "var(--box-11)" } }, - { selector: "ml-11", declarations: { marginLeft: "var(--box-11)" } }, - { selector: "ml-12", declarations: { marginLeft: "var(--box-12)" } }, { selector: "ml-12", declarations: { marginLeft: "var(--box-12)" } }, { selector: "ml-13", declarations: { marginLeft: "var(--box-13)" } }, - { selector: "ml-13", declarations: { marginLeft: "var(--box-13)" } }, { selector: "ml-14", declarations: { marginLeft: "var(--box-14)" } }, - { selector: "ml-14", declarations: { marginLeft: "var(--box-14)" } }, - { selector: "ml-15", declarations: { marginLeft: "var(--box-15)" } }, { selector: "ml-15", declarations: { marginLeft: "var(--box-15)" } }, { selector: "ml-16", declarations: { marginLeft: "var(--box-16)" } }, { selector: "ml-24", declarations: { marginLeft: "var(--box-24)" } }, @@ -83,6 +71,7 @@ export const MARGIN: Array = [ { selector: "ml-48", declarations: { marginLeft: "var(--box-48)" } }, { selector: "mt-0", declarations: { marginTop: "0" } }, + { selector: "mt-px", declarations: { marginTop: "var(--box-px)" } }, { selector: "mt-1", declarations: { marginTop: "var(--box-1)" } }, { selector: "mt-2", declarations: { marginTop: "var(--box-2)" } }, { selector: "mt-3", declarations: { marginTop: "var(--box-3)" } }, @@ -94,14 +83,9 @@ export const MARGIN: Array = [ { selector: "mt-9", declarations: { marginTop: "var(--box-9)" } }, { selector: "mt-10", declarations: { marginTop: "var(--box-10)" } }, { selector: "mt-11", declarations: { marginTop: "var(--box-11)" } }, - { selector: "mt-11", declarations: { marginTop: "var(--box-11)" } }, { selector: "mt-12", declarations: { marginTop: "var(--box-12)" } }, - { selector: "mt-12", declarations: { marginTop: "var(--box-12)" } }, - { selector: "mt-13", declarations: { marginTop: "var(--box-13)" } }, { selector: "mt-13", declarations: { marginTop: "var(--box-13)" } }, { selector: "mt-14", declarations: { marginTop: "var(--box-14)" } }, - { selector: "mt-14", declarations: { marginTop: "var(--box-14)" } }, - { selector: "mt-15", declarations: { marginTop: "var(--box-15)" } }, { selector: "mt-15", declarations: { marginTop: "var(--box-15)" } }, { selector: "mt-16", declarations: { marginTop: "var(--box-16)" } }, { selector: "mt-24", declarations: { marginTop: "var(--box-24)" } }, @@ -110,6 +94,7 @@ export const MARGIN: Array = [ { selector: "mt-48", declarations: { marginTop: "var(--box-48)" } }, { selector: "mb-0", declarations: { marginBottom: "0" } }, + { selector: "mb-px", declarations: { marginBottom: "var(--box-px)" } }, { selector: "mb-1", declarations: { marginBottom: "var(--box-1)" } }, { selector: "mb-2", declarations: { marginBottom: "var(--box-2)" } }, { selector: "mb-3", declarations: { marginBottom: "var(--box-3)" } }, @@ -121,376 +106,61 @@ export const MARGIN: Array = [ { selector: "mb-9", declarations: { marginBottom: "var(--box-9)" } }, { selector: "mb-10", declarations: { marginBottom: "var(--box-10)" } }, { selector: "mb-11", declarations: { marginBottom: "var(--box-11)" } }, - { selector: "mb-11", declarations: { marginBottom: "var(--box-11)" } }, - { selector: "mb-12", declarations: { marginBottom: "var(--box-12)" } }, { selector: "mb-12", declarations: { marginBottom: "var(--box-12)" } }, { selector: "mb-13", declarations: { marginBottom: "var(--box-13)" } }, - { selector: "mb-13", declarations: { marginBottom: "var(--box-13)" } }, - { selector: "mb-14", declarations: { marginBottom: "var(--box-14)" } }, { selector: "mb-14", declarations: { marginBottom: "var(--box-14)" } }, { selector: "mb-15", declarations: { marginBottom: "var(--box-15)" } }, - { selector: "mb-15", declarations: { marginBottom: "var(--box-15)" } }, { selector: "mb-16", declarations: { marginBottom: "var(--box-16)" } }, { selector: "mb-24", declarations: { marginBottom: "var(--box-24)" } }, { selector: "mb-32", declarations: { marginBottom: "var(--box-32)" } }, { selector: "mb-40", declarations: { marginBottom: "var(--box-40)" } }, { selector: "mb-48", declarations: { marginBottom: "var(--box-48)" } }, + // intentionally more explicit than block/inline { selector: "my-0", declarations: { marginTop: "0", marginBottom: "0" } }, - { - selector: "my-1", - declarations: { - marginTop: "var(--box-1)", - marginBottom: "var(--box-1)", - }, - }, - { - selector: "my-2", - declarations: { - marginTop: "var(--box-2)", - marginBottom: "var(--box-2)", - }, - }, - { - selector: "my-3", - declarations: { - marginTop: "var(--box-3)", - marginBottom: "var(--box-3)", - }, - }, - { - selector: "my-4", - declarations: { - marginTop: "var(--box-4)", - marginBottom: "var(--box-4)", - }, - }, - { - selector: "my-5", - declarations: { - marginTop: "var(--box-5)", - marginBottom: "var(--box-5)", - }, - }, - { - selector: "my-6", - declarations: { - marginTop: "var(--box-6)", - marginBottom: "var(--box-6)", - }, - }, - { - selector: "my-7", - declarations: { - marginTop: "var(--box-7)", - marginBottom: "var(--box-7)", - }, - }, - { - selector: "my-8", - declarations: { - marginTop: "var(--box-8)", - marginBottom: "var(--box-8)", - }, - }, - { - selector: "my-9", - declarations: { - marginTop: "var(--box-9)", - marginBottom: "var(--box-9)", - }, - }, - { - selector: "my-10", - declarations: { - marginTop: "var(--box-10)", - marginBottom: "var(--box-10)", - }, - }, - { - selector: "my-11", - declarations: { - marginTop: "var(--box-11)", - marginBottom: "var(--box-11)", - }, - }, - { - selector: "my-11", - declarations: { - marginTop: "var(--box-11)", - marginBottom: "var(--box-11)", - }, - }, - { - selector: "my-12", - declarations: { - marginTop: "var(--box-12)", - marginBottom: "var(--box-12)", - }, - }, - { - selector: "my-12", - declarations: { - marginTop: "var(--box-12)", - marginBottom: "var(--box-12)", - }, - }, - { - selector: "my-13", - declarations: { - marginTop: "var(--box-13)", - marginBottom: "var(--box-13)", - }, - }, - { - selector: "my-13", - declarations: { - marginTop: "var(--box-13)", - marginBottom: "var(--box-13)", - }, - }, - { - selector: "my-14", - declarations: { - marginTop: "var(--box-14)", - marginBottom: "var(--box-14)", - }, - }, - { - selector: "my-14", - declarations: { - marginTop: "var(--box-14)", - marginBottom: "var(--box-14)", - }, - }, - { - selector: "my-15", - declarations: { - marginTop: "var(--box-15)", - marginBottom: "var(--box-15)", - }, - }, - { - selector: "my-15", - declarations: { - marginTop: "var(--box-15)", - marginBottom: "var(--box-15)", - }, - }, - { - selector: "my-16", - declarations: { - marginTop: "var(--box-16)", - marginBottom: "var(--box-16)", - }, - }, - { - selector: "my-24", - declarations: { - marginTop: "var(--box-24)", - marginBottom: "var(--box-24)", - }, - }, - { - selector: "my-32", - declarations: { - marginTop: "var(--box-32)", - marginBottom: "var(--box-32)", - }, - }, - { - selector: "my-40", - declarations: { - marginTop: "var(--box-40)", - marginBottom: "var(--box-40)", - }, - }, - { - selector: "my-48", - declarations: { - marginTop: "var(--box-48)", - marginBottom: "var(--box-48)", - }, - }, + { selector: "my-px", declarations: { marginTop: "var(--box-px)", marginBottom: "var(--box-px)" } }, + { selector: "my-1", declarations: { marginTop: "var(--box-1)", marginBottom: "var(--box-1)", }, }, + { selector: "my-2", declarations: { marginTop: "var(--box-2)", marginBottom: "var(--box-2)", }, }, + { selector: "my-3", declarations: { marginTop: "var(--box-3)", marginBottom: "var(--box-3)", }, }, + { selector: "my-4", declarations: { marginTop: "var(--box-4)", marginBottom: "var(--box-4)", }, }, + { selector: "my-5", declarations: { marginTop: "var(--box-5)", marginBottom: "var(--box-5)", }, }, + { selector: "my-6", declarations: { marginTop: "var(--box-6)", marginBottom: "var(--box-6)", }, }, + { selector: "my-7", declarations: { marginTop: "var(--box-7)", marginBottom: "var(--box-7)", }, }, + { selector: "my-8", declarations: { marginTop: "var(--box-8)", marginBottom: "var(--box-8)", }, }, + { selector: "my-9", declarations: { marginTop: "var(--box-9)", marginBottom: "var(--box-9)", }, }, + { selector: "my-10", declarations: { marginTop: "var(--box-10)", marginBottom: "var(--box-10)", }, }, + { selector: "my-11", declarations: { marginTop: "var(--box-11)", marginBottom: "var(--box-11)", }, }, + { selector: "my-12", declarations: { marginTop: "var(--box-12)", marginBottom: "var(--box-12)", }, }, + { selector: "my-13", declarations: { marginTop: "var(--box-13)", marginBottom: "var(--box-13)", }, }, + { selector: "my-14", declarations: { marginTop: "var(--box-14)", marginBottom: "var(--box-14)", }, }, + { selector: "my-15", declarations: { marginTop: "var(--box-15)", marginBottom: "var(--box-15)", }, }, + { selector: "my-16", declarations: { marginTop: "var(--box-16)", marginBottom: "var(--box-16)", }, }, + { selector: "my-24", declarations: { marginTop: "var(--box-24)", marginBottom: "var(--box-24)", }, }, + { selector: "my-32", declarations: { marginTop: "var(--box-32)", marginBottom: "var(--box-32)", }, }, + { selector: "my-40", declarations: { marginTop: "var(--box-40)", marginBottom: "var(--box-40)", }, }, + { selector: "my-48", declarations: { marginTop: "var(--box-48)", marginBottom: "var(--box-48)", }, }, - { - selector: "mx-auto", - declarations: { marginLeft: "auto", marginRight: "auto" }, - }, + { selector: "mx-auto", declarations: { marginLeft: "auto", marginRight: "auto" }, }, { selector: "mx-0", declarations: { marginLeft: "0", marginRight: "0" } }, - { - selector: "mx-1", - declarations: { - marginLeft: "var(--box-1)", - marginRight: "var(--box-1)", - }, - }, - { - selector: "mx-2", - declarations: { - marginLeft: "var(--box-2)", - marginRight: "var(--box-2)", - }, - }, - { - selector: "mx-3", - declarations: { - marginLeft: "var(--box-3)", - marginRight: "var(--box-3)", - }, - }, - { - selector: "mx-4", - declarations: { - marginLeft: "var(--box-4)", - marginRight: "var(--box-4)", - }, - }, - { - selector: "mx-5", - declarations: { - marginLeft: "var(--box-5)", - marginRight: "var(--box-5)", - }, - }, - { - selector: "mx-6", - declarations: { - marginLeft: "var(--box-6)", - marginRight: "var(--box-6)", - }, - }, - { - selector: "mx-7", - declarations: { - marginLeft: "var(--box-7)", - marginRight: "var(--box-7)", - }, - }, - { - selector: "mx-8", - declarations: { - marginLeft: "var(--box-8)", - marginRight: "var(--box-8)", - }, - }, - { - selector: "mx-9", - declarations: { - marginLeft: "var(--box-9)", - marginRight: "var(--box-9)", - }, - }, - { - selector: "mx-10", - declarations: { - marginLeft: "var(--box-10)", - marginRight: "var(--box-10)", - }, - }, - { - selector: "mx-11", - declarations: { - marginLeft: "var(--box-11)", - marginRight: "var(--box-11)", - }, - }, - { - selector: "mx-11", - declarations: { - marginLeft: "var(--box-11)", - marginRight: "var(--box-11)", - }, - }, - { - selector: "mx-12", - declarations: { - marginLeft: "var(--box-12)", - marginRight: "var(--box-12)", - }, - }, - { - selector: "mx-12", - declarations: { - marginLeft: "var(--box-12)", - marginRight: "var(--box-12)", - }, - }, - { - selector: "mx-13", - declarations: { - marginLeft: "var(--box-13)", - marginRight: "var(--box-13)", - }, - }, - { - selector: "mx-13", - declarations: { - marginLeft: "var(--box-13)", - marginRight: "var(--box-13)", - }, - }, - { - selector: "mx-14", - declarations: { - marginLeft: "var(--box-14)", - marginRight: "var(--box-14)", - }, - }, - { - selector: "mx-14", - declarations: { - marginLeft: "var(--box-14)", - marginRight: "var(--box-14)", - }, - }, - { - selector: "mx-15", - declarations: { - marginLeft: "var(--box-15)", - marginRight: "var(--box-15)", - }, - }, - { - selector: "mx-15", - declarations: { - marginLeft: "var(--box-15)", - marginRight: "var(--box-15)", - }, - }, - { - selector: "mx-16", - declarations: { - marginLeft: "var(--box-16)", - marginRight: "var(--box-16)", - }, - }, - { - selector: "mx-24", - declarations: { - marginLeft: "var(--box-24)", - marginRight: "var(--box-24)", - }, - }, - { - selector: "mx-32", - declarations: { - marginLeft: "var(--box-32)", - marginRight: "var(--box-32)", - }, - }, - { - selector: "mx-40", - declarations: { - marginLeft: "var(--box-40)", - marginRight: "var(--box-40)", - }, - }, - { - selector: "mx-48", - declarations: { - marginLeft: "var(--box-48)", - marginRight: "var(--box-48)", - }, - }, + { selector: "mx-px", declarations: { marginLeft: "var(--box-px)", marginRight: "var(--box-px)" } }, + { selector: "mx-1", declarations: { marginLeft: "var(--box-1)", marginRight: "var(--box-1)", }, }, + { selector: "mx-2", declarations: { marginLeft: "var(--box-2)", marginRight: "var(--box-2)", }, }, + { selector: "mx-3", declarations: { marginLeft: "var(--box-3)", marginRight: "var(--box-3)", }, }, + { selector: "mx-4", declarations: { marginLeft: "var(--box-4)", marginRight: "var(--box-4)", }, }, + { selector: "mx-5", declarations: { marginLeft: "var(--box-5)", marginRight: "var(--box-5)", }, }, + { selector: "mx-6", declarations: { marginLeft: "var(--box-6)", marginRight: "var(--box-6)", }, }, + { selector: "mx-7", declarations: { marginLeft: "var(--box-7)", marginRight: "var(--box-7)", }, }, + { selector: "mx-8", declarations: { marginLeft: "var(--box-8)", marginRight: "var(--box-8)", }, }, + { selector: "mx-9", declarations: { marginLeft: "var(--box-9)", marginRight: "var(--box-9)", }, }, + { selector: "mx-10", declarations: { marginLeft: "var(--box-10)", marginRight: "var(--box-10)", }, }, + { selector: "mx-11", declarations: { marginLeft: "var(--box-11)", marginRight: "var(--box-11)", }, }, + { selector: "mx-12", declarations: { marginLeft: "var(--box-12)", marginRight: "var(--box-12)", }, }, + { selector: "mx-13", declarations: { marginLeft: "var(--box-13)", marginRight: "var(--box-13)", }, }, + { selector: "mx-14", declarations: { marginLeft: "var(--box-14)", marginRight: "var(--box-14)", }, }, + { selector: "mx-15", declarations: { marginLeft: "var(--box-15)", marginRight: "var(--box-15)", }, }, + { selector: "mx-16", declarations: { marginLeft: "var(--box-16)", marginRight: "var(--box-16)", }, }, + { selector: "mx-24", declarations: { marginLeft: "var(--box-24)", marginRight: "var(--box-24)", }, }, + { selector: "mx-32", declarations: { marginLeft: "var(--box-32)", marginRight: "var(--box-32)", }, }, + { selector: "mx-40", declarations: { marginLeft: "var(--box-40)", marginRight: "var(--box-40)", }, }, + { selector: "mx-48", declarations: { marginLeft: "var(--box-48)", marginRight: "var(--box-48)", }, }, ] as const diff --git a/packages/fractures/src/rules/padding.ts b/packages/fractures/src/rules/padding.ts index de6cc72..cce57da 100644 --- a/packages/fractures/src/rules/padding.ts +++ b/packages/fractures/src/rules/padding.ts @@ -2,6 +2,7 @@ import type { FractureRuleType } from "../types/meta" export const PADDING: Array = [ { selector: "p-0", declarations: { padding: "0" } }, + { selector: "p-px", declarations: { padding: "var(--box-px)" } }, { selector: "p-1", declarations: { padding: "var(--box-1)" } }, { selector: "p-2", declarations: { padding: "var(--box-2)" } }, { selector: "p-3", declarations: { padding: "var(--box-3)" } }, @@ -13,15 +14,10 @@ export const PADDING: Array = [ { selector: "p-9", declarations: { padding: "var(--box-9)" } }, { selector: "p-10", declarations: { padding: "var(--box-10)" } }, { selector: "p-11", declarations: { padding: "var(--box-11)" } }, - { selector: "p-11", declarations: { padding: "var(--box-11)" } }, - { selector: "p-12", declarations: { padding: "var(--box-12)" } }, { selector: "p-12", declarations: { padding: "var(--box-12)" } }, { selector: "p-13", declarations: { padding: "var(--box-13)" } }, - { selector: "p-13", declarations: { padding: "var(--box-13)" } }, - { selector: "p-14", declarations: { padding: "var(--box-14)" } }, { selector: "p-14", declarations: { padding: "var(--box-14)" } }, { selector: "p-15", declarations: { padding: "var(--box-15)" } }, - { selector: "p-15", declarations: { padding: "var(--box-15)" } }, { selector: "p-16", declarations: { padding: "var(--box-16)" } }, { selector: "p-24", declarations: { padding: "var(--box-24)" } }, { selector: "p-32", declarations: { padding: "var(--box-32)" } }, @@ -29,6 +25,7 @@ export const PADDING: Array = [ { selector: "p-48", declarations: { padding: "var(--box-48)" } }, { selector: "pr-0", declarations: { paddingRight: "0" } }, + { selector: "pr-px", declarations: { paddingRight: "var(--box-px)" } }, { selector: "pr-1", declarations: { paddingRight: "var(--box-1)" } }, { selector: "pr-2", declarations: { paddingRight: "var(--box-2)" } }, { selector: "pr-3", declarations: { paddingRight: "var(--box-3)" } }, @@ -40,15 +37,10 @@ export const PADDING: Array = [ { selector: "pr-9", declarations: { paddingRight: "var(--box-9)" } }, { selector: "pr-10", declarations: { paddingRight: "var(--box-10)" } }, { selector: "pr-11", declarations: { paddingRight: "var(--box-11)" } }, - { selector: "pr-11", declarations: { paddingRight: "var(--box-11)" } }, - { selector: "pr-12", declarations: { paddingRight: "var(--box-12)" } }, { selector: "pr-12", declarations: { paddingRight: "var(--box-12)" } }, { selector: "pr-13", declarations: { paddingRight: "var(--box-13)" } }, - { selector: "pr-13", declarations: { paddingRight: "var(--box-13)" } }, - { selector: "pr-14", declarations: { paddingRight: "var(--box-14)" } }, { selector: "pr-14", declarations: { paddingRight: "var(--box-14)" } }, { selector: "pr-15", declarations: { paddingRight: "var(--box-15)" } }, - { selector: "pr-15", declarations: { paddingRight: "var(--box-15)" } }, { selector: "pr-16", declarations: { paddingRight: "var(--box-16)" } }, { selector: "pr-24", declarations: { paddingRight: "var(--box-24)" } }, { selector: "pr-32", declarations: { paddingRight: "var(--box-32)" } }, @@ -56,6 +48,7 @@ export const PADDING: Array = [ { selector: "pr-48", declarations: { paddingRight: "var(--box-48)" } }, { selector: "pl-0", declarations: { paddingLeft: "0" } }, + { selector: "pl-px", declarations: { paddingLeft: "var(--box-px)" } }, { selector: "pl-1", declarations: { paddingLeft: "var(--box-1)" } }, { selector: "pl-2", declarations: { paddingLeft: "var(--box-2)" } }, { selector: "pl-3", declarations: { paddingLeft: "var(--box-3)" } }, @@ -67,14 +60,9 @@ export const PADDING: Array = [ { selector: "pl-9", declarations: { paddingLeft: "var(--box-9)" } }, { selector: "pl-10", declarations: { paddingLeft: "var(--box-10)" } }, { selector: "pl-11", declarations: { paddingLeft: "var(--box-11)" } }, - { selector: "pl-11", declarations: { paddingLeft: "var(--box-11)" } }, - { selector: "pl-12", declarations: { paddingLeft: "var(--box-12)" } }, { selector: "pl-12", declarations: { paddingLeft: "var(--box-12)" } }, { selector: "pl-13", declarations: { paddingLeft: "var(--box-13)" } }, - { selector: "pl-13", declarations: { paddingLeft: "var(--box-13)" } }, { selector: "pl-14", declarations: { paddingLeft: "var(--box-14)" } }, - { selector: "pl-14", declarations: { paddingLeft: "var(--box-14)" } }, - { selector: "pl-15", declarations: { paddingLeft: "var(--box-15)" } }, { selector: "pl-15", declarations: { paddingLeft: "var(--box-15)" } }, { selector: "pl-16", declarations: { paddingLeft: "var(--box-16)" } }, { selector: "pl-24", declarations: { paddingLeft: "var(--box-24)" } }, @@ -83,6 +71,7 @@ export const PADDING: Array = [ { selector: "pl-48", declarations: { paddingLeft: "var(--box-48)" } }, { selector: "pt-0", declarations: { paddingTop: "0" } }, + { selector: "pt-px", declarations: { paddingTop: "var(--box-px)" } }, { selector: "pt-1", declarations: { paddingTop: "var(--box-1)" } }, { selector: "pt-2", declarations: { paddingTop: "var(--box-2)" } }, { selector: "pt-3", declarations: { paddingTop: "var(--box-3)" } }, @@ -94,14 +83,9 @@ export const PADDING: Array = [ { selector: "pt-9", declarations: { paddingTop: "var(--box-9)" } }, { selector: "pt-10", declarations: { paddingTop: "var(--box-10)" } }, { selector: "pt-11", declarations: { paddingTop: "var(--box-11)" } }, - { selector: "pt-11", declarations: { paddingTop: "var(--box-11)" } }, { selector: "pt-12", declarations: { paddingTop: "var(--box-12)" } }, - { selector: "pt-12", declarations: { paddingTop: "var(--box-12)" } }, - { selector: "pt-13", declarations: { paddingTop: "var(--box-13)" } }, { selector: "pt-13", declarations: { paddingTop: "var(--box-13)" } }, { selector: "pt-14", declarations: { paddingTop: "var(--box-14)" } }, - { selector: "pt-14", declarations: { paddingTop: "var(--box-14)" } }, - { selector: "pt-15", declarations: { paddingTop: "var(--box-15)" } }, { selector: "pt-15", declarations: { paddingTop: "var(--box-15)" } }, { selector: "pt-16", declarations: { paddingTop: "var(--box-16)" } }, { selector: "pt-24", declarations: { paddingTop: "var(--box-24)" } }, @@ -110,6 +94,7 @@ export const PADDING: Array = [ { selector: "pt-48", declarations: { paddingTop: "var(--box-48)" } }, { selector: "pb-0", declarations: { paddingBottom: "0" } }, + { selector: "pb-px", declarations: { paddingBottom: "var(--box-px)" } }, { selector: "pb-1", declarations: { paddingBottom: "var(--box-1)" } }, { selector: "pb-2", declarations: { paddingBottom: "var(--box-2)" } }, { selector: "pb-3", declarations: { paddingBottom: "var(--box-3)" } }, @@ -121,372 +106,60 @@ export const PADDING: Array = [ { selector: "pb-9", declarations: { paddingBottom: "var(--box-9)" } }, { selector: "pb-10", declarations: { paddingBottom: "var(--box-10)" } }, { selector: "pb-11", declarations: { paddingBottom: "var(--box-11)" } }, - { selector: "pb-11", declarations: { paddingBottom: "var(--box-11)" } }, - { selector: "pb-12", declarations: { paddingBottom: "var(--box-12)" } }, { selector: "pb-12", declarations: { paddingBottom: "var(--box-12)" } }, { selector: "pb-13", declarations: { paddingBottom: "var(--box-13)" } }, - { selector: "pb-13", declarations: { paddingBottom: "var(--box-13)" } }, - { selector: "pb-14", declarations: { paddingBottom: "var(--box-14)" } }, { selector: "pb-14", declarations: { paddingBottom: "var(--box-14)" } }, { selector: "pb-15", declarations: { paddingBottom: "var(--box-15)" } }, - { selector: "pb-15", declarations: { paddingBottom: "var(--box-15)" } }, { selector: "pb-16", declarations: { paddingBottom: "var(--box-16)" } }, { selector: "pb-24", declarations: { paddingBottom: "var(--box-24)" } }, { selector: "pb-32", declarations: { paddingBottom: "var(--box-32)" } }, { selector: "pb-40", declarations: { paddingBottom: "var(--box-40)" } }, { selector: "pb-48", declarations: { paddingBottom: "var(--box-48)" } }, + // intentionally more explicit than block/inline { selector: "py-0", declarations: { paddingBottom: "0", paddingTop: "0" } }, - { - selector: "py-1", - declarations: { - paddingBottom: "var(--box-1)", - paddingTop: "var(--box-1)", - }, - }, - { - selector: "py-2", - declarations: { - paddingBottom: "var(--box-2)", - paddingTop: "var(--box-2)", - }, - }, - { - selector: "py-3", - declarations: { - paddingBottom: "var(--box-3)", - paddingTop: "var(--box-3)", - }, - }, - { - selector: "py-4", - declarations: { - paddingBottom: "var(--box-4)", - paddingTop: "var(--box-4)", - }, - }, - { - selector: "py-5", - declarations: { - paddingBottom: "var(--box-5)", - paddingTop: "var(--box-5)", - }, - }, - { - selector: "py-6", - declarations: { - paddingBottom: "var(--box-6)", - paddingTop: "var(--box-6)", - }, - }, - { - selector: "py-7", - declarations: { - paddingBottom: "var(--box-7)", - paddingTop: "var(--box-7)", - }, - }, - { - selector: "py-8", - declarations: { - paddingBottom: "var(--box-8)", - paddingTop: "var(--box-8)", - }, - }, - { - selector: "py-9", - declarations: { - paddingBottom: "var(--box-9)", - paddingTop: "var(--box-9)", - }, - }, - { - selector: "py-10", - declarations: { - paddingBottom: "var(--box-10)", - paddingTop: "var(--box-10)", - }, - }, - { - selector: "py-11", - declarations: { - paddingBottom: "var(--box-11)", - paddingTop: "var(--box-11)", - }, - }, - { - selector: "py-11", - declarations: { - paddingBottom: "var(--box-11)", - paddingTop: "var(--box-11)", - }, - }, - { - selector: "py-12", - declarations: { - paddingBottom: "var(--box-12)", - paddingTop: "var(--box-12)", - }, - }, - { - selector: "py-12", - declarations: { - paddingBottom: "var(--box-12)", - paddingTop: "var(--box-12)", - }, - }, - { - selector: "py-13", - declarations: { - paddingBottom: "var(--box-13)", - paddingTop: "var(--box-13)", - }, - }, - { - selector: "py-13", - declarations: { - paddingBottom: "var(--box-13)", - paddingTop: "var(--box-13)", - }, - }, - { - selector: "py-14", - declarations: { - paddingBottom: "var(--box-14)", - paddingTop: "var(--box-14)", - }, - }, - { - selector: "py-14", - declarations: { - paddingBottom: "var(--box-14)", - paddingTop: "var(--box-14)", - }, - }, - { - selector: "py-15", - declarations: { - paddingBottom: "var(--box-15)", - paddingTop: "var(--box-15)", - }, - }, - { - selector: "py-15", - declarations: { - paddingBottom: "var(--box-15)", - paddingTop: "var(--box-15)", - }, - }, - { - selector: "py-16", - declarations: { - paddingBottom: "var(--box-16)", - paddingTop: "var(--box-16)", - }, - }, - { - selector: "py-24", - declarations: { - paddingBottom: "var(--box-24)", - paddingTop: "var(--box-24)", - }, - }, - { - selector: "py-32", - declarations: { - paddingBottom: "var(--box-32)", - paddingTop: "var(--box-32)", - }, - }, - { - selector: "py-40", - declarations: { - paddingBottom: "var(--box-40)", - paddingTop: "var(--box-40)", - }, - }, - { - selector: "py-48", - declarations: { - paddingBottom: "var(--box-48)", - paddingTop: "var(--box-48)", - }, - }, + { selector: "py-px", declarations: { paddingBottom: "var(--box-px)", paddingTop: "var(--box-px)", }, }, + { selector: "py-1", declarations: { paddingBottom: "var(--box-1)", paddingTop: "var(--box-1)", }, }, + { selector: "py-2", declarations: { paddingBottom: "var(--box-2)", paddingTop: "var(--box-2)", }, }, + { selector: "py-3", declarations: { paddingBottom: "var(--box-3)", paddingTop: "var(--box-3)", }, }, + { selector: "py-4", declarations: { paddingBottom: "var(--box-4)", paddingTop: "var(--box-4)", }, }, + { selector: "py-5", declarations: { paddingBottom: "var(--box-5)", paddingTop: "var(--box-5)", }, }, + { selector: "py-6", declarations: { paddingBottom: "var(--box-6)", paddingTop: "var(--box-6)", }, }, + { selector: "py-7", declarations: { paddingBottom: "var(--box-7)", paddingTop: "var(--box-7)", }, }, + { selector: "py-8", declarations: { paddingBottom: "var(--box-8)", paddingTop: "var(--box-8)", }, }, + { selector: "py-9", declarations: { paddingBottom: "var(--box-9)", paddingTop: "var(--box-9)", }, }, + { selector: "py-10", declarations: { paddingBottom: "var(--box-10)", paddingTop: "var(--box-10)", }, }, + { selector: "py-11", declarations: { paddingBottom: "var(--box-11)", paddingTop: "var(--box-11)", }, }, + { selector: "py-12", declarations: { paddingBottom: "var(--box-12)", paddingTop: "var(--box-12)", }, }, + { selector: "py-13", declarations: { paddingBottom: "var(--box-13)", paddingTop: "var(--box-13)", }, }, + { selector: "py-14", declarations: { paddingBottom: "var(--box-14)", paddingTop: "var(--box-14)", }, }, + { selector: "py-15", declarations: { paddingBottom: "var(--box-15)", paddingTop: "var(--box-15)", }, }, + { selector: "py-16", declarations: { paddingBottom: "var(--box-16)", paddingTop: "var(--box-16)", }, }, + { selector: "py-24", declarations: { paddingBottom: "var(--box-24)", paddingTop: "var(--box-24)", }, }, + { selector: "py-32", declarations: { paddingBottom: "var(--box-32)", paddingTop: "var(--box-32)", }, }, + { selector: "py-40", declarations: { paddingBottom: "var(--box-40)", paddingTop: "var(--box-40)", }, }, + { selector: "py-48", declarations: { paddingBottom: "var(--box-48)", paddingTop: "var(--box-48)", }, }, { selector: "px-0", declarations: { paddingLeft: "0", paddingRight: "0" } }, - { - selector: "px-1", - declarations: { - paddingLeft: "var(--box-1)", - paddingRight: "var(--box-1)", - }, - }, - { - selector: "px-2", - declarations: { - paddingLeft: "var(--box-2)", - paddingRight: "var(--box-2)", - }, - }, - { - selector: "px-3", - declarations: { - paddingLeft: "var(--box-3)", - paddingRight: "var(--box-3)", - }, - }, - { - selector: "px-4", - declarations: { - paddingLeft: "var(--box-4)", - paddingRight: "var(--box-4)", - }, - }, - { - selector: "px-5", - declarations: { - paddingLeft: "var(--box-5)", - paddingRight: "var(--box-5)", - }, - }, - { - selector: "px-6", - declarations: { - paddingLeft: "var(--box-6)", - paddingRight: "var(--box-6)", - }, - }, - { - selector: "px-7", - declarations: { - paddingLeft: "var(--box-7)", - paddingRight: "var(--box-7)", - }, - }, - { - selector: "px-8", - declarations: { - paddingLeft: "var(--box-8)", - paddingRight: "var(--box-8)", - }, - }, - { - selector: "px-9", - declarations: { - paddingLeft: "var(--box-9)", - paddingRight: "var(--box-9)", - }, - }, - { - selector: "px-10", - declarations: { - paddingLeft: "var(--box-10)", - paddingRight: "var(--box-10)", - }, - }, - { - selector: "px-11", - declarations: { - paddingLeft: "var(--box-11)", - paddingRight: "var(--box-11)", - }, - }, - { - selector: "px-11", - declarations: { - paddingLeft: "var(--box-11)", - paddingRight: "var(--box-11)", - }, - }, - { - selector: "px-12", - declarations: { - paddingLeft: "var(--box-12)", - paddingRight: "var(--box-12)", - }, - }, - { - selector: "px-12", - declarations: { - paddingLeft: "var(--box-12)", - paddingRight: "var(--box-12)", - }, - }, - { - selector: "px-13", - declarations: { - paddingLeft: "var(--box-13)", - paddingRight: "var(--box-13)", - }, - }, - { - selector: "px-13", - declarations: { - paddingLeft: "var(--box-13)", - paddingRight: "var(--box-13)", - }, - }, - { - selector: "px-14", - declarations: { - paddingLeft: "var(--box-14)", - paddingRight: "var(--box-14)", - }, - }, - { - selector: "px-14", - declarations: { - paddingLeft: "var(--box-14)", - paddingRight: "var(--box-14)", - }, - }, - { - selector: "px-15", - declarations: { - paddingLeft: "var(--box-15)", - paddingRight: "var(--box-15)", - }, - }, - { - selector: "px-15", - declarations: { - paddingLeft: "var(--box-15)", - paddingRight: "var(--box-15)", - }, - }, - { - selector: "px-16", - declarations: { - paddingLeft: "var(--box-16)", - paddingRight: "var(--box-16)", - }, - }, - { - selector: "px-24", - declarations: { - paddingLeft: "var(--box-24)", - paddingRight: "var(--box-24)", - }, - }, - { - selector: "px-32", - declarations: { - paddingLeft: "var(--box-32)", - paddingRight: "var(--box-32)", - }, - }, - { - selector: "px-40", - declarations: { - paddingLeft: "var(--box-40)", - paddingRight: "var(--box-40)", - }, - }, - { - selector: "px-48", - declarations: { - paddingLeft: "var(--box-48)", - paddingRight: "var(--box-48)", - }, - }, + { selector: "px-px", declarations: { paddingLeft: "var(--box-px)", paddingRight: "var(--box-px)", }, }, + { selector: "px-1", declarations: { paddingLeft: "var(--box-1)", paddingRight: "var(--box-1)", }, }, + { selector: "px-2", declarations: { paddingLeft: "var(--box-2)", paddingRight: "var(--box-2)", }, }, + { selector: "px-3", declarations: { paddingLeft: "var(--box-3)", paddingRight: "var(--box-3)", }, }, + { selector: "px-4", declarations: { paddingLeft: "var(--box-4)", paddingRight: "var(--box-4)", }, }, + { selector: "px-5", declarations: { paddingLeft: "var(--box-5)", paddingRight: "var(--box-5)", }, }, + { selector: "px-6", declarations: { paddingLeft: "var(--box-6)", paddingRight: "var(--box-6)", }, }, + { selector: "px-7", declarations: { paddingLeft: "var(--box-7)", paddingRight: "var(--box-7)", }, }, + { selector: "px-8", declarations: { paddingLeft: "var(--box-8)", paddingRight: "var(--box-8)", }, }, + { selector: "px-9", declarations: { paddingLeft: "var(--box-9)", paddingRight: "var(--box-9)", }, }, + { selector: "px-10", declarations: { paddingLeft: "var(--box-10)", paddingRight: "var(--box-10)", }, }, + { selector: "px-11", declarations: { paddingLeft: "var(--box-11)", paddingRight: "var(--box-11)", }, }, + { selector: "px-12", declarations: { paddingLeft: "var(--box-12)", paddingRight: "var(--box-12)", }, }, + { selector: "px-13", declarations: { paddingLeft: "var(--box-13)", paddingRight: "var(--box-13)", }, }, + { selector: "px-14", declarations: { paddingLeft: "var(--box-14)", paddingRight: "var(--box-14)", }, }, + { selector: "px-15", declarations: { paddingLeft: "var(--box-15)", paddingRight: "var(--box-15)", }, }, + { selector: "px-16", declarations: { paddingLeft: "var(--box-16)", paddingRight: "var(--box-16)", }, }, + { selector: "px-24", declarations: { paddingLeft: "var(--box-24)", paddingRight: "var(--box-24)", }, }, + { selector: "px-32", declarations: { paddingLeft: "var(--box-32)", paddingRight: "var(--box-32)", }, }, + { selector: "px-40", declarations: { paddingLeft: "var(--box-40)", paddingRight: "var(--box-40)", }, }, + { selector: "px-48", declarations: { paddingLeft: "var(--box-48)", paddingRight: "var(--box-48)", }, }, ] as const diff --git a/packages/fractures/src/rules/width.ts b/packages/fractures/src/rules/width.ts index 2c040ad..2ec97f3 100644 --- a/packages/fractures/src/rules/width.ts +++ b/packages/fractures/src/rules/width.ts @@ -3,6 +3,7 @@ import type { FractureRuleType } from "../types/meta" export const WIDTH: Array = [ { selector: "w-0", declarations: { width: "0" } }, { selector: "w-viewport", declarations: { width: "100vw" } }, + { selector: "w-px", declarations: { width: "var(--box-px)" } }, { selector: "w-1", declarations: { width: "var(--box-1)" } }, { selector: "w-2", declarations: { width: "var(--box-2)" } }, { selector: "w-3", declarations: { width: "var(--box-3)" } },