@cryptic-css/core - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

dist/ccss.js

@@ -9,3 +9,3 @@ import props from "./props";
       if (props[k]) {
-        generated += props[k](v[k], v, k);
+        generated += props[k](k, v[k], v);
       }
@@ -12,0 +12,0 @@ }

dist/ccss.test.js

 import ccss, { setValueMap } from "./";
 setValueMap({
-  'border-radius': {
+  r: {
     global: 6
@@ -5,0 +5,0 @@ }

dist/maps.d.ts

 export declare const valueMap: {
-    'animation-direction': {
+    aDir: {
         n: string;
@@ -8,3 +8,3 @@ r: string;
     };
-    'animation-fill-mode': {
+    afm: {
         n: string;
@@ -15,11 +15,11 @@ fwd: string;
     };
-    'animation-play-state': {
+    aps: {
         p: string;
         r: string;
     };
-    'backface-visibility': {
+    bv: {
         v: string;
         h: string;
     };
-    'align-items': {
+    ai: {
         s: string;
@@ -32,3 +32,3 @@ fs: string;
     };
-    'justify-items': {
+    ji: {
         s: string;
@@ -41,3 +41,3 @@ fs: string;
     };
-    'justify-content': {
+    jc: {
         s: string;
@@ -50,3 +50,3 @@ fs: string;
     };
-    'align-content': {
+    ac: {
         s: string;
@@ -59,3 +59,3 @@ fs: string;
     };
-    'align-self': {
+    aS: {
         s: string;
@@ -68,3 +68,3 @@ fs: string;
     };
-    'justify-self': {
+    jS: {
         s: string;
@@ -77,3 +77,3 @@ fs: string;
     };
-    'flex-direction': {
+    fd: {
         r: string;
@@ -84,6 +84,6 @@ rr: string;
     };
-    'flex-wrap': {
+    fw: {
         w: string;
     };
-    position: {
+    pos: {
         a: string;
@@ -94,3 +94,3 @@ f: string;
     };
-    display: {
+    d: {
         n: string;
@@ -106,3 +106,3 @@ i: string;
     };
-    overflow: {
+    o: {
         h: string;
@@ -113,3 +113,3 @@ v: string;
     };
-    'overflow-x': {
+    ox: {
         h: string;
@@ -120,3 +120,3 @@ v: string;
     };
-    'overflow-y': {
+    oy: {
         h: string;
@@ -127,3 +127,3 @@ v: string;
     };
-    float: {
+    fl: {
         n: string;
@@ -133,3 +133,3 @@ l: string;
     };
-    clear: {
+    clr: {
         n: string;
@@ -140,3 +140,3 @@ l: string;
     };
-    visibility: {
+    v: {
         v: string;
@@ -146,3 +146,3 @@ h: string;
     };
-    'text-align': {
+    ta: {
         l: string;
@@ -153,3 +153,3 @@ c: string;
     };
-    'text-decoration': {
+    td: {
         n: string;
@@ -160,7 +160,7 @@ u: string;
     };
-    'text-overflow': {
+    to: {
         c: string;
         e: string;
     };
-    'text-transform': {
+    tt: {
         n: string;
@@ -171,3 +171,3 @@ c: string;
     };
-    'vertical-align': {
+    va: {
         b: string;
@@ -182,3 +182,3 @@ sub: string;
     };
-    'font-stretch': {
+    ftStr: {
         uc: string;
@@ -194,3 +194,3 @@ ec: string;
     };
-    'font-style': {
+    ftSty: {
         n: string;
@@ -200,7 +200,7 @@ i: string;
     };
-    'font-variant': {
+    ftv: {
         n: string;
         sc: string;
     };
-    'font-weight': {
+    ftw: {
         n: string;
@@ -211,3 +211,3 @@ b: string;
     };
-    'white-space': {
+    ws: {
         n: string;
@@ -219,3 +219,3 @@ nw: string;
     };
-    'word-break': {
+    wb: {
         n: string;
@@ -226,17 +226,17 @@ ba: string;
     };
-    'word-wrap': {
+    ww: {
         n: string;
         b: string;
     };
-    'list-style': {
+    lstS: {
         n: string;
     };
-    'list-style-type': {
+    lstST: {
         n: string;
     };
-    'background-size': {
+    bgs: {
         cr: string;
         cn: string;
     };
-    'background-repeat': {
+    bgr: {
         x: string;
@@ -248,6 +248,6 @@ y: string;
     };
-    'background-position': {
+    bgp: {
         c: string;
     };
-    'background-attachment': {
+    bga: {
         s: string;
@@ -257,3 +257,3 @@ f: string;
     };
-    'background-blend-mode': {
+    bgbm: {
         n: string;
@@ -270,9 +270,6 @@ m: string;
     };
-    background: {
+    bg: {
         t: string;
     };
-    'background-color': {
-        t: string;
-    };
-    'background-clip': {
+    bgc: {
         b: string;
@@ -282,3 +279,3 @@ p: string;
     };
-    'background-origin': {
+    bgo: {
         b: string;
@@ -288,3 +285,3 @@ p: string;
     };
-    'object-fit': {
+    of: {
         f: string;
@@ -296,3 +293,3 @@ cn: string;
     };
-    'mix-blend-mode': {
+    mbm: {
         n: string;
@@ -313,3 +310,3 @@ m: string;
     };
-    cursor: {
+    cur: {
         al: string;
@@ -352,11 +349,11 @@ all: string;
     };
-    'pointer-events': {
+    pe: {
         a: string;
         n: string;
     };
-    'scroll-behavior': {
+    sb: {
         a: string;
         s: string;
     };
-    'user-select': {
+    us: {
         a: string;
@@ -363,0 +360,0 @@ n: string;

dist/maps.js

@@ -21,3 +21,3 @@ import mergeDeep from "./utils";
 export const valueMap = {
-  'animation-direction': {
+  aDir: {
     n: 'normal',
@@ -28,3 +28,3 @@ r: 'reverse',
   },
-  'animation-fill-mode': {
+  afm: {
     n: 'none',
@@ -37,17 +37,17 @@ // @ts-ignore
   },
-  'animation-play-state': {
+  aps: {
     p: 'paused',
     r: 'running'
   },
-  'backface-visibility': {
+  bv: {
     v: 'visible',
     h: 'hidden'
   },
-  'align-items': aligns,
-  'justify-items': aligns,
-  'justify-content': aligns,
-  'align-content': aligns,
-  'align-self': aligns,
-  'justify-self': aligns,
-  'flex-direction': {
+  ai: aligns,
+  ji: aligns,
+  jc: aligns,
+  ac: aligns,
+  aS: aligns,
+  jS: aligns,
+  fd: {
     r: 'row',
@@ -58,6 +58,6 @@ rr: 'row-reverse',
   },
-  'flex-wrap': {
+  fw: {
     w: 'wrap'
   },
-  position: {
+  pos: {
     a: 'absolute',
@@ -68,3 +68,3 @@ f: 'fixed',
   },
-  display: {
+  d: {
     // @ts-ignore
@@ -82,6 +82,6 @@ [false]: 'none',
   },
-  overflow: overflows,
-  'overflow-x': overflows,
-  'overflow-y': overflows,
-  float: {
+  o: overflows,
+  ox: overflows,
+  oy: overflows,
+  fl: {
     // @ts-ignore
@@ -93,3 +93,3 @@ [false]: 'none',
   },
-  clear: {
+  clr: {
     // @ts-ignore
@@ -104,3 +104,3 @@ [false]: 'none',
   },
-  visibility: {
+  v: {
     // @ts-ignore
@@ -114,3 +114,3 @@ [true]: 'visible',
   },
-  'text-align': {
+  ta: {
     l: 'left',
@@ -121,3 +121,3 @@ c: 'center',
   },
-  'text-decoration': {
+  td: {
     n: 'none',
@@ -130,7 +130,7 @@ // @ts-ignore
   },
-  'text-overflow': {
+  to: {
     c: 'clip',
     e: 'ellipsis'
   },
-  'text-transform': {
+  tt: {
     n: 'none',
@@ -143,3 +143,3 @@ // @ts-ignore
   },
-  'vertical-align': {
+  va: {
     b: 'baseline',
@@ -154,3 +154,3 @@ sub: 'sub',
   },
-  'font-stretch': {
+  ftStr: {
     uc: 'ultra-condensed',
@@ -166,3 +166,3 @@ ec: 'extra-condensed',
   },
-  'font-style': {
+  ftSty: {
     n: 'normal',
@@ -172,7 +172,7 @@ i: 'italic',
   },
-  'font-variant': {
+  ftv: {
     n: 'normal',
     sc: 'small-caps'
   },
-  'font-weight': {
+  ftw: {
     n: 'normal',
@@ -183,3 +183,3 @@ b: 'bold',
   },
-  'white-space': {
+  ws: {
     n: 'normal',
@@ -191,3 +191,3 @@ nw: 'nowrap',
   },
-  'word-break': {
+  wb: {
     n: 'normal',
@@ -198,7 +198,7 @@ ba: 'break-all',
   },
-  'word-wrap': {
+  ww: {
     n: 'normal',
     b: 'break-word'
   },
-  'list-style': {
+  lstS: {
     // @ts-ignore
@@ -208,3 +208,3 @@ [false]: 'none',
   },
-  'list-style-type': {
+  lstST: {
     // @ts-ignore
@@ -214,7 +214,7 @@ [false]: 'none',
   },
-  'background-size': {
+  bgs: {
     cr: 'cover',
     cn: 'contain'
   },
-  'background-repeat': {
+  bgr: {
     // @ts-ignore
@@ -230,6 +230,6 @@ [true]: 'repeat',
   },
-  'background-position': {
+  bgp: {
     c: 'center'
   },
-  'background-attachment': {
+  bga: {
     s: 'scroll',
@@ -239,3 +239,3 @@ f: 'fixed',
   },
-  'background-blend-mode': {
+  bgbm: {
     n: 'normal',
@@ -252,9 +252,9 @@ m: 'multiply',
   },
-  background: {
+  bg: {
     t: 'transparent'
   },
-  'background-color': {
+  bgc: {
     t: 'transparent'
   },
-  'background-clip': {
+  bgc: {
     b: 'border-box',
@@ -264,3 +264,3 @@ p: 'padding-box',
   },
-  'background-origin': {
+  bgo: {
     b: 'border-box',
@@ -270,3 +270,3 @@ p: 'padding-box',
   },
-  'object-fit': {
+  of: {
     f: 'fill',
@@ -280,3 +280,3 @@ cn: 'contain',
   },
-  'mix-blend-mode': {
+  mbm: {
     n: 'normal',
@@ -297,3 +297,3 @@ m: 'multiply',
   },
-  cursor: {
+  cur: {
     al: 'alias',
@@ -336,3 +336,3 @@ all: 'all-scroll',
   },
-  'pointer-events': {
+  pe: {
     // @ts-ignore
@@ -345,7 +345,7 @@ [true]: 'auto',
   },
-  'scroll-behavior': {
+  sb: {
     a: 'auto',
     s: 'smooth'
   },
-  'user-select': {
+  us: {
     a: 'auto',
@@ -352,0 +352,0 @@ n: 'none',

dist/parsers.d.ts

@@ -1,7 +0,7 @@
-export declare const evaluateCSSProp: (...args: any[]) => any;
-export declare const parseSingle: (input: any) => any;
-export declare const parseArray: (input: any) => any;
-export declare const mapValue: (input: any, prop: any) => any;
-export declare const pipe: (...fs: any[]) => (...args: any[]) => any;
-export declare const parsePseudo: (input: any, all: any, prop: any) => string;
+export declare const toCSSRule: (cssProp: any) => (key: any, input: any) => string;
+export declare const parseSingle: (prop: any, input: any) => any;
+export declare const parseArray: (prop: any, input: any) => any;
+export declare const mapValue: (prop: any, input: any) => any;
+export declare const pipe: (...fs: any[]) => (prop: any, input: any, original: any) => any;
+export declare const parsePseudo: (prop: any, input: any) => string;
 /**
@@ -19,2 +19,2 @@ * You can pass children to your ccss supporting both pseudo classes and nested selectors
  */
-export declare const child: (i: any) => string;
+export declare const child: (prop: any, input: any) => string;

dist/parsers.js

 import options from "./options";
 import { valueMap, pseudoMap } from "./maps";
 import ccss from "./ccss";
-const IS_PROD = process.env.NODE_ENV === 'production';
-
-const _evaluateCSSProp = (prop, value, transformer) => value === undefined ? '' : `${prop}: ${transformer ? transformer(value, prop) : value};`;
-
-export const evaluateCSSProp = process.env.NODE_ENV === 'production' ? _evaluateCSSProp : function () {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  if (!IS_PROD) {
-    try {
-      args[3] && args[3](args); // eslint-disable-next-line no-empty
-    } catch (_unused) {}
-  } // @ts-ignore
-
-
-  return _evaluateCSSProp(...args);
+export const toCSSRule = cssProp => (key, input) => {
+  return input === undefined ? '' : `${cssProp}: ${input};`;
 };
-export const parseSingle = input => {
+export const parseSingle = (prop, input) => {
   switch (typeof input) {
@@ -33,7 +18,7 @@ case 'number':
 
-const applyArray = input => {
+const applyArray = (prop, input) => {
   let out = '';
 
   for (const i of input) {
-    out += `${parseSingle(i)} `;
+    out += `${parseSingle(prop, i)} `;
   }
@@ -44,15 +29,15 @@
 
-export const parseArray = input => {
+export const parseArray = (prop, input) => {
   switch (true) {
     case Array.isArray(input):
-      return applyArray(input);
+      return applyArray(prop, input);
 
     case input:
-      return applyArray([1]);
+      return applyArray(prop, [1]);
 
     default:
-      return parseSingle(input);
+      return parseSingle(prop, input);
   }
 };
-export const mapValue = (input, prop) => {
+export const mapValue = (prop, input) => {
   var _valueMap$prop;
@@ -63,18 +48,15 @@
 export const pipe = function pipe() {
-  var _this = this;
-
-  for (var _len2 = arguments.length, fs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    fs[_key2] = arguments[_key2];
+  for (var _len = arguments.length, fs = new Array(_len), _key = 0; _key < _len; _key++) {
+    fs[_key] = arguments[_key];
   }
 
-  // @ts-ignore
-  return function () {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+  return (prop, input, original) => {
+    for (const f of fs) {
+      input = f(prop, input, original);
     }
 
-    return fs.reduce((args, f) => [f.apply(_this, args)], args)[0];
+    return input;
   };
 };
-export const parsePseudo = (input, all, prop) => `
+export const parsePseudo = (prop, input) => `
     :${pseudoMap[prop]} {
@@ -97,10 +79,10 @@ ${ccss(input)}
 
-export const child = i => {
+export const child = (prop, input) => {
   let generated = ''; // eslint-disable-next-line no-restricted-syntax
 
-  for (const k in i) {
-    if (Object.prototype.hasOwnProperty.call(i, k)) {
+  for (const k in input) {
+    if (Object.prototype.hasOwnProperty.call(input, k)) {
       generated += `
             ${pseudoMap[k] ? `:${pseudoMap[k]}` : k} {
-                ${ccss(i[k])}
+                ${ccss(input[k])}
             }`;
@@ -107,0 +89,0 @@ }

dist/props.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { pipe, mapValue, parseArray, parseSingle, evaluateCSSProp, child, parsePseudo } from "./parsers";
+import { pipe, mapValue, parseArray, parseSingle, toCSSRule, child, parsePseudo } from "./parsers";
 import { pseudoMap } from "./maps";
-const IS_DEV = process.env.NODE_ENV !== 'production';
-
-if (IS_DEV) {
-  var validateTime = (n, v) => v && !Number.isNaN(v) && !v.startsWith('var') && console.warn(`'${n}' with value '${v}' is a number. You didn't specify any unit like 's' or 'ms'.`);
-
-  var validatePureNumber = (n, v) => v && Number.isNaN(v) && console.warn(`'${n}' with value '${v}' is a not number. You should only use plain number without unit here.`);
-}
-
 const props = {
   // Animation + 3D
-  a: v => evaluateCSSProp('animation', v),
-  ad: v => evaluateCSSProp('animation-delay', v, mapValue, IS_DEV ? validateTime : undefined),
-  aDir: v => evaluateCSSProp('animation-direction', v, mapValue),
-  aD: v => evaluateCSSProp('animation-duration', v, mapValue, IS_DEV ? validateTime : undefined),
-  afm: v => evaluateCSSProp('animation-fill-mode', v, mapValue),
-  aic: v => evaluateCSSProp('animation-iteration-count', v),
-  an: v => evaluateCSSProp('animation-name', v),
-  aps: v => evaluateCSSProp('animation-play-state', v, mapValue),
-  ats: v => evaluateCSSProp('animation-timing-function', v, mapValue),
-  bv: v => evaluateCSSProp('backface-visibility', v, mapValue),
-  per: v => evaluateCSSProp('perspective', v),
-  pero: v => evaluateCSSProp('perspective-origin', v),
-  tf: v => evaluateCSSProp('transform', v),
-  tfo: v => evaluateCSSProp('transform-origin', v),
-  tfs: v => evaluateCSSProp('transform-style', v),
-  tr: v => evaluateCSSProp('transition', v, mapValue),
-  trD: v => evaluateCSSProp('transition-delay', v, mapValue, IS_DEV ? validateTime : undefined),
-  trd: v => evaluateCSSProp('transition-duration', v, mapValue, IS_DEV ? validateTime : undefined),
-  trp: v => evaluateCSSProp('transition-property', v),
-  trt: v => evaluateCSSProp('transition-timing-function', v),
+  a: toCSSRule('animation'),
+  ad: pipe(mapValue, toCSSRule('animation-delay')),
+  aDir: pipe(mapValue, toCSSRule('animation-direction')),
+  aD: pipe(mapValue, toCSSRule('animation-duration')),
+  afm: pipe(mapValue, toCSSRule('animation-fill-mode')),
+  aic: toCSSRule('animation-iteration-count'),
+  an: toCSSRule('animation-name'),
+  aps: pipe(mapValue, toCSSRule('animation-play-state')),
+  ats: pipe(mapValue, toCSSRule('animation-timing-function')),
+  bv: pipe(mapValue, toCSSRule('backface-visibility')),
+  per: toCSSRule('perspective'),
+  pero: toCSSRule('perspective-origin'),
+  tf: toCSSRule('transform'),
+  tfo: toCSSRule('transform-origin'),
+  tfs: toCSSRule('transform-style'),
+  tr: pipe(mapValue, toCSSRule('transition')),
+  trD: pipe(mapValue, toCSSRule('transition-delay')),
+  trd: pipe(mapValue, toCSSRule('transition-duration')),
+  trp: toCSSRule('transition-property'),
+  trt: toCSSRule('transition-timing-function'),
   // Flex
-  fd: v => evaluateCSSProp('flex-direction', v, mapValue),
-  fw: v => evaluateCSSProp('flex-wrap', v, mapValue),
-  fb: v => evaluateCSSProp('flex-basis', v, parseSingle),
-  ff: v => evaluateCSSProp('flex-flow', v),
-  fg: v => evaluateCSSProp('flex-grow', v),
-  fs: v => evaluateCSSProp('flex-shrink', v),
-  ai: v => evaluateCSSProp('align-items', v, mapValue),
-  ac: v => evaluateCSSProp('align-content', v, mapValue),
-  ji: v => evaluateCSSProp('justify-items', v, mapValue),
-  jc: v => evaluateCSSProp('justify-content', v, mapValue),
-  aS: v => evaluateCSSProp('align-self', v, mapValue),
-  jS: v => evaluateCSSProp('justify-self', v, mapValue),
+  fd: pipe(mapValue, toCSSRule('flex-direction')),
+  fw: pipe(mapValue, toCSSRule('flex-wrap')),
+  fb: pipe(parseSingle, toCSSRule('flex-basis')),
+  ff: toCSSRule('flex-flow'),
+  fg: toCSSRule('flex-grow'),
+  fs: toCSSRule('flex-shrink'),
+  ai: pipe(mapValue, toCSSRule('align-items')),
+  ac: pipe(mapValue, toCSSRule('align-content')),
+  ji: pipe(mapValue, toCSSRule('justify-items')),
+  jc: pipe(mapValue, toCSSRule('justify-content')),
+  aS: pipe(mapValue, toCSSRule('align-self')),
+  jS: pipe(mapValue, toCSSRule('justify-self')),
   // Font + text related
-  ft: v => evaluateCSSProp('font', v),
-  ftf: v => evaluateCSSProp('font-family', v, mapValue),
-  ftk: v => evaluateCSSProp('font-kerning', v),
-  fts: v => evaluateCSSProp('font-size', v, pipe(mapValue, parseSingle)),
-  ftStr: v => evaluateCSSProp('font-stretch', v, mapValue),
-  ftSty: v => evaluateCSSProp('font-style', v, mapValue),
-  ftv: v => evaluateCSSProp('font-variant', v, mapValue),
-  ftw: v => evaluateCSSProp('font-weight', v, mapValue),
-  ls: v => evaluateCSSProp('letter-spacing', v, undefined, IS_DEV ? validatePureNumber : undefined),
-  lh: v => evaluateCSSProp('line-height', v, undefined, IS_DEV ? validatePureNumber : undefined),
-  ta: v => evaluateCSSProp('text-align', v, mapValue),
-  td: v => evaluateCSSProp('text-decoration', v, mapValue),
-  ti: v => evaluateCSSProp('text-indent', v, parseSingle),
-  to: v => evaluateCSSProp('text-overflow', v, mapValue),
-  ts: v => evaluateCSSProp('text-shadow', v),
-  tt: v => evaluateCSSProp('text-transform', v, mapValue),
-  va: v => evaluateCSSProp('vertical-align', v, mapValue),
-  ws: v => evaluateCSSProp('white-space', v, mapValue),
-  wb: v => evaluateCSSProp('word-break', v, mapValue),
-  wS: v => evaluateCSSProp('word-spacing', v, parseSingle),
-  ww: v => evaluateCSSProp('word-wrap', v, mapValue),
+  ft: toCSSRule('font'),
+  ftf: pipe(mapValue, toCSSRule('font-family')),
+  ftk: toCSSRule('font-kerning'),
+  fts: pipe(mapValue, parseSingle, toCSSRule('font-size')),
+  ftStr: pipe(mapValue, toCSSRule('font-stretch')),
+  ftSty: pipe(mapValue, toCSSRule('font-style')),
+  ftv: pipe(mapValue, toCSSRule('font-variant')),
+  ftw: pipe(mapValue, toCSSRule('font-weight')),
+  ls: toCSSRule('letter-spacing'),
+  lh: toCSSRule('line-height'),
+  ta: pipe(mapValue, toCSSRule('text-align')),
+  td: pipe(mapValue, toCSSRule('text-decoration')),
+  ti: pipe(parseSingle, toCSSRule('text-indent')),
+  to: pipe(mapValue, toCSSRule('text-overflow')),
+  ts: toCSSRule('text-shadow'),
+  tt: pipe(mapValue, toCSSRule('text-transform')),
+  va: pipe(mapValue, toCSSRule('vertical-align')),
+  ws: pipe(mapValue, toCSSRule('white-space')),
+  wb: pipe(mapValue, toCSSRule('word-break')),
+  wS: pipe(parseSingle, toCSSRule('word-spacing')),
+  ww: pipe(mapValue, toCSSRule('word-wrap')),
   // List
-  lstS: v => evaluateCSSProp('list-style', v, mapValue),
-  lstSI: v => evaluateCSSProp('list-style-image', v),
-  lstSP: v => evaluateCSSProp('list-style-position', v),
-  lstST: v => evaluateCSSProp('list-style-type', v, mapValue),
+  lstS: pipe(mapValue, toCSSRule('list-style')),
+  lstSI: toCSSRule('list-style-image'),
+  lstSP: toCSSRule('list-style-position'),
+  lstST: pipe(mapValue, toCSSRule('list-style-type')),
   // Margin
-  m: v => evaluateCSSProp('margin', v, parseArray),
-  mt: v => evaluateCSSProp('margin-top', v, parseSingle),
-  mr: v => evaluateCSSProp('margin-right', v, parseSingle),
-  mb: v => evaluateCSSProp('margin-bottom', v, parseSingle),
-  ml: v => evaluateCSSProp('margin-left', v, parseSingle),
+  m: pipe(parseArray, toCSSRule('margin')),
+  mt: pipe(parseSingle, toCSSRule('margin-top')),
+  mr: pipe(parseSingle, toCSSRule('margin-right')),
+  mb: pipe(parseSingle, toCSSRule('margin-bottom')),
+  ml: pipe(parseSingle, toCSSRule('margin-left')),
   // Padding
-  p: v => evaluateCSSProp('padding', v, parseArray),
-  pt: v => evaluateCSSProp('padding-top', v, parseSingle),
-  pr: v => evaluateCSSProp('padding-right', v, parseSingle),
-  pb: v => evaluateCSSProp('padding-bottom', v, parseSingle),
-  pl: v => evaluateCSSProp('padding-left', v, parseSingle),
+  p: pipe(parseArray, toCSSRule('padding')),
+  pt: pipe(parseSingle, toCSSRule('padding-top')),
+  pr: pipe(parseSingle, toCSSRule('padding-right')),
+  pb: pipe(parseSingle, toCSSRule('padding-bottom')),
+  pl: pipe(parseSingle, toCSSRule('padding-left')),
   // Background
-  bg: v => evaluateCSSProp('background', v, mapValue),
-  bgi: v => evaluateCSSProp('background-image', v, mapValue),
-  bgc: v => evaluateCSSProp('background-color', v, mapValue),
-  bgs: v => evaluateCSSProp('background-size', v, mapValue),
-  bgr: v => evaluateCSSProp('background-repeat', v, mapValue),
-  bgp: v => evaluateCSSProp('background-position', v, mapValue),
-  bga: v => evaluateCSSProp('background-attachment', v, mapValue),
-  bgbm: v => evaluateCSSProp('background-blend-mode', v, mapValue),
-  bgC: v => evaluateCSSProp('background-clip', v, mapValue),
-  bgo: v => evaluateCSSProp('background-origin', v, mapValue),
+  bg: pipe(mapValue, toCSSRule('background')),
+  bgi: pipe(mapValue, toCSSRule('background-image')),
+  bgc: pipe(mapValue, toCSSRule('background-color')),
+  bgs: pipe(mapValue, toCSSRule('background-size')),
+  bgr: pipe(mapValue, toCSSRule('background-repeat')),
+  bgp: pipe(mapValue, toCSSRule('background-position')),
+  bga: pipe(mapValue, toCSSRule('background-attachment')),
+  bgbm: pipe(mapValue, toCSSRule('background-blend-mode')),
+  bgC: pipe(mapValue, toCSSRule('background-clip')),
+  bgo: pipe(mapValue, toCSSRule('background-origin')),
   // Dimension
-  w: v => evaluateCSSProp('width', v, pipe(mapValue, parseSingle)),
-  h: v => evaluateCSSProp('height', v, pipe(mapValue, parseSingle)),
-  minW: v => evaluateCSSProp('min-width', v, pipe(mapValue, parseSingle)),
-  minH: v => evaluateCSSProp('min-height', v, pipe(mapValue, parseSingle)),
-  maxW: v => evaluateCSSProp('max-width', v, pipe(mapValue, parseSingle)),
-  maxH: v => evaluateCSSProp('max-height', v, pipe(mapValue, parseSingle)),
+  w: pipe(mapValue, parseSingle, toCSSRule('width')),
+  h: pipe(mapValue, parseSingle, toCSSRule('height')),
+  minW: pipe(mapValue, parseSingle, toCSSRule('min-width')),
+  minH: pipe(mapValue, parseSingle, toCSSRule('min-height')),
+  maxW: pipe(mapValue, parseSingle, toCSSRule('max-width')),
+  maxH: pipe(mapValue, parseSingle, toCSSRule('max-height')),
   // Grid
-  g: v => evaluateCSSProp('grid', v),
-  ga: v => evaluateCSSProp('grid-area', v),
-  gac: v => evaluateCSSProp('grid-auto-columns', v),
-  gaf: v => evaluateCSSProp('grid-auto-flow', v),
-  gar: v => evaluateCSSProp('grid-auto-rows', v),
-  gc: v => evaluateCSSProp('grid-column', v),
-  gce: v => evaluateCSSProp('grid-column-end', v),
-  gcg: v => evaluateCSSProp('grid-column-gap', v, parseArray),
-  gcs: v => evaluateCSSProp('grid-column-start', v),
-  gg: v => evaluateCSSProp('grid-gap', v, parseArray),
-  gr: v => evaluateCSSProp('grid-row', v),
-  gre: v => evaluateCSSProp('grid-row-end', v),
-  grg: v => evaluateCSSProp('grid-row-gap', v, parseArray),
-  grs: v => evaluateCSSProp('grid-row-start', v),
-  gt: v => evaluateCSSProp('grid-template', v),
-  gta: v => evaluateCSSProp('grid-template-areas', v),
-  gtc: v => evaluateCSSProp('grid-template-columns', v, parseArray),
-  gtr: v => evaluateCSSProp('grid-template-rows', v, parseArray),
+  g: toCSSRule('grid'),
+  ga: toCSSRule('grid-area'),
+  gac: toCSSRule('grid-auto-columns'),
+  gaf: toCSSRule('grid-auto-flow'),
+  gar: toCSSRule('grid-auto-rows'),
+  gc: toCSSRule('grid-column'),
+  gce: toCSSRule('grid-column-end'),
+  gcg: pipe(parseArray, toCSSRule('grid-column-gap')),
+  gcs: toCSSRule('grid-column-start'),
+  gg: pipe(parseArray, toCSSRule('grid-gap')),
+  gr: toCSSRule('grid-row'),
+  gre: toCSSRule('grid-row-end'),
+  grg: pipe(parseArray, toCSSRule('grid-row-gap')),
+  grs: toCSSRule('grid-row-start'),
+  gt: toCSSRule('grid-template'),
+  gta: toCSSRule('grid-template-areas'),
+  gtc: pipe(parseArray, toCSSRule('grid-template-columns')),
+  gtr: pipe(parseArray, toCSSRule('grid-template-rows')),
   // Border
-  b: v => evaluateCSSProp('border', v),
-  bb: v => evaluateCSSProp('border-bottom', v),
-  bbc: v => evaluateCSSProp('border-bottom-color', v),
-  bblr: v => evaluateCSSProp('border-bottom-left-radius', v, parseSingle),
-  bbrr: v => evaluateCSSProp('border-bottom-right-radius', v, parseSingle),
-  bbs: v => evaluateCSSProp('border-bottom-style', v),
-  bbw: v => evaluateCSSProp('border-bottom-width', v, parseSingle),
-  bC: v => evaluateCSSProp('border-collapse', v),
-  bc: v => evaluateCSSProp('border-color', v, mapValue),
-  bi: v => evaluateCSSProp('border-image', v, mapValue),
-  bio: v => evaluateCSSProp('border-image-outset', v),
-  bir: v => evaluateCSSProp('border-image-repeat', v),
-  bis: v => evaluateCSSProp('border-image-slice', v),
-  biSrc: v => evaluateCSSProp('border-image-source', v),
-  biw: v => evaluateCSSProp('border-image-width', v, parseSingle),
-  bl: v => evaluateCSSProp('border-left', v),
-  blc: v => evaluateCSSProp('border-left-color', v, mapValue),
-  bls: v => evaluateCSSProp('border-left-style', v),
-  blw: v => evaluateCSSProp('border-left-width', v),
-  r: v => evaluateCSSProp('border-radius', v, pipe(mapValue, parseSingle)),
-  br: v => evaluateCSSProp('border-right', v),
-  brc: v => evaluateCSSProp('border-right-color', v, mapValue),
-  brs: v => evaluateCSSProp('border-right-style', v),
-  brw: v => evaluateCSSProp('border-right-width', v, parseSingle),
-  bs: v => evaluateCSSProp('border-spacing', v),
-  bS: v => evaluateCSSProp('border-style', v),
-  bt: v => evaluateCSSProp('border-top', v),
-  btc: v => evaluateCSSProp('border-top-color', v, mapValue),
-  btlr: v => evaluateCSSProp('border-top-left-radius', v, pipe(mapValue, parseSingle)),
-  btrr: v => evaluateCSSProp('border-top-right-radius', v, pipe(mapValue, parseSingle)),
-  bts: v => evaluateCSSProp('border-top-style', v),
-  btw: v => evaluateCSSProp('border-top-width', v, parseSingle),
-  bw: v => evaluateCSSProp('border-width', v, parseSingle),
+  b: toCSSRule('border'),
+  bb: toCSSRule('border-bottom'),
+  bbc: toCSSRule('border-bottom-color'),
+  bblr: pipe(parseSingle, toCSSRule('border-bottom-left-radius')),
+  bbrr: pipe(parseSingle, toCSSRule('border-bottom-right-radius')),
+  bbs: toCSSRule('border-bottom-style'),
+  bbw: pipe(parseSingle, toCSSRule('border-bottom-width')),
+  bC: toCSSRule('border-collapse'),
+  bc: pipe(mapValue, toCSSRule('border-color')),
+  bi: pipe(mapValue, toCSSRule('border-image')),
+  bio: toCSSRule('border-image-outset'),
+  bir: toCSSRule('border-image-repeat'),
+  bis: toCSSRule('border-image-slice'),
+  biSrc: toCSSRule('border-image-source'),
+  biw: pipe(parseSingle, toCSSRule('border-image-width')),
+  bl: toCSSRule('border-left'),
+  blc: pipe(mapValue, toCSSRule('border-left-color')),
+  bls: toCSSRule('border-left-style'),
+  blw: toCSSRule('border-left-width'),
+  r: pipe(mapValue, parseSingle, toCSSRule('border-radius')),
+  br: toCSSRule('border-right'),
+  brc: pipe(mapValue, toCSSRule('border-right-color')),
+  brs: toCSSRule('border-right-style'),
+  brw: pipe(parseSingle, toCSSRule('border-right-width')),
+  bs: toCSSRule('border-spacing'),
+  bS: toCSSRule('border-style'),
+  bt: toCSSRule('border-top'),
+  btc: pipe(mapValue, toCSSRule('border-top-color')),
+  btlr: pipe(mapValue, parseSingle, toCSSRule('border-top-left-radius')),
+  btrr: pipe(mapValue, parseSingle, toCSSRule('border-top-right-radius')),
+  bts: toCSSRule('border-top-style'),
+  btw: pipe(parseSingle, toCSSRule('border-top-width')),
+  bw: pipe(parseSingle, toCSSRule('border-width')),
   // Clip
-  clip: v => evaluateCSSProp('clip', v),
-  clipPath: v => evaluateCSSProp('clip-path', v),
+  clip: toCSSRule('clip'),
+  clipPath: toCSSRule('clip-path'),
   // General
-  d: v => evaluateCSSProp('display', v, mapValue),
-  pos: v => evaluateCSSProp('position', v, mapValue),
-  T: v => evaluateCSSProp('top', v, parseSingle),
-  R: v => evaluateCSSProp('right', v, parseSingle),
-  B: v => evaluateCSSProp('bottom', v, parseSingle),
-  L: v => evaluateCSSProp('left', v, parseSingle),
-  z: v => evaluateCSSProp('z-index', v),
-  c: v => evaluateCSSProp('color', v, mapValue),
-  o: v => evaluateCSSProp('overflow', v, mapValue),
-  ox: v => evaluateCSSProp('overflow-x', v, mapValue),
-  oy: v => evaluateCSSProp('overflow-y', v, mapValue),
-  fl: v => evaluateCSSProp('float', v, mapValue),
-  clr: v => evaluateCSSProp('clear', v, mapValue),
-  v: _v => evaluateCSSProp('visibility', _v, mapValue),
+  d: pipe(mapValue, toCSSRule('display')),
+  pos: pipe(mapValue, toCSSRule('position')),
+  T: pipe(parseSingle, toCSSRule('top')),
+  R: pipe(parseSingle, toCSSRule('right')),
+  B: pipe(parseSingle, toCSSRule('bottom')),
+  L: pipe(parseSingle, toCSSRule('left')),
+  z: toCSSRule('z-index'),
+  c: pipe(mapValue, toCSSRule('color')),
+  o: pipe(mapValue, toCSSRule('overflow')),
+  ox: pipe(mapValue, toCSSRule('overflow-x')),
+  oy: pipe(mapValue, toCSSRule('overflow-y')),
+  fl: pipe(mapValue, toCSSRule('float')),
+  clr: pipe(mapValue, toCSSRule('clear')),
+  v: pipe(mapValue, toCSSRule('visibility')),
   // Columns
-  col: v => evaluateCSSProp('columns', v),
-  cc: v => evaluateCSSProp('column-count', v),
-  cf: v => evaluateCSSProp('column-fill', v),
-  cg: v => evaluateCSSProp('column-gap', v, parseSingle),
-  cr: v => evaluateCSSProp('column-rule', v),
-  crc: v => evaluateCSSProp('column-rule-color', v, mapValue),
-  crs: v => evaluateCSSProp('column-rule-style', v),
-  crw: v => evaluateCSSProp('column-rule-width', v, parseSingle),
-  cs: v => evaluateCSSProp('column-span', v),
-  cw: v => evaluateCSSProp('column-width', v, parseSingle),
-  pba: v => evaluateCSSProp('page-break-after', v),
-  pbb: v => evaluateCSSProp('page-break-before', v),
-  pbi: v => evaluateCSSProp('page-break-inside', v),
+  col: toCSSRule('columns'),
+  cc: toCSSRule('column-count'),
+  cf: toCSSRule('column-fill'),
+  cg: pipe(parseSingle, toCSSRule('column-gap')),
+  cr: toCSSRule('column-rule'),
+  crc: pipe(mapValue, toCSSRule('column-rule-color')),
+  crs: toCSSRule('column-rule-style'),
+  crw: pipe(parseSingle, toCSSRule('column-rule-width')),
+  cs: toCSSRule('column-span'),
+  cw: pipe(parseSingle, toCSSRule('column-width')),
+  pba: toCSSRule('page-break-after'),
+  pbb: toCSSRule('page-break-before'),
+  pbi: toCSSRule('page-break-inside'),
   // Box
-  shadow: v => evaluateCSSProp('box-shadow', v, mapValue),
-  sizing: v => evaluateCSSProp('box-sizing', v),
+  shadow: pipe(mapValue, toCSSRule('box-shadow')),
+  sizing: toCSSRule('box-sizing'),
   // Misc
-  of: v => evaluateCSSProp('object-fit', v, mapValue),
-  oP: v => evaluateCSSProp('object-position', v),
-  op: v => evaluateCSSProp('opacity', v, mapValue),
-  or: v => evaluateCSSProp('order', v),
-  ol: v => evaluateCSSProp('outline', v),
-  mbm: v => evaluateCSSProp('mix-blend-mode', v, mapValue),
-  ct: v => evaluateCSSProp('content', v),
-  cur: v => evaluateCSSProp('cursor', v, mapValue),
-  pe: v => evaluateCSSProp('pointer-events', v, mapValue),
-  fil: v => evaluateCSSProp('filter', v),
-  sb: v => evaluateCSSProp('scroll-behavior', v, mapValue),
-  us: v => evaluateCSSProp('user-select', v, mapValue),
+  of: pipe(mapValue, toCSSRule('object-fit')),
+  oP: toCSSRule('object-position'),
+  op: pipe(mapValue, toCSSRule('opacity')),
+  or: toCSSRule('order'),
+  ol: toCSSRule('outline'),
+  mbm: pipe(mapValue, toCSSRule('mix-blend-mode')),
+  ct: toCSSRule('content'),
+  cur: pipe(mapValue, toCSSRule('cursor')),
+  pe: pipe(mapValue, toCSSRule('pointer-events')),
+  fil: toCSSRule('filter'),
+  sb: pipe(mapValue, toCSSRule('scroll-behavior')),
+  us: pipe(mapValue, toCSSRule('user-select')),
   // Customs
@@ -207,0 +199,0 @@ styleText: i => i,

package.json

 {
     "name": "@cryptic-css/core",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "> TODO: description",
@@ -35,3 +35,3 @@ "author": "Viktor Vincze <[e-mail]>",
     },
-    "gitHead": "fee5891d90bcf90b20883af1af195e53a16bd5fa"
+    "gitHead": "204bc1505ce5ffa497273ac5595cf71a17f7d795"
 }

src/ccss.test.ts

 import ccss, { setValueMap } from '@'
 
 setValueMap({
-    'border-radius': {
+    r: {
         global: 6
@@ -6,0 +6,0 @@ }

src/ccss.ts

@@ -10,3 +10,3 @@ import { TCCSSCoreProp } from './types'
             if (props[k]) {
-                generated += props[k](v[k], v, k)
+                generated += props[k](k, v[k], v)
             }
@@ -13,0 +13,0 @@ }

src/maps.d.ts

 export declare const valueMap: {
-    'animation-direction': {
+    aDir: {
         n: string;
@@ -8,3 +8,3 @@ r: string;
     };
-    'animation-fill-mode': {
+    afm: {
         n: string;
@@ -15,11 +15,11 @@ fwd: string;
     };
-    'animation-play-state': {
+    aps: {
         p: string;
         r: string;
     };
-    'backface-visibility': {
+    bv: {
         v: string;
         h: string;
     };
-    'align-items': {
+    ai: {
         s: string;
@@ -32,3 +32,3 @@ fs: string;
     };
-    'justify-items': {
+    ji: {
         s: string;
@@ -41,3 +41,3 @@ fs: string;
     };
-    'justify-content': {
+    jc: {
         s: string;
@@ -50,3 +50,3 @@ fs: string;
     };
-    'align-content': {
+    ac: {
         s: string;
@@ -59,3 +59,3 @@ fs: string;
     };
-    'align-self': {
+    aS: {
         s: string;
@@ -68,3 +68,3 @@ fs: string;
     };
-    'justify-self': {
+    jS: {
         s: string;
@@ -77,3 +77,3 @@ fs: string;
     };
-    'flex-direction': {
+    fd: {
         r: string;
@@ -84,6 +84,6 @@ rr: string;
     };
-    'flex-wrap': {
+    fw: {
         w: string;
     };
-    position: {
+    pos: {
         a: string;
@@ -94,3 +94,3 @@ f: string;
     };
-    display: {
+    d: {
         n: string;
@@ -106,3 +106,3 @@ i: string;
     };
-    overflow: {
+    o: {
         h: string;
@@ -113,3 +113,3 @@ v: string;
     };
-    'overflow-x': {
+    ox: {
         h: string;
@@ -120,3 +120,3 @@ v: string;
     };
-    'overflow-y': {
+    oy: {
         h: string;
@@ -127,3 +127,3 @@ v: string;
     };
-    float: {
+    fl: {
         n: string;
@@ -133,3 +133,3 @@ l: string;
     };
-    clear: {
+    clr: {
         n: string;
@@ -140,3 +140,3 @@ l: string;
     };
-    visibility: {
+    v: {
         v: string;
@@ -146,3 +146,3 @@ h: string;
     };
-    'text-align': {
+    ta: {
         l: string;
@@ -153,3 +153,3 @@ c: string;
     };
-    'text-decoration': {
+    td: {
         n: string;
@@ -160,7 +160,7 @@ u: string;
     };
-    'text-overflow': {
+    to: {
         c: string;
         e: string;
     };
-    'text-transform': {
+    tt: {
         n: string;
@@ -171,3 +171,3 @@ c: string;
     };
-    'vertical-align': {
+    va: {
         b: string;
@@ -182,3 +182,3 @@ sub: string;
     };
-    'font-stretch': {
+    ftStr: {
         uc: string;
@@ -194,3 +194,3 @@ ec: string;
     };
-    'font-style': {
+    ftSty: {
         n: string;
@@ -200,7 +200,7 @@ i: string;
     };
-    'font-variant': {
+    ftv: {
         n: string;
         sc: string;
     };
-    'font-weight': {
+    ftw: {
         n: string;
@@ -211,3 +211,3 @@ b: string;
     };
-    'white-space': {
+    ws: {
         n: string;
@@ -219,3 +219,3 @@ nw: string;
     };
-    'word-break': {
+    wb: {
         n: string;
@@ -226,17 +226,17 @@ ba: string;
     };
-    'word-wrap': {
+    ww: {
         n: string;
         b: string;
     };
-    'list-style': {
+    lstS: {
         n: string;
     };
-    'list-style-type': {
+    lstST: {
         n: string;
     };
-    'background-size': {
+    bgs: {
         cr: string;
         cn: string;
     };
-    'background-repeat': {
+    bgr: {
         x: string;
@@ -248,6 +248,6 @@ y: string;
     };
-    'background-position': {
+    bgp: {
         c: string;
     };
-    'background-attachment': {
+    bga: {
         s: string;
@@ -257,3 +257,3 @@ f: string;
     };
-    'background-blend-mode': {
+    bgbm: {
         n: string;
@@ -270,9 +270,6 @@ m: string;
     };
-    background: {
+    bg: {
         t: string;
     };
-    'background-color': {
-        t: string;
-    };
-    'background-clip': {
+    bgc: {
         b: string;
@@ -282,3 +279,3 @@ p: string;
     };
-    'background-origin': {
+    bgo: {
         b: string;
@@ -288,3 +285,3 @@ p: string;
     };
-    'object-fit': {
+    of: {
         f: string;
@@ -296,3 +293,3 @@ cn: string;
     };
-    'mix-blend-mode': {
+    mbm: {
         n: string;
@@ -313,3 +310,3 @@ m: string;
     };
-    cursor: {
+    cur: {
         al: string;
@@ -352,11 +349,11 @@ all: string;
     };
-    'pointer-events': {
+    pe: {
         a: string;
         n: string;
     };
-    'scroll-behavior': {
+    sb: {
         a: string;
         s: string;
     };
-    'user-select': {
+    us: {
         a: string;
@@ -363,0 +360,0 @@ n: string;

src/maps.ts

@@ -24,3 +24,3 @@ import mergeDeep from './utils'
 export const valueMap = {
-    'animation-direction': {
+    aDir: {
         n: 'normal',
@@ -31,3 +31,3 @@ r: 'reverse',
     },
-    'animation-fill-mode': {
+    afm: {
         n: 'none',
@@ -40,17 +40,17 @@ // @ts-ignore
     },
-    'animation-play-state': {
+    aps: {
         p: 'paused',
         r: 'running'
     },
-    'backface-visibility': {
+    bv: {
         v: 'visible',
         h: 'hidden'
     },
-    'align-items': aligns,
-    'justify-items': aligns,
-    'justify-content': aligns,
-    'align-content': aligns,
-    'align-self': aligns,
-    'justify-self': aligns,
-    'flex-direction': {
+    ai: aligns,
+    ji: aligns,
+    jc: aligns,
+    ac: aligns,
+    aS: aligns,
+    jS: aligns,
+    fd: {
         r: 'row',
@@ -61,6 +61,6 @@ rr: 'row-reverse',
     },
-    'flex-wrap': {
+    fw: {
         w: 'wrap'
     },
-    position: {
+    pos: {
         a: 'absolute',
@@ -71,3 +71,3 @@ f: 'fixed',
     },
-    display: {
+    d: {
         // @ts-ignore
@@ -85,6 +85,6 @@ [false]: 'none',
     },
-    overflow: overflows,
-    'overflow-x': overflows,
-    'overflow-y': overflows,
-    float: {
+    o: overflows,
+    ox: overflows,
+    oy: overflows,
+    fl: {
         // @ts-ignore
@@ -96,3 +96,3 @@ [false]: 'none',
     },
-    clear: {
+    clr: {
         // @ts-ignore
@@ -107,3 +107,3 @@ [false]: 'none',
     },
-    visibility: {
+    v: {
         // @ts-ignore
@@ -117,3 +117,3 @@ [true]: 'visible',
     },
-    'text-align': {
+    ta: {
         l: 'left',
@@ -124,3 +124,3 @@ c: 'center',
     },
-    'text-decoration': {
+    td: {
         n: 'none',
@@ -133,7 +133,7 @@ // @ts-ignore
     },
-    'text-overflow': {
+    to: {
         c: 'clip',
         e: 'ellipsis'
     },
-    'text-transform': {
+    tt: {
         n: 'none',
@@ -146,3 +146,3 @@ // @ts-ignore
     },
-    'vertical-align': {
+    va: {
         b: 'baseline',
@@ -157,3 +157,3 @@ sub: 'sub',
     },
-    'font-stretch': {
+    ftStr: {
         uc: 'ultra-condensed',
@@ -169,3 +169,3 @@ ec: 'extra-condensed',
     },
-    'font-style': {
+    ftSty: {
         n: 'normal',
@@ -175,7 +175,7 @@ i: 'italic',
     },
-    'font-variant': {
+    ftv: {
         n: 'normal',
         sc: 'small-caps'
     },
-    'font-weight': {
+    ftw: {
         n: 'normal',
@@ -186,3 +186,3 @@ b: 'bold',
     },
-    'white-space': {
+    ws: {
         n: 'normal',
@@ -194,3 +194,3 @@ nw: 'nowrap',
     },
-    'word-break': {
+    wb: {
         n: 'normal',
@@ -201,7 +201,7 @@ ba: 'break-all',
     },
-    'word-wrap': {
+    ww: {
         n: 'normal',
         b: 'break-word'
     },
-    'list-style': {
+    lstS: {
         // @ts-ignore
@@ -211,3 +211,3 @@ [false]: 'none',
     },
-    'list-style-type': {
+    lstST: {
         // @ts-ignore
@@ -217,7 +217,7 @@ [false]: 'none',
     },
-    'background-size': {
+    bgs: {
         cr: 'cover',
         cn: 'contain'
     },
-    'background-repeat': {
+    bgr: {
         // @ts-ignore
@@ -233,6 +233,6 @@ [true]: 'repeat',
     },
-    'background-position': {
+    bgp: {
         c: 'center'
     },
-    'background-attachment': {
+    bga: {
         s: 'scroll',
@@ -242,3 +242,3 @@ f: 'fixed',
     },
-    'background-blend-mode': {
+    bgbm: {
         n: 'normal',
@@ -255,9 +255,9 @@ m: 'multiply',
     },
-    background: {
+    bg: {
         t: 'transparent'
     },
-    'background-color': {
+    bgc: {
         t: 'transparent'
     },
-    'background-clip': {
+    bgc: {
         b: 'border-box',
@@ -267,3 +267,3 @@ p: 'padding-box',
     },
-    'background-origin': {
+    bgo: {
         b: 'border-box',
@@ -273,3 +273,3 @@ p: 'padding-box',
     },
-    'object-fit': {
+    of: {
         f: 'fill',
@@ -283,3 +283,3 @@ cn: 'contain',
     },
-    'mix-blend-mode': {
+    mbm: {
         n: 'normal',
@@ -300,3 +300,3 @@ m: 'multiply',
     },
-    cursor: {
+    cur: {
         al: 'alias',
@@ -339,3 +339,3 @@ all: 'all-scroll',
     },
-    'pointer-events': {
+    pe: {
         // @ts-ignore
@@ -348,7 +348,7 @@ [true]: 'auto',
     },
-    'scroll-behavior': {
+    sb: {
         a: 'auto',
         s: 'smooth'
     },
-    'user-select': {
+    us: {
         a: 'auto',
@@ -355,0 +355,0 @@ n: 'none',

src/parsers.d.ts

@@ -1,7 +0,7 @@
-export declare const evaluateCSSProp: (...args: any[]) => any;
-export declare const parseSingle: (input: any) => any;
-export declare const parseArray: (input: any) => any;
-export declare const mapValue: (input: any, prop: any) => any;
-export declare const pipe: (...fs: any[]) => (...args: any[]) => any;
-export declare const parsePseudo: (input: any, all: any, prop: any) => string;
+export declare const toCSSRule: (cssProp: any) => (key: any, input: any) => string;
+export declare const parseSingle: (prop: any, input: any) => any;
+export declare const parseArray: (prop: any, input: any) => any;
+export declare const mapValue: (prop: any, input: any) => any;
+export declare const pipe: (...fs: any[]) => (prop: any, input: any, original: any) => any;
+export declare const parsePseudo: (prop: any, input: any) => string;
 /**
@@ -19,2 +19,2 @@ * You can pass children to your ccss supporting both pseudo classes and nested selectors
  */
-export declare const child: (i: any) => string;
+export declare const child: (prop: any, input: any) => string;

src/parsers.ts

@@ -5,22 +5,7 @@ import options from './options'
 
-const IS_PROD = process.env.NODE_ENV === 'production'
+export const toCSSRule = cssProp => (key, input) => {
+    return input === undefined ? '' : `${cssProp}: ${input};`
+}
 
-const _evaluateCSSProp = (prop, value, transformer?) =>
-    value === undefined ? '' : `${prop}: ${transformer ? transformer(value, prop) : value};`
-
-export const evaluateCSSProp =
-    process.env.NODE_ENV === 'production'
-        ? _evaluateCSSProp
-        : (...args) => {
-              if (!IS_PROD) {
-                  try {
-                      args[3] && args[3](args)
-                      // eslint-disable-next-line no-empty
-                  } catch {}
-              }
-              // @ts-ignore
-              return _evaluateCSSProp(...args)
-          }
-
-export const parseSingle = input => {
+export const parseSingle = (prop, input) => {
     switch (typeof input) {
@@ -35,6 +20,6 @@ case 'number':
 
-const applyArray = input => {
+const applyArray = (prop, input) => {
     let out = ''
     for (const i of input) {
-        out += `${parseSingle(i)} `
+        out += `${parseSingle(prop, i)} `
     }
@@ -44,14 +29,14 @@ return out
 
-export const parseArray = input => {
+export const parseArray = (prop, input) => {
     switch (true) {
         case Array.isArray(input):
-            return applyArray(input)
+            return applyArray(prop, input)
         case input:
-            return applyArray([1])
+            return applyArray(prop, [1])
         default:
-            return parseSingle(input)
+            return parseSingle(prop, input)
     }
 }
 
-export const mapValue = (input, prop) => {
+export const mapValue = (prop, input) => {
     return valueMap?.[prop]?.[input] || input
@@ -61,7 +46,11 @@ }
 export const pipe = function(...fs) {
-    // @ts-ignore
-    return (...args) => fs.reduce((args, f) => [f.apply(this, args)], args)[0]
+    return (prop, input, original) => {
+        for (const f of fs) {
+            input = f(prop, input, original)
+        }
+        return input
+    }
 }
 
-export const parsePseudo = (input, all, prop) => `
+export const parsePseudo = (prop, input) => `
     :${pseudoMap[prop]} {
@@ -84,10 +73,10 @@ ${ccss(input)}
  */
-export const child = i => {
+export const child = (prop, input) => {
     let generated = ''
     // eslint-disable-next-line no-restricted-syntax
-    for (const k in i) {
-        if (Object.prototype.hasOwnProperty.call(i, k)) {
+    for (const k in input) {
+        if (Object.prototype.hasOwnProperty.call(input, k)) {
             generated += `
             ${pseudoMap[k] ? `:${pseudoMap[k]}` : k} {
-                ${ccss(i[k])}
+                ${ccss(input[k])}
             }`
@@ -94,0 +83,0 @@ }

src/props.ts

@@ -1,229 +0,214 @@
-import { pipe, mapValue, parseArray, parseSingle, evaluateCSSProp, child, parsePseudo } from './parsers'
+import { pipe, mapValue, parseArray, parseSingle, toCSSRule, child, parsePseudo } from './parsers'
 import ICCSSProps from './types'
 import { pseudoMap } from './maps'
 
-const IS_DEV = process.env.NODE_ENV !== 'production'
-
-if (IS_DEV) {
-    var validateTime = (n, v) =>
-        v &&
-        !Number.isNaN(v) &&
-        !v.startsWith('var') &&
-        console.warn(`'${n}' with value '${v}' is a number. You didn't specify any unit like 's' or 'ms'.`)
-
-    var validatePureNumber = (n, v) =>
-        v &&
-        Number.isNaN(v) &&
-        console.warn(`'${n}' with value '${v}' is a not number. You should only use plain number without unit here.`)
-}
-
 const props: ICCSSProps = {
     // Animation + 3D
-    a: v => evaluateCSSProp('animation', v),
-    ad: v => evaluateCSSProp('animation-delay', v, mapValue, IS_DEV ? validateTime : undefined),
-    aDir: v => evaluateCSSProp('animation-direction', v, mapValue),
-    aD: v => evaluateCSSProp('animation-duration', v, mapValue, IS_DEV ? validateTime : undefined),
-    afm: v => evaluateCSSProp('animation-fill-mode', v, mapValue),
-    aic: v => evaluateCSSProp('animation-iteration-count', v),
-    an: v => evaluateCSSProp('animation-name', v),
-    aps: v => evaluateCSSProp('animation-play-state', v, mapValue),
-    ats: v => evaluateCSSProp('animation-timing-function', v, mapValue),
-    bv: v => evaluateCSSProp('backface-visibility', v, mapValue),
-    per: v => evaluateCSSProp('perspective', v),
-    pero: v => evaluateCSSProp('perspective-origin', v),
-    tf: v => evaluateCSSProp('transform', v),
-    tfo: v => evaluateCSSProp('transform-origin', v),
-    tfs: v => evaluateCSSProp('transform-style', v),
-    tr: v => evaluateCSSProp('transition', v, mapValue),
-    trD: v => evaluateCSSProp('transition-delay', v, mapValue, IS_DEV ? validateTime : undefined),
-    trd: v => evaluateCSSProp('transition-duration', v, mapValue, IS_DEV ? validateTime : undefined),
-    trp: v => evaluateCSSProp('transition-property', v),
-    trt: v => evaluateCSSProp('transition-timing-function', v),
+    a: toCSSRule('animation'),
+    ad: pipe(mapValue, toCSSRule('animation-delay')),
+    aDir: pipe(mapValue, toCSSRule('animation-direction')),
+    aD: pipe(mapValue, toCSSRule('animation-duration')),
+    afm: pipe(mapValue, toCSSRule('animation-fill-mode')),
+    aic: toCSSRule('animation-iteration-count'),
+    an: toCSSRule('animation-name'),
+    aps: pipe(mapValue, toCSSRule('animation-play-state')),
+    ats: pipe(mapValue, toCSSRule('animation-timing-function')),
+    bv: pipe(mapValue, toCSSRule('backface-visibility')),
+    per: toCSSRule('perspective'),
+    pero: toCSSRule('perspective-origin'),
+    tf: toCSSRule('transform'),
+    tfo: toCSSRule('transform-origin'),
+    tfs: toCSSRule('transform-style'),
+    tr: pipe(mapValue, toCSSRule('transition')),
+    trD: pipe(mapValue, toCSSRule('transition-delay')),
+    trd: pipe(mapValue, toCSSRule('transition-duration')),
+    trp: toCSSRule('transition-property'),
+    trt: toCSSRule('transition-timing-function'),
 
     // Flex
-    fd: v => evaluateCSSProp('flex-direction', v, mapValue),
-    fw: v => evaluateCSSProp('flex-wrap', v, mapValue),
-    fb: v => evaluateCSSProp('flex-basis', v, parseSingle),
-    ff: v => evaluateCSSProp('flex-flow', v),
-    fg: v => evaluateCSSProp('flex-grow', v),
-    fs: v => evaluateCSSProp('flex-shrink', v),
-    ai: v => evaluateCSSProp('align-items', v, mapValue),
-    ac: v => evaluateCSSProp('align-content', v, mapValue),
-    ji: v => evaluateCSSProp('justify-items', v, mapValue),
-    jc: v => evaluateCSSProp('justify-content', v, mapValue),
-    aS: v => evaluateCSSProp('align-self', v, mapValue),
-    jS: v => evaluateCSSProp('justify-self', v, mapValue),
+    fd: pipe(mapValue, toCSSRule('flex-direction')),
+    fw: pipe(mapValue, toCSSRule('flex-wrap')),
+    fb: pipe(parseSingle, toCSSRule('flex-basis')),
+    ff: toCSSRule('flex-flow'),
+    fg: toCSSRule('flex-grow'),
+    fs: toCSSRule('flex-shrink'),
+    ai: pipe(mapValue, toCSSRule('align-items')),
+    ac: pipe(mapValue, toCSSRule('align-content')),
+    ji: pipe(mapValue, toCSSRule('justify-items')),
+    jc: pipe(mapValue, toCSSRule('justify-content')),
+    aS: pipe(mapValue, toCSSRule('align-self')),
+    jS: pipe(mapValue, toCSSRule('justify-self')),
 
     // Font + text related
-    ft: v => evaluateCSSProp('font', v),
-    ftf: v => evaluateCSSProp('font-family', v, mapValue),
-    ftk: v => evaluateCSSProp('font-kerning', v),
-    fts: v => evaluateCSSProp('font-size', v, pipe(mapValue, parseSingle)),
-    ftStr: v => evaluateCSSProp('font-stretch', v, mapValue),
-    ftSty: v => evaluateCSSProp('font-style', v, mapValue),
-    ftv: v => evaluateCSSProp('font-variant', v, mapValue),
-    ftw: v => evaluateCSSProp('font-weight', v, mapValue),
-    ls: v => evaluateCSSProp('letter-spacing', v, undefined, IS_DEV ? validatePureNumber : undefined),
-    lh: v => evaluateCSSProp('line-height', v, undefined, IS_DEV ? validatePureNumber : undefined),
+    ft: toCSSRule('font'),
+    ftf: pipe(mapValue, toCSSRule('font-family')),
+    ftk: toCSSRule('font-kerning'),
+    fts: pipe(mapValue, parseSingle, toCSSRule('font-size')),
+    ftStr: pipe(mapValue, toCSSRule('font-stretch')),
+    ftSty: pipe(mapValue, toCSSRule('font-style')),
+    ftv: pipe(mapValue, toCSSRule('font-variant')),
+    ftw: pipe(mapValue, toCSSRule('font-weight')),
+    ls: toCSSRule('letter-spacing'),
+    lh: toCSSRule('line-height'),
 
-    ta: v => evaluateCSSProp('text-align', v, mapValue),
-    td: v => evaluateCSSProp('text-decoration', v, mapValue),
-    ti: v => evaluateCSSProp('text-indent', v, parseSingle),
-    to: v => evaluateCSSProp('text-overflow', v, mapValue),
-    ts: v => evaluateCSSProp('text-shadow', v),
-    tt: v => evaluateCSSProp('text-transform', v, mapValue),
+    ta: pipe(mapValue, toCSSRule('text-align')),
+    td: pipe(mapValue, toCSSRule('text-decoration')),
+    ti: pipe(parseSingle, toCSSRule('text-indent')),
+    to: pipe(mapValue, toCSSRule('text-overflow')),
+    ts: toCSSRule('text-shadow'),
+    tt: pipe(mapValue, toCSSRule('text-transform')),
 
-    va: v => evaluateCSSProp('vertical-align', v, mapValue),
-    ws: v => evaluateCSSProp('white-space', v, mapValue),
-    wb: v => evaluateCSSProp('word-break', v, mapValue),
-    wS: v => evaluateCSSProp('word-spacing', v, parseSingle),
-    ww: v => evaluateCSSProp('word-wrap', v, mapValue),
+    va: pipe(mapValue, toCSSRule('vertical-align')),
+    ws: pipe(mapValue, toCSSRule('white-space')),
+    wb: pipe(mapValue, toCSSRule('word-break')),
+    wS: pipe(parseSingle, toCSSRule('word-spacing')),
+    ww: pipe(mapValue, toCSSRule('word-wrap')),
 
     // List
-    lstS: v => evaluateCSSProp('list-style', v, mapValue),
-    lstSI: v => evaluateCSSProp('list-style-image', v),
-    lstSP: v => evaluateCSSProp('list-style-position', v),
-    lstST: v => evaluateCSSProp('list-style-type', v, mapValue),
+    lstS: pipe(mapValue, toCSSRule('list-style')),
+    lstSI: toCSSRule('list-style-image'),
+    lstSP: toCSSRule('list-style-position'),
+    lstST: pipe(mapValue, toCSSRule('list-style-type')),
 
     // Margin
-    m: v => evaluateCSSProp('margin', v, parseArray),
-    mt: v => evaluateCSSProp('margin-top', v, parseSingle),
-    mr: v => evaluateCSSProp('margin-right', v, parseSingle),
-    mb: v => evaluateCSSProp('margin-bottom', v, parseSingle),
-    ml: v => evaluateCSSProp('margin-left', v, parseSingle),
+    m: pipe(parseArray, toCSSRule('margin')),
+    mt: pipe(parseSingle, toCSSRule('margin-top')),
+    mr: pipe(parseSingle, toCSSRule('margin-right')),
+    mb: pipe(parseSingle, toCSSRule('margin-bottom')),
+    ml: pipe(parseSingle, toCSSRule('margin-left')),
 
     // Padding
-    p: v => evaluateCSSProp('padding', v, parseArray),
-    pt: v => evaluateCSSProp('padding-top', v, parseSingle),
-    pr: v => evaluateCSSProp('padding-right', v, parseSingle),
-    pb: v => evaluateCSSProp('padding-bottom', v, parseSingle),
-    pl: v => evaluateCSSProp('padding-left', v, parseSingle),
+    p: pipe(parseArray, toCSSRule('padding')),
+    pt: pipe(parseSingle, toCSSRule('padding-top')),
+    pr: pipe(parseSingle, toCSSRule('padding-right')),
+    pb: pipe(parseSingle, toCSSRule('padding-bottom')),
+    pl: pipe(parseSingle, toCSSRule('padding-left')),
 
     // Background
-    bg: v => evaluateCSSProp('background', v, mapValue),
-    bgi: v => evaluateCSSProp('background-image', v, mapValue),
-    bgc: v => evaluateCSSProp('background-color', v, mapValue),
-    bgs: v => evaluateCSSProp('background-size', v, mapValue),
-    bgr: v => evaluateCSSProp('background-repeat', v, mapValue),
-    bgp: v => evaluateCSSProp('background-position', v, mapValue),
-    bga: v => evaluateCSSProp('background-attachment', v, mapValue),
-    bgbm: v => evaluateCSSProp('background-blend-mode', v, mapValue),
-    bgC: v => evaluateCSSProp('background-clip', v, mapValue),
-    bgo: v => evaluateCSSProp('background-origin', v, mapValue),
+    bg: pipe(mapValue, toCSSRule('background')),
+    bgi: pipe(mapValue, toCSSRule('background-image')),
+    bgc: pipe(mapValue, toCSSRule('background-color')),
+    bgs: pipe(mapValue, toCSSRule('background-size')),
+    bgr: pipe(mapValue, toCSSRule('background-repeat')),
+    bgp: pipe(mapValue, toCSSRule('background-position')),
+    bga: pipe(mapValue, toCSSRule('background-attachment')),
+    bgbm: pipe(mapValue, toCSSRule('background-blend-mode')),
+    bgC: pipe(mapValue, toCSSRule('background-clip')),
+    bgo: pipe(mapValue, toCSSRule('background-origin')),
 
     // Dimension
-    w: v => evaluateCSSProp('width', v, pipe(mapValue, parseSingle)),
-    h: v => evaluateCSSProp('height', v, pipe(mapValue, parseSingle)),
-    minW: v => evaluateCSSProp('min-width', v, pipe(mapValue, parseSingle)),
-    minH: v => evaluateCSSProp('min-height', v, pipe(mapValue, parseSingle)),
-    maxW: v => evaluateCSSProp('max-width', v, pipe(mapValue, parseSingle)),
-    maxH: v => evaluateCSSProp('max-height', v, pipe(mapValue, parseSingle)),
+    w: pipe(mapValue, parseSingle, toCSSRule('width')),
+    h: pipe(mapValue, parseSingle, toCSSRule('height')),
+    minW: pipe(mapValue, parseSingle, toCSSRule('min-width')),
+    minH: pipe(mapValue, parseSingle, toCSSRule('min-height')),
+    maxW: pipe(mapValue, parseSingle, toCSSRule('max-width')),
+    maxH: pipe(mapValue, parseSingle, toCSSRule('max-height')),
 
     // Grid
-    g: v => evaluateCSSProp('grid', v),
-    ga: v => evaluateCSSProp('grid-area', v),
-    gac: v => evaluateCSSProp('grid-auto-columns', v),
-    gaf: v => evaluateCSSProp('grid-auto-flow', v),
-    gar: v => evaluateCSSProp('grid-auto-rows', v),
-    gc: v => evaluateCSSProp('grid-column', v),
-    gce: v => evaluateCSSProp('grid-column-end', v),
-    gcg: v => evaluateCSSProp('grid-column-gap', v, parseArray),
-    gcs: v => evaluateCSSProp('grid-column-start', v),
-    gg: v => evaluateCSSProp('grid-gap', v, parseArray),
-    gr: v => evaluateCSSProp('grid-row', v),
-    gre: v => evaluateCSSProp('grid-row-end', v),
-    grg: v => evaluateCSSProp('grid-row-gap', v, parseArray),
-    grs: v => evaluateCSSProp('grid-row-start', v),
-    gt: v => evaluateCSSProp('grid-template', v),
-    gta: v => evaluateCSSProp('grid-template-areas', v),
-    gtc: v => evaluateCSSProp('grid-template-columns', v, parseArray),
-    gtr: v => evaluateCSSProp('grid-template-rows', v, parseArray),
+    g: toCSSRule('grid'),
+    ga: toCSSRule('grid-area'),
+    gac: toCSSRule('grid-auto-columns'),
+    gaf: toCSSRule('grid-auto-flow'),
+    gar: toCSSRule('grid-auto-rows'),
+    gc: toCSSRule('grid-column'),
+    gce: toCSSRule('grid-column-end'),
+    gcg: pipe(parseArray, toCSSRule('grid-column-gap')),
+    gcs: toCSSRule('grid-column-start'),
+    gg: pipe(parseArray, toCSSRule('grid-gap')),
+    gr: toCSSRule('grid-row'),
+    gre: toCSSRule('grid-row-end'),
+    grg: pipe(parseArray, toCSSRule('grid-row-gap')),
+    grs: toCSSRule('grid-row-start'),
+    gt: toCSSRule('grid-template'),
+    gta: toCSSRule('grid-template-areas'),
+    gtc: pipe(parseArray, toCSSRule('grid-template-columns')),
+    gtr: pipe(parseArray, toCSSRule('grid-template-rows')),
 
     // Border
-    b: v => evaluateCSSProp('border', v),
-    bb: v => evaluateCSSProp('border-bottom', v),
-    bbc: v => evaluateCSSProp('border-bottom-color', v),
-    bblr: v => evaluateCSSProp('border-bottom-left-radius', v, parseSingle),
-    bbrr: v => evaluateCSSProp('border-bottom-right-radius', v, parseSingle),
-    bbs: v => evaluateCSSProp('border-bottom-style', v),
-    bbw: v => evaluateCSSProp('border-bottom-width', v, parseSingle),
-    bC: v => evaluateCSSProp('border-collapse', v),
-    bc: v => evaluateCSSProp('border-color', v, mapValue),
-    bi: v => evaluateCSSProp('border-image', v, mapValue),
-    bio: v => evaluateCSSProp('border-image-outset', v),
-    bir: v => evaluateCSSProp('border-image-repeat', v),
-    bis: v => evaluateCSSProp('border-image-slice', v),
-    biSrc: v => evaluateCSSProp('border-image-source', v),
-    biw: v => evaluateCSSProp('border-image-width', v, parseSingle),
-    bl: v => evaluateCSSProp('border-left', v),
-    blc: v => evaluateCSSProp('border-left-color', v, mapValue),
-    bls: v => evaluateCSSProp('border-left-style', v),
-    blw: v => evaluateCSSProp('border-left-width', v),
-    r: v => evaluateCSSProp('border-radius', v, pipe(mapValue, parseSingle)),
-    br: v => evaluateCSSProp('border-right', v),
-    brc: v => evaluateCSSProp('border-right-color', v, mapValue),
-    brs: v => evaluateCSSProp('border-right-style', v),
-    brw: v => evaluateCSSProp('border-right-width', v, parseSingle),
-    bs: v => evaluateCSSProp('border-spacing', v),
-    bS: v => evaluateCSSProp('border-style', v),
-    bt: v => evaluateCSSProp('border-top', v),
-    btc: v => evaluateCSSProp('border-top-color', v, mapValue),
-    btlr: v => evaluateCSSProp('border-top-left-radius', v, pipe(mapValue, parseSingle)),
-    btrr: v => evaluateCSSProp('border-top-right-radius', v, pipe(mapValue, parseSingle)),
-    bts: v => evaluateCSSProp('border-top-style', v),
-    btw: v => evaluateCSSProp('border-top-width', v, parseSingle),
-    bw: v => evaluateCSSProp('border-width', v, parseSingle),
+    b: toCSSRule('border'),
+    bb: toCSSRule('border-bottom'),
+    bbc: toCSSRule('border-bottom-color'),
+    bblr: pipe(parseSingle, toCSSRule('border-bottom-left-radius')),
+    bbrr: pipe(parseSingle, toCSSRule('border-bottom-right-radius')),
+    bbs: toCSSRule('border-bottom-style'),
+    bbw: pipe(parseSingle, toCSSRule('border-bottom-width')),
+    bC: toCSSRule('border-collapse'),
+    bc: pipe(mapValue, toCSSRule('border-color')),
+    bi: pipe(mapValue, toCSSRule('border-image')),
+    bio: toCSSRule('border-image-outset'),
+    bir: toCSSRule('border-image-repeat'),
+    bis: toCSSRule('border-image-slice'),
+    biSrc: toCSSRule('border-image-source'),
+    biw: pipe(parseSingle, toCSSRule('border-image-width')),
+    bl: toCSSRule('border-left'),
+    blc: pipe(mapValue, toCSSRule('border-left-color')),
+    bls: toCSSRule('border-left-style'),
+    blw: toCSSRule('border-left-width'),
+    r: pipe(mapValue, parseSingle, toCSSRule('border-radius')),
+    br: toCSSRule('border-right'),
+    brc: pipe(mapValue, toCSSRule('border-right-color')),
+    brs: toCSSRule('border-right-style'),
+    brw: pipe(parseSingle, toCSSRule('border-right-width')),
+    bs: toCSSRule('border-spacing'),
+    bS: toCSSRule('border-style'),
+    bt: toCSSRule('border-top'),
+    btc: pipe(mapValue, toCSSRule('border-top-color')),
+    btlr: pipe(mapValue, parseSingle, toCSSRule('border-top-left-radius')),
+    btrr: pipe(mapValue, parseSingle, toCSSRule('border-top-right-radius')),
+    bts: toCSSRule('border-top-style'),
+    btw: pipe(parseSingle, toCSSRule('border-top-width')),
+    bw: pipe(parseSingle, toCSSRule('border-width')),
 
     // Clip
-    clip: v => evaluateCSSProp('clip', v),
-    clipPath: v => evaluateCSSProp('clip-path', v),
+    clip: toCSSRule('clip'),
+    clipPath: toCSSRule('clip-path'),
 
     // General
-    d: v => evaluateCSSProp('display', v, mapValue),
-    pos: v => evaluateCSSProp('position', v, mapValue),
-    T: v => evaluateCSSProp('top', v, parseSingle),
-    R: v => evaluateCSSProp('right', v, parseSingle),
-    B: v => evaluateCSSProp('bottom', v, parseSingle),
-    L: v => evaluateCSSProp('left', v, parseSingle),
-    z: v => evaluateCSSProp('z-index', v),
-    c: v => evaluateCSSProp('color', v, mapValue),
-    o: v => evaluateCSSProp('overflow', v, mapValue),
-    ox: v => evaluateCSSProp('overflow-x', v, mapValue),
-    oy: v => evaluateCSSProp('overflow-y', v, mapValue),
-    fl: v => evaluateCSSProp('float', v, mapValue),
-    clr: v => evaluateCSSProp('clear', v, mapValue),
-    v: v => evaluateCSSProp('visibility', v, mapValue),
+    d: pipe(mapValue, toCSSRule('display')),
+    pos: pipe(mapValue, toCSSRule('position')),
+    T: pipe(parseSingle, toCSSRule('top')),
+    R: pipe(parseSingle, toCSSRule('right')),
+    B: pipe(parseSingle, toCSSRule('bottom')),
+    L: pipe(parseSingle, toCSSRule('left')),
+    z: toCSSRule('z-index'),
+    c: pipe(mapValue, toCSSRule('color')),
+    o: pipe(mapValue, toCSSRule('overflow')),
+    ox: pipe(mapValue, toCSSRule('overflow-x')),
+    oy: pipe(mapValue, toCSSRule('overflow-y')),
+    fl: pipe(mapValue, toCSSRule('float')),
+    clr: pipe(mapValue, toCSSRule('clear')),
+    v: pipe(mapValue, toCSSRule('visibility')),
 
     // Columns
-    col: v => evaluateCSSProp('columns', v),
-    cc: v => evaluateCSSProp('column-count', v),
-    cf: v => evaluateCSSProp('column-fill', v),
-    cg: v => evaluateCSSProp('column-gap', v, parseSingle),
-    cr: v => evaluateCSSProp('column-rule', v),
-    crc: v => evaluateCSSProp('column-rule-color', v, mapValue),
-    crs: v => evaluateCSSProp('column-rule-style', v),
-    crw: v => evaluateCSSProp('column-rule-width', v, parseSingle),
-    cs: v => evaluateCSSProp('column-span', v),
-    cw: v => evaluateCSSProp('column-width', v, parseSingle),
-    pba: v => evaluateCSSProp('page-break-after', v),
-    pbb: v => evaluateCSSProp('page-break-before', v),
-    pbi: v => evaluateCSSProp('page-break-inside', v),
+    col: toCSSRule('columns'),
+    cc: toCSSRule('column-count'),
+    cf: toCSSRule('column-fill'),
+    cg: pipe(parseSingle, toCSSRule('column-gap')),
+    cr: toCSSRule('column-rule'),
+    crc: pipe(mapValue, toCSSRule('column-rule-color')),
+    crs: toCSSRule('column-rule-style'),
+    crw: pipe(parseSingle, toCSSRule('column-rule-width')),
+    cs: toCSSRule('column-span'),
+    cw: pipe(parseSingle, toCSSRule('column-width')),
+    pba: toCSSRule('page-break-after'),
+    pbb: toCSSRule('page-break-before'),
+    pbi: toCSSRule('page-break-inside'),
 
     // Box
-    shadow: v => evaluateCSSProp('box-shadow', v, mapValue),
-    sizing: v => evaluateCSSProp('box-sizing', v),
+    shadow: pipe(mapValue, toCSSRule('box-shadow')),
+    sizing: toCSSRule('box-sizing'),
 
     // Misc
-    of: v => evaluateCSSProp('object-fit', v, mapValue),
-    oP: v => evaluateCSSProp('object-position', v),
-    op: v => evaluateCSSProp('opacity', v, mapValue),
-    or: v => evaluateCSSProp('order', v),
-    ol: v => evaluateCSSProp('outline', v),
-    mbm: v => evaluateCSSProp('mix-blend-mode', v, mapValue),
-    ct: v => evaluateCSSProp('content', v),
-    cur: v => evaluateCSSProp('cursor', v, mapValue),
-    pe: v => evaluateCSSProp('pointer-events', v, mapValue),
-    fil: v => evaluateCSSProp('filter', v),
-    sb: v => evaluateCSSProp('scroll-behavior', v, mapValue),
-    us: v => evaluateCSSProp('user-select', v, mapValue),
+    of: pipe(mapValue, toCSSRule('object-fit')),
+    oP: toCSSRule('object-position'),
+    op: pipe(mapValue, toCSSRule('opacity')),
+    or: toCSSRule('order'),
+    ol: toCSSRule('outline'),
+    mbm: pipe(mapValue, toCSSRule('mix-blend-mode')),
+    ct: toCSSRule('content'),
+    cur: pipe(mapValue, toCSSRule('cursor')),
+    pe: pipe(mapValue, toCSSRule('pointer-events')),
+    fil: toCSSRule('filter'),
+    sb: pipe(mapValue, toCSSRule('scroll-behavior')),
+    us: pipe(mapValue, toCSSRule('user-select')),
 
@@ -230,0 +215,0 @@ // Customs

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1321240

increased by10.71%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

7564

decreased by-5.57%

No dependency changes