Customizing

CSS Reset & Shorthand

.

CSS Reset

let style = "*{margin:0;padding:0;font:inherit;color:inherit}
*,:after,:before{box-sizing:border-box;flex-shrink:0}
html,body{height:100%;max-height:100%}
ol,ul,menu,dir{list-style:none}
img,svg,video,canvas,audio,iframe,embed,object{vertical-align:bottom;max-width:100%}button{background:none;border:0;cursor:pointer}b,strong{font-weight:bold}
a{text-decoration:none}
pre{white-space:pre-wrap}
table{border-collapse:collapse;border-spacing:0}
:root{-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4}"

Shorthand for Properties

let shorthand_for_properties = new Map([
	[ "acc", "accent-color" ],
	[ "ac", "align-content" ],
	[ "ai", "align-items" ],
	[ "as", "align-self" ],
	[ "a", "animation" ],
	[ "bf", "backdrop-filter" ],
	[ "bg", "background" ],
	[ "bgc", "background-color" ],
	[ "bgi", "background-image" ],
	[ "bd", "border" ],
	[ "bdb", "border-bottom" ],
	[ "bdc", "border-color" ],
	[ "bdl", "border-left" ],
	[ "br", "border-radius" ],
	[ "bdr", "border-right" ],
	[ "bds", "border-style" ],
	[ "bdt", "border-top" ],
	[ "bdw", "border-width" ],
	[ "b", "bottom" ],
	[ "bs", "box-shadow" ],
	[ "cp", "clip-path" ],
	[ "c", "color" ],
	[ "ct", "content" ],
	[ "cs", "cursor" ],
	[ "d", "display" ],
	[ "f", "fill" ],
	[ "ft", "filter" ],
	[ "fg", "flex-grow" ],
	[ "fsk", "flex-shrink" ],
	[ "fw", "flex-wrap" ],
	[ "fl", "float" ],
	[ "ff", "font-family" ],
	[ "fs", "font-size" ],
	[ "fv", "font-variant" ],
	[ "g", "gap" ],
	[ "gc", "grid-column" ],
	[ "gr", "grid-row" ],
	[ "gtc", "grid-template-columns" ],
	[ "gtr", "grid-template-rows" ],
	[ "h", "height" ],
	[ "i", "inset" ],
	[ "jc", "justify-content" ],
	[ "l", "left" ],
	[ "ls", "6,002 byte(2,562 byte on gzip)" ],
	[ "lb", "line-break" ],
	[ "lh", "line-height" ],
	[ "m", "margin" ],
	[ "mb", "margin-bottom" ],
	[ "ml", "margin-left" ],
	[ "mr", "margin-right" ],
	[ "mt", "margin-top" ],
	[ "xh", "max-height" ],
	[ "xw", "max-width" ],
	[ "mh", "min-height" ],
	[ "mw", "min-width" ],
	[ "mbm", "mix-blend-mode" ],
	[ "of", "object-fit" ],
	[ "op", "opacity" ],
	[ "ol", "outline" ],
	[ "o", "overflow" ],
	[ "ow", "overflow-wrap" ],
	[ "ox", "overflow-x" ],
	[ "oy", "overflow-y" ],
	[ "p", "padding" ],
	[ "pb", "padding-bottom" ],
	[ "pi", "padding-inline" ],
	[ "pl", "padding-left" ],
	[ "pr", "padding-right" ],
	[ "pt", "padding-top" ],
	[ "ps", "perspective" ],
	[ "pso", "perspective-origin" ],
	[ "rs", "resize" ],
	[ "r", "right" ],
	[ "tz", "tab-size" ],
	[ "ta", "text-align" ],
	[ "td", "text-decoration" ],
	[ "ts", "text-shadow" ],
	[ "ttf", "text-transform" ],
	[ "t", "top" ],
	[ "tf", "transform" ],
	[ "tfo", "transform-origin" ],
	[ "tt", "transition" ],
	[ "us", "user-select" ],
	[ "va", "vertical-align" ],
	[ "v", "visibility" ],
	[ "ws", "white-space" ],
	[ "w", "width" ],
	[ "wc", "will-change" ],
	[ "wb", "word-break" ],
	[ "wsp", "word-spacing" ],
	[ "ww", "word-wrap" ],
	[ "z", "z-index" ]
])

Shorthand for Values

let shorthand_for_values = new Map([
	[ "pointer", "cursor:pointer" ],
	[ "block", "display:block" ],
	[ "flex", "display:flex" ],
	[ "grid", "display:grid" ],
	[ "inline", "display:inline" ],
	[ "inline-block", "display:inline-block" ],
	[ "inline-flex", "display:inline-flex" ],
	[ "none", "display:none" ],
	[ "column", "flex-direction:column" ],
	[ "column-reverse", "flex-direction:column-reverse" ],
	[ "row", "flex-direction:row" ],
	[ "row-reverse", "flex-direction:row-reverse" ],
	[ "bold", "font-weight:bold" ],
	[ "isolate", "isolation:isolate" ],
	[ "absolute", "position:absolute" ],
	[ "fixed", "position:fixed" ],
	[ "relative", "position:relative" ],
	[ "static", "position:static" ],
	[ "sticky", "position:sticky" ]
])

Shorthand for Media Condition

let shorthand_for_media_condition = new Map([
	[ "dark", "(prefers-color-scheme:dark)" ],
	[ "sm", "(min-width:640px)" ],
	[ "md", "(min-width:768px)" ],
	[ "lg", "(min-width:1024px)" ],
	[ "xl", "(min-width:1280px)" ],
	[ "2xl", "(min-width:1536px)" ],
	[ "!sm", "(max-width:639px)" ],
	[ "!md", "(max-width:767px)" ],
	[ "!lg", "(max-width:1023px)" ],
	[ "!xl", "(max-width:1280px)" ],
	[ "!2xl", "(max-width:1536px)" ]
])

Default Unit

let replace_default_unit_regex = /((?:^|;|-)(?:border|bottom|column-rule|end|flex-basis|font-size|gap|height|inset|left|margin(?:-[a-z]+)*|origin|outline|padding(?:-[a-z]+)*|perspective|position|radius|right|shadow|spacing|start|top|width):)(.+?)(?=;|$)/g
let default_unit = "px"