@cryptic-css/core - npm Package Compare versions

Comparing version 5.5.0 to 5.6.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.6.0](https://github.com/wintercounter/ccss/compare/v5.5.0...v5.6.0) (2021-06-25)
+
+
+### Features
+
+* add support for `--`/`var` prop for CSS variables ([36bddd1](https://github.com/wintercounter/ccss/commit/36bddd1c9380d3a78aac77f496f20487d686b61f))
+
+
+
+
+
 # [5.5.0](https://github.com/wintercounter/ccss/compare/v5.4.0...v5.5.0) (2021-06-25)
@@ -8,0 +19,0 @@

dist/ccss.test.js

@@ -258,3 +258,28 @@ // @ts-nocheck
     });
+    it('can handle css vars: string', () => {
+      expect(ccss({
+        '--': {
+          foo: 'bar',
+          baz: 12,
+          calc: [`calc(100px -`, 10, ')']
+        },
+        var: {
+          mi: 'ma'
+        }
+      })).toBe(`--foo: bar;--baz: 12px;--calc: calc(100px - 10px ) ;--mi: ma;`);
+    });
+    it('can handle css vars: object', () => {
+      expect(ccssObject({
+        '--': {
+          foo: 'bar',
+          baz: 12,
+          calc: [`calc(100px -`, 10, ')']
+        }
+      })).toStrictEqual({
+        '--baz': '12px',
+        '--calc': 'calc(100px - 10px ) ',
+        '--foo': 'bar'
+      });
+    });
   });
 });

dist/cjs/ccss.test.js

@@ -251,3 +251,28 @@ "use strict";
     });
+    it('can handle css vars: string', () => {
+      expect(ccss({
+        '--': {
+          foo: 'bar',
+          baz: 12,
+          calc: ["calc(100px -", 10, ')']
+        },
+        var: {
+          mi: 'ma'
+        }
+      })).toBe("--foo: bar;--baz: 12px;--calc: calc(100px - 10px ) ;--mi: ma;");
+    });
+    it('can handle css vars: object', () => {
+      expect(ccssObject({
+        '--': {
+          foo: 'bar',
+          baz: 12,
+          calc: ["calc(100px -", 10, ')']
+        }
+      })).toStrictEqual({
+        '--baz': '12px',
+        '--calc': 'calc(100px - 10px ) ',
+        '--foo': 'bar'
+      });
+    });
   });
 });

dist/cjs/parsers.d.ts

@@ -5,2 +5,3 @@ import { CCSSParser } from './types';
 export declare const toCSSRule: CCSSParser;
+export declare const varsHandler: CCSSParser;
 export declare const parseCCSS: CCSSParser;
@@ -7,0 +8,0 @@ export declare const parsePseudo: CCSSParser;

dist/cjs/parsers.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.self = exports.child = exports.parsePseudo = exports.parseCCSS = exports.toCSSRule = exports.parseArray = exports.parseSingle = void 0;
+exports.self = exports.child = exports.parsePseudo = exports.parseCCSS = exports.varsHandler = exports.toCSSRule = exports.parseArray = exports.parseSingle = void 0;
 
@@ -47,2 +47,16 @@ var parseSingle = (input, prop, transformedFn) => typeof input === 'number' ? input === 0 ? 0 : transformedFn.options.applyUnit(input) : input;
 
+var varsHandler = (input, prop, transformedFn, inputObject, definition) => {
+  var generated = transformedFn.outputTransformer.defaultOutput();
+
+  for (var k in input) {
+    if (Object.prototype.hasOwnProperty.call(input, k)) {
+      generated = transformedFn.outputTransformer(generated, transformedFn.outputTransformer.toCSSRule("--".concat(k), parseArray(input[k], k, transformedFn)));
+    }
+  }
+
+  return generated;
+};
+
+exports.varsHandler = varsHandler;
+
 var parseCCSS = (input, prop, transformedFn) => transformedFn(input);
@@ -49,0 +63,0 @@

dist/cjs/props.js

@@ -371,3 +371,3 @@ "use strict";
   all: 'all'
