@heliosgraphics/css 1.0.0-alpha.3

package/src/rules/grid.ts

@@ -0,0 +1,272 @@
+import type { FractureRuleType } from "../types/meta"
+
+export const GRID: Array<FractureRuleType> = [
+	{ selector: "grid-gap-px", declarations: { gridGap: "var(--space-px)" } },
+	{ selector: "grid-gap-1", declarations: { gridGap: "var(--space-1)" } },
+	{ selector: "grid-gap-2", declarations: { gridGap: "var(--space-2)" } },
+	{ selector: "grid-gap-3", declarations: { gridGap: "var(--space-3)" } },
+	{ selector: "grid-gap-4", declarations: { gridGap: "var(--space-4)" } },
+	{ selector: "grid-gap-5", declarations: { gridGap: "var(--space-5)" } },
+	{ selector: "grid-gap-6", declarations: { gridGap: "var(--space-6)" } },
+	{ selector: "grid-gap-7", declarations: { gridGap: "var(--space-7)" } },
+	{ selector: "grid-gap-8", declarations: { gridGap: "var(--space-8)" } },
+	{ selector: "grid-gap-9", declarations: { gridGap: "var(--space-9)" } },
+	{ selector: "grid-gap-10", declarations: { gridGap: "var(--space-10)" } },
+	{ selector: "grid-gap-11", declarations: { gridGap: "var(--space-11)" } },
+	{ selector: "grid-gap-12", declarations: { gridGap: "var(--space-12)" } },
+	{ selector: "grid-gap-13", declarations: { gridGap: "var(--space-13)" } },
+	{ selector: "grid-gap-14", declarations: { gridGap: "var(--space-14)" } },
+	{ selector: "grid-gap-15", declarations: { gridGap: "var(--space-15)" } },
+	{ selector: "grid-gap-16", declarations: { gridGap: "var(--space-16)" } },
+	{ selector: "grid-gap-24", declarations: { gridGap: "var(--space-24)" } },
+	{ selector: "grid-gap-32", declarations: { gridGap: "var(--space-32)" } },
+	{ selector: "grid-gap-40", declarations: { gridGap: "var(--space-40)" } },
+	{ selector: "grid-gap-48", declarations: { gridGap: "var(--space-48)" } },
+
+	{
+		selector: "grid-gap-x-px",
+		declarations: { gridRowGap: "var(--space-px)" },
+	},
+	{ selector: "grid-gap-x-1", declarations: { gridRowGap: "var(--space-1)" } },
+	{ selector: "grid-gap-x-2", declarations: { gridRowGap: "var(--space-2)" } },
+	{ selector: "grid-gap-x-3", declarations: { gridRowGap: "var(--space-3)" } },
+	{ selector: "grid-gap-x-4", declarations: { gridRowGap: "var(--space-4)" } },
+	{ selector: "grid-gap-x-5", declarations: { gridRowGap: "var(--space-5)" } },
+	{ selector: "grid-gap-x-6", declarations: { gridRowGap: "var(--space-6)" } },
+	{ selector: "grid-gap-x-7", declarations: { gridRowGap: "var(--space-7)" } },
+	{ selector: "grid-gap-x-8", declarations: { gridRowGap: "var(--space-8)" } },
+	{ selector: "grid-gap-x-9", declarations: { gridRowGap: "var(--space-9)" } },
+	{
+		selector: "grid-gap-x-10",
+		declarations: { gridRowGap: "var(--space-10)" },
+	},
+	{
+		selector: "grid-gap-x-11",
+		declarations: { gridRowGap: "var(--space-11)" },
+	},
+	{
+		selector: "grid-gap-x-12",
+		declarations: { gridRowGap: "var(--space-12)" },
+	},
+	{
+		selector: "grid-gap-x-13",
+		declarations: { gridRowGap: "var(--space-13)" },
+	},
+	{
+		selector: "grid-gap-x-14",
+		declarations: { gridRowGap: "var(--space-14)" },
+	},
+	{
+		selector: "grid-gap-x-15",
+		declarations: { gridRowGap: "var(--space-15)" },
+	},
+	{
+		selector: "grid-gap-x-16",
+		declarations: { gridRowGap: "var(--space-16)" },
+	},
+	{
+		selector: "grid-gap-x-24",
+		declarations: { gridRowGap: "var(--space-24)" },
+	},
+	{
+		selector: "grid-gap-x-32",
+		declarations: { gridRowGap: "var(--space-32)" },
+	},
+	{
+		selector: "grid-gap-x-40",
+		declarations: { gridRowGap: "var(--space-40)" },
+	},
+	{
+		selector: "grid-gap-x-48",
+		declarations: { gridRowGap: "var(--space-48)" },
+	},
+
+	{
+		selector: "grid-gap-y-px",
+		declarations: { gridColumnGap: "var(--space-px)" },
+	},
+	{
+		selector: "grid-gap-y-1",
+		declarations: { gridColumnGap: "var(--space-1)" },
+	},
+	{
+		selector: "grid-gap-y-2",
+		declarations: { gridColumnGap: "var(--space-2)" },
+	},
+	{
+		selector: "grid-gap-y-3",
+		declarations: { gridColumnGap: "var(--space-3)" },
+	},
+	{
+		selector: "grid-gap-y-4",
+		declarations: { gridColumnGap: "var(--space-4)" },
+	},
+	{
+		selector: "grid-gap-y-5",
+		declarations: { gridColumnGap: "var(--space-5)" },
+	},
+	{
+		selector: "grid-gap-y-6",
+		declarations: { gridColumnGap: "var(--space-6)" },
+	},
+	{
+		selector: "grid-gap-y-7",
+		declarations: { gridColumnGap: "var(--space-7)" },
+	},
+	{
+		selector: "grid-gap-y-8",
+		declarations: { gridColumnGap: "var(--space-8)" },
+	},
+	{
+		selector: "grid-gap-y-9",
+		declarations: { gridColumnGap: "var(--space-9)" },
+	},
+	{
+		selector: "grid-gap-y-10",
+		declarations: { gridColumnGap: "var(--space-10)" },
+	},
+	{
+		selector: "grid-gap-y-11",
+		declarations: { gridColumnGap: "var(--space-11)" },
+	},
+	{
+		selector: "grid-gap-y-12",
+		declarations: { gridColumnGap: "var(--space-12)" },
+	},
+	{
+		selector: "grid-gap-y-13",
+		declarations: { gridColumnGap: "var(--space-13)" },
+	},
+	{
+		selector: "grid-gap-y-14",
+		declarations: { gridColumnGap: "var(--space-14)" },
+	},
+	{
+		selector: "grid-gap-y-15",
+		declarations: { gridColumnGap: "var(--space-15)" },
+	},
+	{
+		selector: "grid-gap-y-16",
+		declarations: { gridColumnGap: "var(--space-16)" },
+	},
+	{
+		selector: "grid-gap-y-24",
+		declarations: { gridColumnGap: "var(--space-24)" },
+	},
+	{
+		selector: "grid-gap-y-32",
+		declarations: { gridColumnGap: "var(--space-32)" },
+	},
+	{
+		selector: "grid-gap-y-40",
+		declarations: { gridColumnGap: "var(--space-40)" },
+	},
+	{
+		selector: "grid-gap-y-48",
+		declarations: { gridColumnGap: "var(--space-48)" },
+	},
+
+	{ selector: "grid-dense-row", declarations: { gridAutoFlow: "row 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-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

package/src/rules/height.ts

@@ -0,0 +1,134 @@
+import type { FractureRuleType } from "../types/meta"
+
+export const HEIGHT: Array<FractureRuleType> = [
+	{ selector: "h-0", declarations: { height: 0 } },
+	{ selector: "h-viewport", declarations: { height: "100vh" } },
+	{ selector: "h-px", declarations: { height: "var(--space-px)" } },
+	{ selector: "h-1", declarations: { height: "var(--space-1)" } },
+	{ selector: "h-2", declarations: { height: "var(--space-2)" } },
+	{ selector: "h-3", declarations: { height: "var(--space-3)" } },
+	{ selector: "h-4", declarations: { height: "var(--space-4)" } },
+	{ selector: "h-5", declarations: { height: "var(--space-5)" } },
+	{ selector: "h-6", declarations: { height: "var(--space-6)" } },
+	{ selector: "h-7", declarations: { height: "var(--space-7)" } },
+	{ selector: "h-8", declarations: { height: "var(--space-8)" } },
+	{ selector: "h-9", declarations: { height: "var(--space-9)" } },
+	{ selector: "h-10", declarations: { height: "var(--space-10)" } },
+	{ selector: "h-11", declarations: { height: "var(--space-11)" } },
+	{ selector: "h-12", declarations: { height: "var(--space-12)" } },
+	{ selector: "h-13", declarations: { height: "var(--space-13)" } },
+	{ selector: "h-14", declarations: { height: "var(--space-14)" } },
+	{ selector: "h-15", declarations: { height: "var(--space-15)" } },
+	{ selector: "h-16", declarations: { height: "var(--space-16)" } },
+	{ selector: "h-24", declarations: { height: "var(--space-24)" } },
+	{ selector: "h-32", declarations: { height: "var(--space-32)" } },
+	{ selector: "h-40", declarations: { height: "var(--space-40)" } },
+	{ selector: "h-48", declarations: { height: "var(--space-48)" } },
+	{ selector: "hp-10", declarations: { height: "10%" } },
+	{ selector: "hp-15", declarations: { height: "15%" } },
+	{ selector: "hp-20", declarations: { height: "20%" } },
+	{ selector: "hp-25", declarations: { height: "25%" } },
+	{ selector: "hp-30", declarations: { height: "30%" } },
+	{ selector: "hp-33", declarations: { height: "calc(100%/3)" } },
+	{ selector: "hp-35", declarations: { height: "35%" } },
+	{ selector: "hp-40", declarations: { height: "40%" } },
+	{ selector: "hp-45", declarations: { height: "45%" } },
+	{ selector: "hp-50", declarations: { height: "50%" } },
+	{ selector: "hp-55", declarations: { height: "55%" } },
+	{ selector: "hp-60", declarations: { height: "60%" } },
+	{ selector: "hp-66", declarations: { height: "calc((100%/3)*2)" } },
+	{ selector: "hp-65", declarations: { height: "65%" } },
+	{ selector: "hp-70", declarations: { height: "70%" } },
+	{ selector: "hp-75", declarations: { height: "75%" } },
+	{ selector: "hp-80", declarations: { height: "80%" } },
+	{ selector: "hp-85", declarations: { height: "85%" } },
+	{ selector: "hp-90", declarations: { height: "90%" } },
+	{ selector: "hp-95", declarations: { height: "95%" } },
+	{ selector: "hp-100", declarations: { height: "100%" } },
+	{ selector: "hmax-0", declarations: { maxHeight: 0 } },
+	{ selector: "hmax-viewport", declarations: { maxHeight: "100vh" } },
+	{ selector: "hmax-1", declarations: { maxHeight: "var(--space-1)" } },
+	{ selector: "hmax-2", declarations: { maxHeight: "var(--space-2)" } },
+	{ selector: "hmax-3", declarations: { maxHeight: "var(--space-3)" } },
+	{ selector: "hmax-4", declarations: { maxHeight: "var(--space-4)" } },
+	{ selector: "hmax-5", declarations: { maxHeight: "var(--space-5)" } },
+	{ selector: "hmax-6", declarations: { maxHeight: "var(--space-6)" } },
+	{ selector: "hmax-7", declarations: { maxHeight: "var(--space-7)" } },
+	{ selector: "hmax-8", declarations: { maxHeight: "var(--space-8)" } },
+	{ selector: "hmax-9", declarations: { maxHeight: "var(--space-9)" } },
+	{ selector: "hmax-10", declarations: { maxHeight: "var(--space-10)" } },
+	{ selector: "hmax-11", declarations: { maxHeight: "var(--space-11)" } },
+	{ selector: "hmax-12", declarations: { maxHeight: "var(--space-12)" } },
+	{ selector: "hmax-13", declarations: { maxHeight: "var(--space-13)" } },
+	{ selector: "hmax-14", declarations: { maxHeight: "var(--space-14)" } },
+	{ selector: "hmax-15", declarations: { maxHeight: "var(--space-15)" } },
+	{ selector: "hmax-16", declarations: { maxHeight: "var(--space-16)" } },
+	{ selector: "hmax-24", declarations: { maxHeight: "var(--space-24)" } },
+	{ selector: "hmax-32", declarations: { maxHeight: "var(--space-32)" } },
+	{ selector: "hmax-40", declarations: { maxHeight: "var(--space-40)" } },
+	{ selector: "hmax-48", declarations: { maxHeight: "var(--space-48)" } },
+	{ selector: "hpmax-15", declarations: { maxHeight: "15%" } },
+	{ selector: "hpmax-10", declarations: { maxHeight: "10%" } },
+	{ selector: "hpmax-20", declarations: { maxHeight: "20%" } },
+	{ selector: "hpmax-25", declarations: { maxHeight: "25%" } },
+	{ selector: "hpmax-30", declarations: { maxHeight: "30%" } },
+	{ selector: "hpmax-33", declarations: { maxHeight: "calc(100%/3)" } },
+	{ selector: "hpmax-35", declarations: { maxHeight: "35%" } },
+	{ selector: "hpmax-40", declarations: { maxHeight: "40%" } },
+	{ selector: "hpmax-45", declarations: { maxHeight: "45%" } },
+	{ selector: "hpmax-50", declarations: { maxHeight: "50%" } },
+	{ selector: "hpmax-55", declarations: { maxHeight: "55%" } },
+	{ selector: "hpmax-60", declarations: { maxHeight: "60%" } },
+	{ selector: "hpmax-66", declarations: { maxHeight: "calc((100%/3)*2)" } },
+	{ selector: "hpmax-65", declarations: { maxHeight: "65%" } },
+	{ selector: "hpmax-70", declarations: { maxHeight: "70%" } },
+	{ selector: "hpmax-75", declarations: { maxHeight: "75%" } },
+	{ selector: "hpmax-80", declarations: { maxHeight: "80%" } },
+	{ selector: "hpmax-85", declarations: { maxHeight: "85%" } },
+	{ selector: "hpmax-90", declarations: { maxHeight: "90%" } },
+	{ selector: "hpmax-95", declarations: { maxHeight: "95%" } },
+	{ selector: "hpmax-100", declarations: { maxHeight: "100%" } },
+	{ selector: "hmin-0", declarations: { minHeight: 0 } },
+	{ selector: "hmin-viewport", declarations: { minHeight: "100vh" } },
+	{ selector: "hmin-1", declarations: { minHeight: "var(--space-1)" } },
+	{ selector: "hmin-2", declarations: { minHeight: "var(--space-2)" } },
+	{ selector: "hmin-3", declarations: { minHeight: "var(--space-3)" } },
+	{ selector: "hmin-4", declarations: { minHeight: "var(--space-4)" } },
+	{ selector: "hmin-5", declarations: { minHeight: "var(--space-5)" } },
+	{ selector: "hmin-6", declarations: { minHeight: "var(--space-6)" } },
+	{ selector: "hmin-7", declarations: { minHeight: "var(--space-7)" } },
+	{ selector: "hmin-8", declarations: { minHeight: "var(--space-8)" } },
+	{ selector: "hmin-9", declarations: { minHeight: "var(--space-9)" } },
+	{ selector: "hmin-10", declarations: { minHeight: "var(--space-10)" } },
+	{ selector: "hmin-11", declarations: { minHeight: "var(--space-11)" } },
+	{ selector: "hmin-12", declarations: { minHeight: "var(--space-12)" } },
+	{ selector: "hmin-13", declarations: { minHeight: "var(--space-13)" } },
+	{ selector: "hmin-14", declarations: { minHeight: "var(--space-14)" } },
+	{ selector: "hmin-15", declarations: { minHeight: "var(--space-15)" } },
+	{ selector: "hmin-16", declarations: { minHeight: "var(--space-16)" } },
+	{ selector: "hmin-24", declarations: { minHeight: "var(--space-24)" } },
+	{ selector: "hmin-32", declarations: { minHeight: "var(--space-32)" } },
+	{ selector: "hmin-40", declarations: { minHeight: "var(--space-40)" } },
+	{ selector: "hmin-48", declarations: { minHeight: "var(--space-48)" } },
+	{ selector: "hpmin-15", declarations: { minHeight: "15%" } },
+	{ selector: "hpmin-10", declarations: { minHeight: "10%" } },
+	{ selector: "hpmin-20", declarations: { minHeight: "20%" } },
+	{ selector: "hpmin-25", declarations: { minHeight: "25%" } },
+	{ selector: "hpmin-30", declarations: { minHeight: "30%" } },
+	{ selector: "hpmin-33", declarations: { minHeight: "calc(100%/3)" } },
+	{ selector: "hpmin-35", declarations: { minHeight: "35%" } },
+	{ selector: "hpmin-40", declarations: { minHeight: "40%" } },
+	{ selector: "hpmin-45", declarations: { minHeight: "45%" } },
+	{ selector: "hpmin-50", declarations: { minHeight: "50%" } },
+	{ selector: "hpmin-55", declarations: { minHeight: "55%" } },
+	{ selector: "hpmin-60", declarations: { minHeight: "60%" } },
+	{ selector: "hpmin-66", declarations: { minHeight: "calc((100%/3)*2)" } },
+	{ selector: "hpmin-65", declarations: { minHeight: "65%" } },
+	{ selector: "hpmin-70", declarations: { minHeight: "70%" } },
+	{ selector: "hpmin-75", declarations: { minHeight: "75%" } },
+	{ selector: "hpmin-80", declarations: { minHeight: "80%" } },
+	{ selector: "hpmin-85", declarations: { minHeight: "85%" } },
+	{ selector: "hpmin-90", declarations: { minHeight: "90%" } },
+	{ selector: "hpmin-95", declarations: { minHeight: "95%" } },
+	{ selector: "hpmin-100", declarations: { minHeight: "100%" } },
+] as const

package/src/rules/index.ts

@@ -0,0 +1,32 @@
+import { BORDER_RADIUS } from "./border-radius"
+import { CURSOR } from "./cursor"
+import { DISPLAY } from "./display"
+import { FLEX } from "./flex"
+import { GRID } from "./grid"
+import { HEIGHT } from "./height"
+import { LIST } from "./list"
+import { MARGIN } from "./margin"
+import { OPACITY } from "./opacity"
+import { OVERFLOW } from "./overflow"
+import { PADDING } from "./padding"
+import { POSITION } from "./position"
+import { TYPE } from "./type"
+import { WIDTH } from "./width"
+import type { FractureFiles } from "../types/meta"
+
+export const FRACTURE_FILES: FractureFiles = {
+	borderRadius: BORDER_RADIUS,
+	cursor: CURSOR,
+	display: DISPLAY,
+	flex: FLEX,
+	grid: GRID,
+	height: HEIGHT,
+	list: LIST,
+	margin: MARGIN,
+	opacity: OPACITY,
+	overflow: OVERFLOW,
+	padding: PADDING,
+	position: POSITION,
+	type: TYPE,
+	width: WIDTH,
+}

package/src/rules/list.ts

@@ -0,0 +1,69 @@
+import type { FractureRuleType } from "../types/meta"
+
+export const LIST: Array<FractureRuleType> = [
+	{
+		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