judocss/src/judo.map.js

The functional CSS toolkit designed for minimal effort and maximum efficiency.

module.exports = (base) => {
    return {

        "border-box": "{ box-sizing: border-box; }",

        "inline": "{ display: inline; }",
        "block": "{ display: block; }",
        "list-item": "{ display: list-item; }",
        "inline-block": "{ display: inline-block; }",
        "flex": "{ display: flex; }",
        "inline-flex": "{ display: inline-flex; }",
        "left": "{ float: left; }",
        "right": "{ float: right; }",
        "clear-$x": (x) => `{ clear: ${x}; }`,
        "clear": "{ clear: both; }",

        "width-$n": (n) => `{ width: ${ base(n) }; }`,
        "height-$n": (n) => `{ height: ${ base(n) }; }`,
        "full-width": "{ width: 100%; }",
        "full-height": "{ height: 100%; }",
        "max-width-$n": (n) => `{ max-width: ${ base(n) }; }`,
        "max-height-$n": (n) => `{ max-height: ${ base(n) }; }`,
        "min-width-$n": (n) => `{ min-width: ${ base(n) }; }`,
        "min-height-$n": (n) => `{ min-height: ${ base(n) }; }`,

        "vertical-align-$x": (x) => `{ vertical-align: ${x}; }`,

        "flex-wrap": "{ flex-wrap: wrap; }",
        "flex-$n": (n) => `{ flex: ${n}; }`,
        "justify-content-$x": (x) => `{ justify-content: ${x}; }`,

        "relative": "{ position: relative; }",
        "absolute": "{ position: absolute; }",
        "fixed": "{ position: fixed; }",
        "sticky": "{ position: sticky; }",
        "static": "{ position: static; }",
        "top-$n": (n) => `{ top: ${ base(n) }; }`,
        "right-$n": (n) => `{ right: ${ base(n) }; }`,
        "bottom-$n": (n) => `{ bottom: ${ base(n) }; }`,
        "left-$n": (n) => `{ left: ${ base(n) }; }`,
        "overflow-$x":  (x) => "{ overflow: ${x}; }",
        "overflow-x-$x":  (x) => "{ overflow-x: ${x}; }",
        "overflow-y-$x":  (x) => "{ overflow-y: ${x}; }",
        "z-index-$n": (n) => `{ z-index: ${n}; }`,

        "line-height-$n": (n) => `{ line-height: ${ base(n) }; }`,
        "font-size-$n": (n) => `{ font-size: ${ base(n) }; }`,
        "text-indent-$n": (n) => `{ text-indent: ${ base(n) }; }`,
        "font-size-adjust-$n": (n) => `{ font-size-adjust: ${n}; }`,
        "font-weight-$n": (n) => `{ font-weight: ${n}; }`,
        "bold": "{ font-weight: bold; }",
        "font-style-$x": (x) => "{ font-style: ${x}; }",
        "italic": "{ font-style: italic; }",
        "oblique": "{ font-style: oblique; }",
        "uppercase": "{ text-transform: uppercase; }",
        "lowercase": "{ text-transform: lowercase; }",
        "caps": "{ text-transform: capitalize; }",
        "underline": "{ text-decoration: underline; }",
        "overline": "{ text-decoration: overline; }",
        "line-through": "{ text-decoration: line-through; }",
        "text-decoration-none": "{ text-decoration: none; }",
        "text-left": "{ text-align: left; }",
        "text-right": "{ text-align: right; }",
        "text-center": "{ text-align: center; }",
        "letter-spacing-$x": (x) => `{ letter-spacing: ${ base(x) }; }`,
        "overflow-clip": "{ text-overflow: clip; }",
        "overflow-ellipsis": "{ text-overflow: ellipsis; }",
        "white-space-$x": (x) => "{ white-space: ${x}; }",
        "word-wrap-$x": (x) => "{ word-wrap: ${x}; }",
        "word-spacing-$x": (x) => "{ word-spacing: ${base(x)}; }",

        "color-$x": (x) => `{ color: ${x}; }`,
        "hsl-$h": (h) => `{ color: hsl(${h},50%,50%); }`,
        "hsl-$h-$s": (h, s) => `{ color: hsl(${h},${s}%,50%); }`,
        "hsl-$h-$s-$l": (h, s, l) => `{ color: hsl(${h},${s}%,${l}%); }`,
        "bg-$x": (x) => `{ background-color: ${x}; }`,
        "bg-hsl-$h": (h) => `{ background-color: hsl(${h},50%,50%); }`,
        "bg-hsl-$h-$s": (h, s) => `{ background-color: hsl(${h},${s}%,50%); }`,
        "bg-hsl-$h-$s-$l": (h, s, l) => `{ background-color: hsl(${h},${s}%,${l}%); }`,

        "border-color-$x": (x) => `{ border-color: ${x}; }`,
        "border-radius-$x": (x) => `{ border-radius: ${ base(x) }; }`,
        "border-style-$x": (x) => `{ border-style: ${x}; }`,
        "border-$n": (n) => `{ border: ${ base(n) }; }`,
        "border-top-$n": (n) => `{ border-top: ${ base(n) }; }`,
        "border-right-$n": (n) => `{ border-right: ${ base(n) }; }`,
        "border-bottom-$n": (n) => `{ border-bottom: ${ base(n) }; }`,
        "border-left-$n": (n) => `{ border-left: ${ base(n) }; }`,
        "border-x-$n": (n) => `{ border-left: ${ base(n) }; border-right: ${ base(n) }; }`,
        "border-y-$n": (n) => `{ border-top: ${ base(n) }; border-bottom: ${ base(n) }; }`,
        "border-$y-$x": (y, x) => `{
            border-top: ${ base(y) }; border-bottom: ${ base(y) };
            border-left: ${ base(x) }; border-right: ${ base(x) }; 
        }`,
        "border-$n-$style-$color": (n, style, color) => `{
            border: ${base(n)} ${style} ${color};
        }`,
        "border-$t-$r-$b-$l": (top, right, bottom, left) => `{
            border-top: ${ base(top) }; border-bottom: ${ base(bottom) };
            border-left: ${ base(left) }; border-right: ${ base(right) }; 
        }`,

        "margin-$n": (n) => `{ margin: ${ base(n) }; }`,
        "margin-top-$n": (n) => `{ margin-top: ${ base(n) }; }`,
        "margin-right-$n": (n) => `{ margin-right: ${ base(n) }; }`,
        "margin-bottom-$n": (n) => `{ margin-bottom: ${ base(n) }; }`,
        "margin-left-$n": (n) => `{ margin-left: ${ base(n) }; }`,
        "margin-x-$n": (n) => `{ margin-left: ${ base(n) }; margin-right: ${ base(n) }; }`,
        "margin-y-$n": (n) => `{ margin-top: ${ base(n) }; margin-bottom: ${ base(n) }; }`,
        "margin-$y-$x": (y, x) => `{
            margin-top: ${ base(y) }; margin-bottom: ${ base(y) };
            margin-left: ${ base(x) }; margin-right: ${ base(x) }; 
        }`,
        "margin-$t-$r-$b-$l": (top, right, bottom, left) => `{
            margin-top: ${ base(top) }; margin-bottom: ${ base(bottom) };
            margin-left: ${ base(left) }; margin-right: ${ base(right) }; 
        }`,

        "pad-$n": (n) => `{ padding: ${ base(n) }; }`,
        "pad-top-$n": (n) => `{ padding-top: ${ base(n) }; }`,
        "pad-right-$n": (n) => `{ padding-right: ${ base(n) }; }`,
        "pad-bottom-$n": (n) => `{ padding-bottom: ${ base(n) }; }`,
        "pad-left-$n": (n) => `{ padding-left: ${ base(n) }; }`,
        "pad-x-$n": (n) => `{ padding-left: ${ base(n) }; padding-right: ${ base(n) }; }`,
        "pad-y-$n": (n) => `{ padding-top: ${ base(n) }; padding-bottom: ${ base(n) }; }`,
        "pad-$y-$x": (y, x) => `{
            padding-top: ${ base(y) }; padding-bottom: ${ base(y) };
            padding-left: ${ base(x) }; padding-right: ${ base(x) }; 
        }`,
        "pad-$t-$r-$b-$l": (top, right, bottom, left) => `{
            padding-top: ${ base(top) }; padding-bottom: ${ base(bottom) };
            padding-left: ${ base(left) }; padding-right: ${ base(right) }; 
        }`,

        "opacity-$n": (n) => `{ opacity: ${n / 100}; }`,
        "zoom-$n": (n) => `{ zoom: ${n}; }`,
        "visible": "{ visibility: visible; }",
        "hidden ": "{ visibility: hidden; }",

        "cursor-$x": (x) => `{ cursor: ${x}; }`,
        "resize-$x": (x) => `{ resize: ${x}; }`,
    }
}