-}, toCSSRuleHandler], [['cac', 'caret-color'], nil, toCSSRuleHandler], [['rs', 'resize'], nil, toCSSRuleHandler], [['raw'], nil, [i => i]], [['child'], nil, [_parsers.child]], [['ccss', 'css'], nil, [_parsers.self]], // Webkit
+}, toCSSRuleHandler], [['cac', 'caret-color'], nil, toCSSRuleHandler], [['rs', 'resize'], nil, toCSSRuleHandler], [['raw'], nil, [i => i]], [['child'], nil, [_parsers.child]], [['ccss', 'css'], nil, [_parsers.self]], [['--', 'var'], nil, [_parsers.varsHandler]], // Webkit
 [['wtc', 'webkit-touch-callout', '-webkit-touch-callout'], {
@@ -374,0 +374,0 @@ d: 'default',

dist/cjs/types.d.ts

@@ -1,2 +0,2 @@
-import { Properties } from 'csstype';
+import CSS from 'csstype';
 import { TransformedFn, Options, OutputTransformer, Whatever, Parser, InputObject, Definition } from 'transformed';
@@ -20,9 +20,12 @@ export interface CCSSOutputTransformer extends OutputTransformer {
 }
-export declare type CCSSToCSSRule = (cssProp: string, objectProp: string, input: CCSSProps, prop: string, options: CCSSOptions) => Properties | string;
+export declare type CCSSToCSSRule = (cssProp: string, objectProp: string, input: CCSSProps, prop: string, options: CCSSOptions) => CSS.Properties | string;
 export interface CCSSParser extends Parser {
     (value: unknown, prop: string, transformedFn?: CCSSTransformedFn, inputObject?: InputObject, definition?: Definition): unknown;
 }
-export declare type CCSSPropValue = string | number | boolean | (string | number | boolean)[] | undefined;
 export declare type CCSSPropFunction = <T>(v: CCSSPropValue, o?: T) => string;
-export interface CCSSProps extends Properties {
+export declare type CCSSPropValue = string | number | boolean | (string | number | boolean)[] | undefined | CCSSPropFunction;
+declare type Pseudos = {
+    [P in CSS.Pseudos]?: CCSSProps;
+};
+export interface CCSSProps extends CSS.PropertiesFallback<CCSSPropValue>, CSS.PropertiesHyphenFallback<CCSSPropValue>, Pseudos {
     /**
@@ -51,3 +54,3 @@ * Tells CCSS should let through unsupported properties in the output.
      */
-    child?: {
+    child?: Pseudos & {
         [key: string]: CCSSProps;
@@ -61,6 +64,32 @@ };
     /**
-     * This is an synonym to the `ccss` prop, this prop provides simple support for the `css` prop for different
-     * implementations. The same top-level values are accepted here.
+     * CSS variables support
+     *
+     * @example
+     * ```js
+     * {
+     *     '--': {
+     *         'site-background': '#333'
+     *     }
+     * }
+     * ```
      */
-    css?: CCSSProps;
+    ['--']?: {
+        [key: string]: CCSSPropValue;
+    };
+    /**
+     * CSS variables support. Alias for `--`
+     *
+     * @example
+     * ```js
+     * {
+     *     var: {
+     *         'site-background': '#333'
+     *     }
+     * }
+     * ```
+     */
+    var?: {
+        [key: string]: CCSSPropValue;
+    };
 }
+export {};

dist/parsers.d.ts

@@ -5,2 +5,3 @@ import { CCSSParser } from './types';
 export declare const toCSSRule: CCSSParser;
+export declare const varsHandler: CCSSParser;
 export declare const parseCCSS: CCSSParser;
@@ -7,0 +8,0 @@ export declare const parsePseudo: CCSSParser;

dist/parsers.js

@@ -31,2 +31,13 @@ export const parseSingle = (input, prop, transformedFn) => typeof input === 'number' ? input === 0 ? 0 : transformedFn.options.applyUnit(input) : input;
 };
+export const varsHandler = (input, prop, transformedFn, inputObject, definition) => {
+  let generated = transformedFn.outputTransformer.defaultOutput();
+
+  for (const k in input) {
+    if (Object.prototype.hasOwnProperty.call(input, k)) {
+      generated = transformedFn.outputTransformer(generated, transformedFn.outputTransformer.toCSSRule(`--${k}`, parseArray(input[k], k, transformedFn)));
+    }
+  }
+
+  return generated;
+};
 export const parseCCSS = (input, prop, transformedFn) => transformedFn(input);
@@ -33,0 +44,0 @@ export const parsePseudo = (input, prop, transformedFn, inputObject, definition) => {

dist/props.js

@@ -7,3 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-import { parseArray, child, parsePseudo, toCSSRule, self } from "./parsers";
+import { parseArray, child, parsePseudo, toCSSRule, self, varsHandler } from "./parsers";
 
@@ -365,3 +365,3 @@ const getAligns = () => ({
   all: 'all'
-}, toCSSRuleHandler], [['cac', 'caret-color'], nil, toCSSRuleHandler], [['rs', 'resize'], nil, toCSSRuleHandler], [['raw'], nil, [i => i]], [['child'], nil, [child]], [['ccss', 'css'], nil, [self]], // Webkit
+}, toCSSRuleHandler], [['cac', 'caret-color'], nil, toCSSRuleHandler], [['rs', 'resize'], nil, toCSSRuleHandler], [['raw'], nil, [i => i]], [['child'], nil, [child]], [['ccss', 'css'], nil, [self]], [['--', 'var'], nil, [varsHandler]], // Webkit
 [['wtc', 'webkit-touch-callout', '-webkit-touch-callout'], {
@@ -368,0 +368,0 @@ d: 'default',

dist/types.d.ts

@@ -1,2 +0,2 @@
-import { Properties } from 'csstype';
+import CSS from 'csstype';
 import { TransformedFn, Options, OutputTransformer, Whatever, Parser, InputObject, Definition } from 'transformed';
@@ -20,9 +20,12 @@ export interface CCSSOutputTransformer extends OutputTransformer {
 }
-export declare type CCSSToCSSRule = (cssProp: string, objectProp: string, input: CCSSProps, prop: string, options: CCSSOptions) => Properties | string;
+export declare type CCSSToCSSRule = (cssProp: string, objectProp: string, input: CCSSProps, prop: string, options: CCSSOptions) => CSS.Properties | string;
 export interface CCSSParser extends Parser {
     (value: unknown, prop: string, transformedFn?: CCSSTransformedFn, inputObject?: InputObject, definition?: Definition): unknown;
 }
-export declare type CCSSPropValue = string | number | boolean | (string | number | boolean)[] | undefined;
 export declare type CCSSPropFunction = <T>(v: CCSSPropValue, o?: T) => string;
-export interface CCSSProps extends Properties {
+export declare type CCSSPropValue = string | number | boolean | (string | number | boolean)[] | undefined | CCSSPropFunction;
+declare type Pseudos = {
+    [P in CSS.Pseudos]?: CCSSProps;
+};
+export interface CCSSProps extends CSS.PropertiesFallback<CCSSPropValue>, CSS.PropertiesHyphenFallback<CCSSPropValue>, Pseudos {
     /**
@@ -51,3 +54,3 @@ * Tells CCSS should let through unsupported properties in the output.
      */
-    child?: {
+    child?: Pseudos & {
         [key: string]: CCSSProps;
@@ -61,6 +64,32 @@ };
     /**
-     * This is an synonym to the `ccss` prop, this prop provides simple support for the `css` prop for different
-     * implementations. The same top-level values are accepted here.
+     * CSS variables support
+     *
+     * @example
+     * ```js
+     * {
+     *     '--': {
+     *         'site-background': '#333'
+     *     }
+     * }
+     * ```
      */
-    css?: CCSSProps;
+    ['--']?: {
+        [key: string]: CCSSPropValue;
+    };
+    /**
+     * CSS variables support. Alias for `--`
+     *
+     * @example
+     * ```js
+     * {
+     *     var: {
+     *         'site-background': '#333'
+     *     }
+     * }
+     * ```
+     */
+    var?: {
+        [key: string]: CCSSPropValue;
+    };
 }
+export {};

dist/types.js

@@ -1,1 +0,14 @@
-import { InputObject } from 'transformed';
+import { InputObject } from 'transformed'; // Quick Tester
+
+/*const x: CCSSProps = {
+    padding: [1, 2, 3, 'str'],
+    clipRule: 'unset',
+    ':hover': {
+        width: 3
+    },
+    child: {
+        kakakakaa: {
+            padding: 0
+        }
+    }
+}*/

package.json

 {
     "name": "@cryptic-css/core",
-    "version": "5.5.0",
+    "version": "5.6.0",
     "description": "> TODO: description",
@@ -5,0 +5,0 @@ "author": "Viktor Vincze <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

229216

increased by1.68%

Lines of code

7450

increased by1.93%

No dependency changes