@lnear/marco - CSS Utilities Library
This is a lightweight CSS utilities library aimed at simplifying and standardizing common CSS patterns. It provides a utility function for generating CSS properties and values dynamically.
Installation
You can install this library via npm:
npm install @lnear/marcoUsage
The marco function can be used in a variety of ways. It can be used to generate CSS strings dynamically, or it can be used in template literals to generate inline styles.
<div style="${marco(['blur-md', 'drop-shadow-xl'])}"></div>will generate the following HTML:
<div style="filter: blur(12px); filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));"></div>marco Function
The marco function is the primary utility provided by this library. It dynamically replaces CSS patterns in strings using regular expressions and predefined patterns.
import { marco } from '@lnear/marco';console.log( `div { ${marco([ 'transition-colors', 'transition-none', 'blur-md', 'drop-shadow-xl', ])} }`);This will generate the following CSS string:
div { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transition-property: none; filter: blur(12px); filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow( 0 8px 5px rgb(0 0 0 / 0.08) );}Custom Patterns
You can also pass custom patterns to the marco function as follows:
import { marco } from '@lnear/marco';console.log( `div { ${marco( ['hello-world', 'hello-100', 'hello-200'], [ [/^hello-world/g, 'color: red;'], // note the ^ to match the start of the string and g to match all occurences [/^hello-(\d+)/g, 'color: blue; font-size: $1px;'], //or a replacer cb according to string.replace ] )} }`);This will generate the following CSS string:
div { color: red; color: blue; font-size: 100px; color: blue; font-size: 200px;}Patterns
The below are the predefined patterns that can be used with the marco function. It is not an exhaustive list and intutive patterns are implemented as needed.
For example, only “saturate-(0, 50, 100, 150, 200)” are documented here, but any value can be used with the “saturate” pattern. (saturate-x where x is a number will be replaced with “filter: saturate({x / 100});“)
drop-shadow
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));drop-shadow-sm
filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));drop-shadow-md
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));drop-shadow-lg
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));drop-shadow-xl
filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));drop-shadow-2xl
filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));drop-shadow-none
filter: drop-shadow(0 0 #0000);backdrop-hue-rotate-0
backdrop-filter: hue-rotate(0deg);backdrop-hue-rotate-15
backdrop-filter: hue-rotate(15deg);backdrop-hue-rotate-16
backdrop-filter: hue-rotate(16deg);backdrop-hue-rotate-30
backdrop-filter: hue-rotate(30deg);backdrop-hue-rotate-60
backdrop-filter: hue-rotate(60deg);backdrop-hue-rotate-90
backdrop-filter: hue-rotate(90deg);backdrop-hue-rotate-180
backdrop-filter: hue-rotate(180deg);hue-rotate-0
filter: hue-rotate(0deg);hue-rotate-15
filter: hue-rotate(15deg);hue-rotate-30
filter: hue-rotate(30deg);hue-rotate-60
filter: hue-rotate(60deg);hue-rotate-90
filter: hue-rotate(90deg);hue-rotate-180
filter: hue-rotate(180deg);grayscale-0
filter: grayscale(0);grayscale
filter: grayscale(100%);invert-0
filter: invert(0);invert
filter: invert(100%);sepia-0
filter: sepia(0);sepia
filter: sepia(100%);backdrop-grayscale-0
backdrop-filter: grayscale(0);backdrop-grayscale
backdrop-filter: grayscale(100%);saturate-0
filter: saturate(0);saturate-50
filter: saturate(0.5);saturate-100
filter: saturate(1);saturate-150
filter: saturate(1.5);saturate-200
filter: saturate(2);backdrop-blur
backdrop-filter: blur(8px);backdrop-blur-none
backdrop-filter: blur(0);backdrop-blur-sm
backdrop-filter: blur(4px);backdrop-blur-md
backdrop-filter: blur(12px);backdrop-blur-lg
backdrop-filter: blur(16px);backdrop-blur-xl
backdrop-filter: blur(24px);backdrop-blur-2xl
backdrop-filter: blur(40px);backdrop-blur-3xl
backdrop-filter: blur(64px);blur
filter: blur(8px);blur-none
filter: blur(0);blur-sm
filter: blur(4px);blur-md
filter: blur(12px);blur-lg
filter: blur(16px);blur-xl
filter: blur(24px);blur-2xl
filter: blur(40px);blur-3xl
filter: blur(64px);backdrop-brightness-0
backdrop-filter: brightness(0);backdrop-brightness-50
backdrop-filter: brightness(0.5);backdrop-brightness-75
backdrop-filter: brightness(0.75);backdrop-brightness-90
backdrop-filter: brightness(0.9);backdrop-brightness-95
backdrop-filter: brightness(0.95);backdrop-brightness-100
backdrop-filter: brightness(1);backdrop-brightness-105
backdrop-filter: brightness(1.05);backdrop-brightness-110
backdrop-filter: brightness(1.1);backdrop-brightness-125
backdrop-filter: brightness(1.25);backdrop-brightness-150
backdrop-filter: brightness(1.5);backdrop-brightness-200
backdrop-filter: brightness(2);brightness-0
filter: brightness(0);brightness-50
filter: brightness(0.5);brightness-75
filter: brightness(0.75);brightness-90
filter: brightness(0.9);brightness-95
filter: brightness(0.95);brightness-100
filter: brightness(1);brightness-105
filter: brightness(1.05);brightness-110
filter: brightness(1.1);brightness-125
filter: brightness(1.25);brightness-150
filter: brightness(1.5);brightness-200
filter: brightness(2);contrast-0
filter: contrast(0);contrast-50
filter: contrast(0.5);contrast-75
filter: contrast(0.75);contrast-100
filter: contrast(1);contrast-125
filter: contrast(1.25);contrast-150
filter: contrast(1.5);contrast-200
filter: contrast(2);backdrop-contrast-0
backdrop-filter: contrast(0);backdrop-contrast-50
backdrop-filter: contrast(0.5);backdrop-contrast-75
backdrop-filter: contrast(0.75);backdrop-contrast-100
backdrop-filter: contrast(1);backdrop-contrast-125
backdrop-filter: contrast(1.25);backdrop-contrast-150
backdrop-filter: contrast(1.5);backdrop-contrast-200
backdrop-filter: contrast(2);ease-linear
transition-timing-function: linear;ease-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);ease-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);ease-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);timing-linear
transition-timing-function: linear;timing-in
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);timing-out
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);timing-in-out
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-colors
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-opacity
transition-property: opacity;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-all
transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-shadow
transition-property: shadow;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;transition-none
transition-property: none;float-start
float: start;float-end
float: end;float-right
float: right;float-left
float: left;float-none
float: none;clear-start
clear: start;clear-end
clear: end;clear-right
clear: right;clear-left
clear: left;clear-both
clear: both;clear-none
clear: none;inline-block
display: inline-block;inline-flex
display: inline-flex;inline-table
display: inline-table;block
display: block;inline
display: inline;hidden
display: none;table
display: table;table-caption
display: table-caption;table-cell
display: table-cell;table-column
display: table-column;table-column-group
display: table-column-group;table-footer-group
display: table-footer-group;table-header-group
display: table-header-group;table-row-group
display: table-row-group;table-row
display: table-row;flow-root
display: flow-root;grid
display: grid;inline-grid
display: inline-grid;contents
display: contents;list-item
display: list-item;bg-inherit
background-color: inherit;bg-transparent
background-color: transparent;bg-auto
background-size: auto;bg-cover
background-size: cover;bg-contain
background-size: contain;bg-fixed
background-attachment: fixed;bg-local
background-attachment: local;bg-scroll
background-attachment: scroll;bg-center
background-position: center;bg-top
background-position: top;bg-right-top
background-position: right-top;bg-right
background-position: right;bg-right-bottom
background-position: right-bottom;bg-bottom
background-position: bottom;bg-left-bottom
background-position: left-bottom;bg-left
background-position: left;bg-left-top
background-position: left-top;bg-repeat
background-repeat: repeat;bg-no-repeat
background-repeat: no-repeat;bg-repeat-x
background-repeat: repeat-x;bg-repeat-y
background-repeat: repeat-y;bg-round
background-repeat: round;bg-space
background-repeat: space;bg-none
background-image: none;pointer-events-none
pointer-events: none;pointer-events-auto
pointer-events: auto;place-content-center
place-content: center;place-content-start
place-content: start;place-content-end
place-content: end;place-content-between
place-content: between;place-content-around
place-content: around;place-content-evenly
place-content: evenly;place-content-baseline
place-content: baseline;place-content-stretch
place-content: stretch;place-items-center
place-items: center;place-items-start
place-items: start;place-items-end
place-items: end;place-items-baseline
place-items: baseline;place-items-stretch
place-items: stretch;inset-auto
inset: auto;start-auto
inset-inline-start: auto;end-auto
inset-inline-end: auto;top-auto
top: auto;right-auto
right: auto;bottom-auto
bottom: auto;left-auto
left: auto;isolate
isolation: isolate;isolation-auto
isolation: auto;z-auto
z-index: auto;order-first
order: calc(-infinity);order-last
order: calc(infinity);order-none
order: 0;col-auto
grid-column: auto;col-span-full
grid-column: 1 / -1;col-start-auto
grid-column-start: auto;col-end-auto
grid-column-end: auto;row-auto
grid-row: auto;row-span-full
grid-row: 1 / -1;row-start-auto
grid-row-start: auto;row-end-auto
grid-row-end: auto;box-border
box-sizing: border-box;box-content
box-sizing: content-box;aspect-auto
aspect-ratio: auto;aspect-square
aspect-ratio: 1 / 1;aspect-video
aspect-ratio: 16 / 9;flex-auto
flex: auto;flex-initial
flex: 0 auto;flex-none
flex: none;basis-auto
flex-basis: auto;basis-full
flex-basis: 100%;table-auto
table-layout: auto;table-fixed
table-layout: fixed;caption-top
caption-side: top;caption-bottom
caption-side: bottom;border-collapse
border-collapse: collapse;border-separate
border-collapse: separate;origin-center
transform-origin: center;origin-top
transform-origin: top;origin-top-right
transform-origin: top right;origin-right
transform-origin: right;origin-bottom-right
transform-origin: bottom right;origin-bottom
transform-origin: bottom;origin-bottom-left
transform-origin: bottom left;origin-left
transform-origin: left;origin-top-left
transform-origin: top left;perspective-origin-center
perspective-origin: center;perspective-origin-top
perspective-origin: top;perspective-origin-top-right
perspective-origin: top right;perspective-origin-right
perspective-origin: right;perspective-origin-bottom-right
perspective-origin: bottom right;perspective-origin-bottom
perspective-origin: bottom;perspective-origin-bottom-left
perspective-origin: bottom left;perspective-origin-left
perspective-origin: left;perspective-origin-top-left
perspective-origin: top left;perspective-none
perspective: none;translate-none
translate: none;transform-none
transform: none;transform-flat
transform-style: flat;transform-3d
transform-style: preserve-3d;transform-content
transform-box: content-box;transform-border
transform-box: border-box;transform-fill
transform-box: fill-box;transform-stroke
transform-box: stroke-box;transform-view
transform-box: view-box;backface-visible
backface-visibility: visible;backface-hidden
backface-visibility: hidden;resize-none
resize: none;resize-both
resize: both;resize-x
resize: horizontal;resize-y
resize: vertical;snap-none
scroll-snap-type: none;snap-align-none
scroll-snap-align: none;snap-start
scroll-snap-align: start;snap-end
scroll-snap-align: end;snap-center
scroll-snap-align: center;snap-normal
scroll-snap-stop: normal;snap-always
scroll-snap-stop: always;list-inside
list-style-position: inside;list-outside
list-style-position: outside;list-none
list-style-type: none;list-disc
list-style-type: disc;list-decimal
list-style-type: decimal;list-image-none
list-style-image: none;appearance-none
appearance: none;appearance-auto
appearance: auto;columns-auto
columns: auto;grid-flow-row
grid-auto-flow: row;grid-flow-col
grid-auto-flow: column;grid-flow-dense
grid-auto-flow: dense;grid-flow-row-dense
grid-auto-flow: row dense;grid-flow-col-dense
grid-auto-flow: column dense;auto-cols-auto
grid-auto-columns: auto;auto-cols-min
grid-auto-columns: min-content;auto-cols-max
grid-auto-columns: max-content;auto-cols-fr
grid-auto-columns: minmax(0, 1fr);auto-rows-auto
grid-auto-rows: auto;auto-rows-min
grid-auto-rows: min-content;auto-rows-max
grid-auto-rows: max-content;auto-rows-fr
grid-auto-rows: minmax(0, 1fr);grid-cols-none
grid-template-columns: none;grid-cols-subgrid
grid-template-columns: subgrid;grid-rows-none
grid-template-rows: none;grid-rows-subgrid
grid-template-rows: subgrid;flex-row
flex-direction: row;flex-row-reverse
flex-direction: row-reverse;flex-col
flex-direction: column;flex-col-reverse
flex-direction: column-reverse;flex-wrap
flex-wrap: wrap;flex-nowrap
flex-wrap: nowrap;flex-wrap-reverse
flex-wrap: wrap-reverse;content-normal
align-content: normal;content-center
align-content: center;content-start
align-content: flex-start;content-end
align-content: flex-end;content-between
align-content: space-between;content-around
align-content: space-around;content-evenly
align-content: space-evenly;content-baseline
align-content: baseline;content-stretch
align-content: stretch;items-center
align-items: center;items-start
align-items: flex-start;items-end
align-items: flex-end;items-baseline
align-items: baseline;items-stretch
align-items: stretch;justify-normal
justify-content: normal;justify-center
justify-content: center;justify-start
justify-content: flex-start;justify-end
justify-content: flex-end;justify-between
justify-content: space-between;justify-around
justify-content: space-around;justify-evenly
justify-content: space-evenly;justify-baseline
justify-content: baseline;justify-stretch
justify-content: stretch;justify-items-normal
justify-items: normal;justify-items-center
justify-items: center;justify-items-start
justify-items: start;justify-items-end
justify-items: end;justify-items-stretch
justify-items: stretch;place-self-auto
place-self: auto;place-self-start
place-self: start;place-self-end
place-self: end;place-self-center
place-self: center;place-self-stretch
place-self: stretch;self-auto
align-self: auto;self-start
align-self: flex-start;self-end
align-self: flex-end;self-center
align-self: center;self-stretch
align-self: stretch;self-baseline
align-self: baseline;justify-self-auto
justify-self: auto;justify-self-start
justify-self: flex-start;justify-self-end
justify-self: flex-end;justify-self-center
justify-self: center;justify-self-stretch
justify-self: stretch;scroll-auto
scroll-behavior: auto;scroll-smooth
scroll-behavior: smooth;text-ellipsis
text-overflow: ellipsis;text-clip
text-overflow: clip;whitespace-normal
white-space: normal;whitespace-nowrap
white-space: nowrap;whitespace-pre
white-space: pre;whitespace-pre-line
white-space: pre-line;whitespace-pre-wrap
white-space: pre-wrap;whitespace-break-spaces
white-space: break-spaces;text-wrap
text-wrap: wrap;text-nowrap
text-wrap: nowrap;text-balance
text-wrap: balance;text-pretty
text-wrap: pretty;break-words
overflow-wrap: break-word;break-all
word-break: break-all;break-keep
word-break: break-keep;via-none
--tw-gradient-via-stops: initial;bg-clip-text
background-clip: text;bg-clip-border
background-clip: border-box;bg-clip-padding
background-clip: padding-box;bg-clip-content
background-clip: content-box;bg-origin-border
background-origin: border-box;bg-origin-padding
background-origin: padding-box;bg-origin-content
background-origin: content-box;mix-blend-plus-darker
mix-blend-mode: plus-darker;mix-blend-plus-lighter
mix-blend-mode: plus-lighter;stroke-none
stroke: none;object-contain
object-fit: contain;object-cover
object-fit: cover;object-fill
object-fit: fill;object-none
object-fit: none;object-scale-down
object-fit: scale-down;object-bottom
object-position: bottom;object-center
object-position: center;object-left
object-position: left;object-left-bottom
object-position: left bottom;object-left-top
object-position: left top;object-right
object-position: right;object-right-bottom
object-position: right bottom;object-right-top
object-position: right top;object-top
object-position: top;text-left
text-align: left;text-center
text-align: center;text-right
text-align: right;text-justify
text-align: justify;text-start
text-align: start;text-end
text-align: end;align-baseline
vertical-align: baseline;align-top
vertical-align: top;align-middle
vertical-align: middle;align-bottom
vertical-align: bottom;align-text-top
vertical-align: text-top;align-text-bottom
vertical-align: text-bottom;align-sub
vertical-align: sub;align-super
vertical-align: super;uppercase
text-transform: uppercase;lowercase
text-transform: lowercase;capitalize
text-transform: capitalize;normal-case
text-transform: none;italic
font-style: italic;not-italic
font-style: normal;underline
text-decoration-line: underline;overline
text-decoration-line: overline;line-through
text-decoration-line: line-through;no-underline
text-decoration-line: none;font-stretch-normal
font-stretch: normal;font-stretch-ultra-condensed
font-stretch: ultra-condensed;font-stretch-extra-condensed
font-stretch: extra-condensed;font-stretch-condensed
font-stretch: condensed;font-stretch-semi-condensed
font-stretch: semi-condensed;font-stretch-semi-expanded
font-stretch: semi-expanded;font-stretch-expanded
font-stretch: expanded;font-stretch-extra-expanded
font-stretch: extra-expanded;font-stretch-ultra-expanded
font-stretch: ultra-expanded;decoration-solid
text-decoration-style: solid;decoration-double
text-decoration-style: double;decoration-dotted
text-decoration-style: dotted;decoration-dashed
text-decoration-style: dashed;decoration-wavy
text-decoration-style: wavy;decoration-auto
text-decoration-thickness: auto;decoration-from-font
text-decoration-thickness: from-font;animate-none
animation: none;will-change-auto
will-change: auto;will-change-scroll
will-change: scroll-position;will-change-contents
will-change: contents;will-change-transform
will-change: transform;contain-none
contain: none;contain-content
contain: content;contain-strict
contain: strict;forced-color-adjust-none
forced-color-adjust: none;forced-color-adjust-auto
forced-color-adjust: auto;normal-nums
font-variant-numeric: normal;underline-offset-auto
text-underline-offset: auto;Contributing
Contributions are welcome! Please feel free to open issues or pull requests.
License
This project is licensed under the MIT License - see the LICENSE file for details.