New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@cryptic-css/core
Advanced tools
@cryptic-css/core - npm Package Compare versions
Comparing version 5.0.0-alpha.3 to 5.0.0
@@ -18,2 +18,4 @@ - new Map structure => performance | ||
| - CLI removed | ||
| - `rem` => `px` by default | ||
| - unit option removed | ||
@@ -20,0 +22,0 @@ babel-plugin: |
@@ -6,4 +6,20 @@ # Change Log | ||
| # [5.0.0](https://github.com/wintercounter/ccss/compare/v5.0.0-alpha.3...v5.0.0) (2021-01-02) | ||
| ### Bug Fixes | ||
| * missing grid template value maps ([fd9cb77](https://github.com/wintercounter/ccss/commit/fd9cb774b4b6e28ffee5d2b0da4c66d7f80e70b9)) | ||
| ### Features | ||
| * use px instead of rem by default ([e4d59b3](https://github.com/wintercounter/ccss/commit/e4d59b3868bf7ad1ff3dec29416c9eec1b3202dc)) | ||
| **Note:** Version bump only for package @cryptic-css/core | ||
@@ -15,2 +31,18 @@ | ||
| **Note:** Version bump only for package @cryptic-css/core | ||
| **Note:** Version bump only for package @cryptic-css/core | ||
| # [3.19.0](https://github.com/wintercounter/ccss/compare/v3.18.0...v3.19.0) (2020-12-27) | ||
@@ -17,0 +49,0 @@ |
| import { CCSSTransformedFn } from './types'; | ||
| export declare const createCCSS: ({ outputTransformer, options, props }?: { | ||
| outputTransformer?: import("transformed").CCSSOutputTransformer | undefined; | ||
| options?: any; | ||
| props?: any; | ||
| outputTransformer?: import("./types").CCSSOutputTransformer | undefined; | ||
| options?: Partial<import("./types").CCSSOptions> | undefined; | ||
| props?: import("transformed").Props | undefined; | ||
| }) => CCSSTransformedFn; | ||
| export declare const ccss: CCSSTransformedFn; |
@@ -49,3 +49,3 @@ // @ts-nocheck | ||
| ti: 2 | ||
| })).toBe('text-indent: 2rem;'); | ||
| })).toBe('text-indent: 2px;'); | ||
| }); | ||
@@ -56,3 +56,3 @@ it('parseSingle:object', () => { | ||
| })).toStrictEqual({ | ||
| textIndent: '2rem' | ||
| textIndent: '2px' | ||
| }); | ||
@@ -63,9 +63,9 @@ }); | ||
| m: [1, 2, 3, 4] | ||
| })).toBe('margin: 1rem 2rem 3rem 4rem ;'); | ||
| })).toBe('margin: 1px 2px 3px 4px ;'); | ||
| expect(ccss({ | ||
| m: [1, '1:3'] | ||
| })).toBe('margin: 1rem 1:3 ;'); | ||
| })).toBe('margin: 1px 1:3 ;'); | ||
| expect(ccss({ | ||
| m: 10 | ||
| })).toBe('margin: 10rem;'); | ||
| })).toBe('margin: 10px;'); | ||
| }); | ||
@@ -76,3 +76,3 @@ it('parseMultipart:object', () => { | ||
| })).toStrictEqual({ | ||
| margin: '1rem 2rem 3rem 4rem ' | ||
| margin: '1px 2px 3px 4px ' | ||
| }); | ||
@@ -82,3 +82,3 @@ expect(ccssObject({ | ||
| })).toStrictEqual({ | ||
| margin: '1rem 1:3 ' | ||
| margin: '1px 1:3 ' | ||
| }); | ||
@@ -88,3 +88,3 @@ expect(ccssObject({ | ||
| })).toStrictEqual({ | ||
| margin: '10rem' | ||
| margin: '10px' | ||
| }); | ||
@@ -95,3 +95,3 @@ }); | ||
| br: 'global' | ||
| })).toBe('border-radius: 6rem;'); | ||
| })).toBe('border-radius: 6px;'); | ||
| }); | ||
@@ -102,3 +102,3 @@ it('pipe:object', () => { | ||
| })).toStrictEqual({ | ||
| borderRadius: '6rem' | ||
| borderRadius: '6px' | ||
| }); | ||
@@ -110,3 +110,3 @@ }); | ||
| })).toStrictEqual({ | ||
| borderRadius: '6rem' | ||
| borderRadius: '6px' | ||
| }); | ||
@@ -117,3 +117,3 @@ }); | ||
| '::b': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -127,3 +127,3 @@ }).trim()).toBe(`&::before { | ||
| '::b': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -139,3 +139,3 @@ })).toStrictEqual({ | ||
| '::before': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -149,3 +149,3 @@ }).trim()).toBe(`&::before { | ||
| ':hover': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -195,3 +195,3 @@ }).trim()).toBe(`&:hover { | ||
| size: 'large' | ||
| }).trim()).toBe(`font-size: 32rem;`); | ||
| }).trim()).toBe(`font-size: 32px;`); | ||
| }); | ||
@@ -202,3 +202,3 @@ it('can use custom prop:object', () => { | ||
| })).toStrictEqual({ | ||
| fontSize: '32rem' | ||
| fontSize: '32px' | ||
| }); | ||
@@ -248,3 +248,3 @@ }); | ||
| expect(ccssObject({ | ||
| d: () => 'b' | ||
| dp: () => 'b' | ||
| })).toStrictEqual({ | ||
@@ -256,3 +256,3 @@ display: 'block' | ||
| expect(ccss({ | ||
| d: () => 'b' | ||
| dp: () => 'b' | ||
| })).toBe(`display: block;`); | ||
@@ -259,0 +259,0 @@ }); |
| import { CCSSTransformedFn } from './types'; | ||
| export declare const createCCSS: ({ outputTransformer, options, props }?: { | ||
| outputTransformer?: import("transformed").CCSSOutputTransformer | undefined; | ||
| options?: any; | ||
| props?: any; | ||
| outputTransformer?: import("./types").CCSSOutputTransformer | undefined; | ||
| options?: Partial<import("./types").CCSSOptions> | undefined; | ||
| props?: import("transformed").Props | undefined; | ||
| }) => CCSSTransformedFn; | ||
| export declare const ccss: CCSSTransformedFn; |
@@ -53,3 +53,3 @@ "use strict"; | ||
| ti: 2 | ||
| })).toBe('text-indent: 2rem;'); | ||
| })).toBe('text-indent: 2px;'); | ||
| }); | ||
@@ -60,3 +60,3 @@ it('parseSingle:object', () => { | ||
| })).toStrictEqual({ | ||
| textIndent: '2rem' | ||
| textIndent: '2px' | ||
| }); | ||
@@ -67,9 +67,9 @@ }); | ||
| m: [1, 2, 3, 4] | ||
| })).toBe('margin: 1rem 2rem 3rem 4rem ;'); | ||
| })).toBe('margin: 1px 2px 3px 4px ;'); | ||
| expect(ccss({ | ||
| m: [1, '1:3'] | ||
| })).toBe('margin: 1rem 1:3 ;'); | ||
| })).toBe('margin: 1px 1:3 ;'); | ||
| expect(ccss({ | ||
| m: 10 | ||
| })).toBe('margin: 10rem;'); | ||
| })).toBe('margin: 10px;'); | ||
| }); | ||
@@ -80,3 +80,3 @@ it('parseMultipart:object', () => { | ||
| })).toStrictEqual({ | ||
| margin: '1rem 2rem 3rem 4rem ' | ||
| margin: '1px 2px 3px 4px ' | ||
| }); | ||
@@ -86,3 +86,3 @@ expect(ccssObject({ | ||
| })).toStrictEqual({ | ||
| margin: '1rem 1:3 ' | ||
| margin: '1px 1:3 ' | ||
| }); | ||
@@ -92,3 +92,3 @@ expect(ccssObject({ | ||
| })).toStrictEqual({ | ||
| margin: '10rem' | ||
| margin: '10px' | ||
| }); | ||
@@ -99,3 +99,3 @@ }); | ||
| br: 'global' | ||
| })).toBe('border-radius: 6rem;'); | ||
| })).toBe('border-radius: 6px;'); | ||
| }); | ||
@@ -106,3 +106,3 @@ it('pipe:object', () => { | ||
| })).toStrictEqual({ | ||
| borderRadius: '6rem' | ||
| borderRadius: '6px' | ||
| }); | ||
@@ -114,3 +114,3 @@ }); | ||
| })).toStrictEqual({ | ||
| borderRadius: '6rem' | ||
| borderRadius: '6px' | ||
| }); | ||
@@ -121,3 +121,3 @@ }); | ||
| '::b': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -129,3 +129,3 @@ }).trim()).toBe("&::before {\n display: block;\n }"); | ||
| '::b': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -141,3 +141,3 @@ })).toStrictEqual({ | ||
| '::before': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -149,3 +149,3 @@ }).trim()).toBe("&::before {\n display: block;\n }"); | ||
| ':hover': { | ||
| d: 'b' | ||
| dp: 'b' | ||
| } | ||
@@ -188,3 +188,3 @@ }).trim()).toBe("&:hover {\n display: block;\n }"); | ||
| size: 'large' | ||
| }).trim()).toBe("font-size: 32rem;"); | ||
| }).trim()).toBe("font-size: 32px;"); | ||
| }); | ||
@@ -195,3 +195,3 @@ it('can use custom prop:object', () => { | ||
| })).toStrictEqual({ | ||
| fontSize: '32rem' | ||
| fontSize: '32px' | ||
| }); | ||
@@ -241,3 +241,3 @@ }); | ||
| expect(ccssObject({ | ||
| d: () => 'b' | ||
| dp: () => 'b' | ||
| })).toStrictEqual({ | ||
@@ -249,3 +249,3 @@ display: 'block' | ||
| expect(ccss({ | ||
| d: () => 'b' | ||
| dp: () => 'b' | ||
| })).toBe("display: block;"); | ||
@@ -252,0 +252,0 @@ }); |
@@ -1,2 +0,3 @@ | ||
| declare const defaultOptions: () => any; | ||
| import { CCSSOptions } from './types'; | ||
| declare const defaultOptions: () => Partial<CCSSOptions>; | ||
| export default defaultOptions; |
@@ -9,15 +9,11 @@ "use strict"; | ||
| var defaultOptions = () => { | ||
| var options = { | ||
| // InOut options | ||
| // Convert CSS properties to camel case | ||
| return { | ||
| autoCamelCase: true, | ||
| // CCSS options | ||
| unit: typeof navigator != 'undefined' && navigator.product === 'ReactNative' ? 'px' : 'rem', | ||
| // CCSS Options | ||
| applyUnit(n) { | ||
| return "".concat(n).concat(this.unit); | ||
| return "".concat(n, "px"); | ||
| } | ||
| }; | ||
| return options; | ||
| }; | ||
@@ -24,0 +20,0 @@ |
@@ -1,2 +0,3 @@ | ||
| declare const defaultProps: () => any; | ||
| import { Props } from 'transformed'; | ||
| declare const defaultProps: () => Props; | ||
| export default defaultProps; |
@@ -56,2 +56,6 @@ "use strict"; | ||
| [false]: 'none' | ||
| }); | ||
| var auto = () => ({ | ||
| a: 'auto' | ||
| }); // Minify and optimize | ||
@@ -205,3 +209,3 @@ | ||
| [['w', 'width'], nil, fromArrayToCSSRuleHandler], [['h', 'height'], nil, fromArrayToCSSRuleHandler], [['minW', 'min-width'], nil, fromArrayToCSSRuleHandler], [['minH', 'min-height'], nil, fromArrayToCSSRuleHandler], [['maxW', 'max-width'], nil, fromArrayToCSSRuleHandler], [['maxH', 'max-height'], nil, fromArrayToCSSRuleHandler], // Grid | ||
| [['g', 'grid'], nil, toCSSRuleHandler], [['ga', 'grid-area'], nil, toCSSRuleHandler], [['gac', 'grid-auto-columns'], nil, fromArrayToCSSRuleHandler], [['gaf', 'grid-auto-flow'], nil, toCSSRuleHandler], [['gar', 'grid-auto-rows'], nil, fromArrayToCSSRuleHandler], [['gc', 'grid-column'], nil, fromArrayToCSSRuleHandler], [['gce', 'grid-column-end'], nil, toCSSRuleHandler], [['gcg', 'grid-column-gap'], nil, fromArrayToCSSRuleHandler], [['gcs', 'grid-column-start'], nil, toCSSRuleHandler], [['gg', 'grid-gap'], nil, fromArrayToCSSRuleHandler], [['gr', 'grid-row'], nil, fromArrayToCSSRuleHandler], [['gre', 'grid-row-end'], nil, toCSSRuleHandler], [['grg', 'grid-row-gap'], nil, fromArrayToCSSRuleHandler], [['grs', 'grid-row-start'], nil, toCSSRuleHandler], [['gt', 'grid-template'], nil, toCSSRuleHandler], [['gta', 'grid-template-areas'], nil, toCSSRuleHandler], [['gtc', 'grid-template-columns'], nil, fromArrayToCSSRuleHandler], [['gtr', 'grid-template-rows'], nil, fromArrayToCSSRuleHandler], // Border | ||
| [['g', 'grid'], nil, toCSSRuleHandler], [['ga', 'grid-area'], nil, toCSSRuleHandler], [['gac', 'grid-auto-columns'], nil, fromArrayToCSSRuleHandler], [['gaf', 'grid-auto-flow'], nil, toCSSRuleHandler], [['gar', 'grid-auto-rows'], nil, fromArrayToCSSRuleHandler], [['gc', 'grid-column'], nil, fromArrayToCSSRuleHandler], [['gce', 'grid-column-end'], nil, toCSSRuleHandler], [['gcg', 'grid-column-gap'], nil, fromArrayToCSSRuleHandler], [['gcs', 'grid-column-start'], nil, toCSSRuleHandler], [['gg', 'grid-gap'], nil, fromArrayToCSSRuleHandler], [['gr', 'grid-row'], nil, fromArrayToCSSRuleHandler], [['gre', 'grid-row-end'], nil, toCSSRuleHandler], [['grg', 'grid-row-gap'], nil, fromArrayToCSSRuleHandler], [['grs', 'grid-row-start'], nil, toCSSRuleHandler], [['gt', 'grid-template'], nil, toCSSRuleHandler], [['gta', 'grid-template-areas'], nil, toCSSRuleHandler], [['gtc', 'grid-template-columns'], auto(), fromArrayToCSSRuleHandler], [['gtr', 'grid-template-rows'], auto(), fromArrayToCSSRuleHandler], // Border | ||
| [['b', 'border'], nil, fromArrayToCSSRuleHandler], [['bB', 'border-bottom'], nil, fromArrayToCSSRuleHandler], [['bBc', 'border-bottom-color'], nil, toCSSRuleHandler], [['bBlr', 'border-bottom-left-radius'], nil, fromArrayToCSSRuleHandler], [['bBrr', 'border-bottom-right-radius'], nil, fromArrayToCSSRuleHandler], [['bBs', 'border-bottom-style'], nil, toCSSRuleHandler], [['bBw', 'border-bottom-width'], nil, fromArrayToCSSRuleHandler], [['bC', 'border-collapse'], nil, toCSSRuleHandler], [['bc', 'border-color'], nil, toCSSRuleHandler], [['bi', 'border-image'], nil, toCSSRuleHandler], [['bio', 'border-image-outset'], nil, toCSSRuleHandler], [['bir', 'border-image-repeat'], nil, toCSSRuleHandler], [['bis', 'border-image-slice'], nil, toCSSRuleHandler], [['biSrc', 'border-image-source'], nil, toCSSRuleHandler], [['biw', 'border-image-width'], nil, fromArrayToCSSRuleHandler], [['bL', 'border-left'], nil, fromArrayToCSSRuleHandler], [['bLc', 'border-left-color'], nil, toCSSRuleHandler], [['bLs', 'border-left-style'], nil, toCSSRuleHandler], [['bLw', 'border-left-width'], nil, fromArrayToCSSRuleHandler], [['br', 'border-radius'], nil, fromArrayToCSSRuleHandler], [['bR', 'border-right'], nil, fromArrayToCSSRuleHandler], [['bRc', 'border-right-color'], nil, toCSSRuleHandler], [['bRs', 'border-right-style'], nil, toCSSRuleHandler], [['bRw', 'border-right-width'], nil, fromArrayToCSSRuleHandler], [['bs', 'border-spacing'], nil, fromArrayToCSSRuleHandler], [['bS', 'border-style'], nil, toCSSRuleHandler], [['bT', 'border-top'], nil, fromArrayToCSSRuleHandler], [['bTc', 'border-top-color'], nil, toCSSRuleHandler], [['bTlr', 'border-top-left-radius'], nil, fromArrayToCSSRuleHandler], [['bTrr', 'border-top-right-radius'], nil, fromArrayToCSSRuleHandler], [['bTs', 'border-top-style'], nil, toCSSRuleHandler], [['bTw', 'border-top-width'], nil, fromArrayToCSSRuleHandler], [['bw', 'border-width'], nil, fromArrayToCSSRuleHandler], // Clip | ||
@@ -208,0 +212,0 @@ [['clp', 'clip'], nil, fromArrayToCSSRuleHandler], [['clpp', 'clip-path'], nil, toCSSRuleHandler], // General |
@@ -11,6 +11,2 @@ import { Properties } from 'csstype'; | ||
| /** | ||
| * Unit to use globally for number values. | ||
| */ | ||
| unit?: string; | ||
| /** | ||
| * Function the applies unit to a value | ||
@@ -21,2 +17,3 @@ */ | ||
| export declare interface CCSSTransformedFn extends TransformedFn { | ||
| (InputObject: CCSSProps): Whatever; | ||
| options: CCSSOptions; | ||
@@ -49,3 +46,3 @@ outputTransformer: CCSSOutputTransformer; | ||
| * child({ | ||
| * h: { d: 'b' }, | ||
| * h: { dp: 'b' }, | ||
| * '.childDiv': { p: 10 } | ||
@@ -52,0 +49,0 @@ * }) |
@@ -1,1 +0,3 @@ | ||
| "use strict"; | ||
| "use strict"; | ||
| var _transformed = require("transformed"); |
@@ -1,2 +0,3 @@ | ||
| declare const defaultOptions: () => any; | ||
| import { CCSSOptions } from './types'; | ||
| declare const defaultOptions: () => Partial<CCSSOptions>; | ||
| export default defaultOptions; |
| const defaultOptions = () => { | ||
| const options = { | ||
| // InOut options | ||
| // Convert CSS properties to camel case | ||
| return { | ||
| autoCamelCase: true, | ||
| // CCSS options | ||
| unit: typeof navigator != 'undefined' && navigator.product === 'ReactNative' ? 'px' : 'rem', | ||
| // CCSS Options | ||
| applyUnit(n) { | ||
| return `${n}${this.unit}`; | ||
| return `${n}px`; | ||
| } | ||
| }; | ||
| return options; | ||
| }; | ||
| export default defaultOptions; |
@@ -1,3 +0,3 @@ | ||
| import { CCSSOutputTransformer } from '@/types'; | ||
| import { CCSSOutputTransformer } from './types'; | ||
| export declare const objectOutputTransformer: CCSSOutputTransformer; | ||
| export declare const stringOutputTransformer: CCSSOutputTransformer; |
@@ -1,2 +0,3 @@ | ||
| declare const defaultProps: () => any; | ||
| import { Props } from 'transformed'; | ||
| declare const defaultProps: () => Props; | ||
| export default defaultProps; |
@@ -49,2 +49,6 @@ 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; } | ||
| [false]: 'none' | ||
| }); | ||
| const auto = () => ({ | ||
| a: 'auto' | ||
| }); // Minify and optimize | ||
@@ -198,3 +202,3 @@ | ||
| [['w', 'width'], nil, fromArrayToCSSRuleHandler], [['h', 'height'], nil, fromArrayToCSSRuleHandler], [['minW', 'min-width'], nil, fromArrayToCSSRuleHandler], [['minH', 'min-height'], nil, fromArrayToCSSRuleHandler], [['maxW', 'max-width'], nil, fromArrayToCSSRuleHandler], [['maxH', 'max-height'], nil, fromArrayToCSSRuleHandler], // Grid | ||
| [['g', 'grid'], nil, toCSSRuleHandler], [['ga', 'grid-area'], nil, toCSSRuleHandler], [['gac', 'grid-auto-columns'], nil, fromArrayToCSSRuleHandler], [['gaf', 'grid-auto-flow'], nil, toCSSRuleHandler], [['gar', 'grid-auto-rows'], nil, fromArrayToCSSRuleHandler], [['gc', 'grid-column'], nil, fromArrayToCSSRuleHandler], [['gce', 'grid-column-end'], nil, toCSSRuleHandler], [['gcg', 'grid-column-gap'], nil, fromArrayToCSSRuleHandler], [['gcs', 'grid-column-start'], nil, toCSSRuleHandler], [['gg', 'grid-gap'], nil, fromArrayToCSSRuleHandler], [['gr', 'grid-row'], nil, fromArrayToCSSRuleHandler], [['gre', 'grid-row-end'], nil, toCSSRuleHandler], [['grg', 'grid-row-gap'], nil, fromArrayToCSSRuleHandler], [['grs', 'grid-row-start'], nil, toCSSRuleHandler], [['gt', 'grid-template'], nil, toCSSRuleHandler], [['gta', 'grid-template-areas'], nil, toCSSRuleHandler], [['gtc', 'grid-template-columns'], nil, fromArrayToCSSRuleHandler], [['gtr', 'grid-template-rows'], nil, fromArrayToCSSRuleHandler], // Border | ||
| [['g', 'grid'], nil, toCSSRuleHandler], [['ga', 'grid-area'], nil, toCSSRuleHandler], [['gac', 'grid-auto-columns'], nil, fromArrayToCSSRuleHandler], [['gaf', 'grid-auto-flow'], nil, toCSSRuleHandler], [['gar', 'grid-auto-rows'], nil, fromArrayToCSSRuleHandler], [['gc', 'grid-column'], nil, fromArrayToCSSRuleHandler], [['gce', 'grid-column-end'], nil, toCSSRuleHandler], [['gcg', 'grid-column-gap'], nil, fromArrayToCSSRuleHandler], [['gcs', 'grid-column-start'], nil, toCSSRuleHandler], [['gg', 'grid-gap'], nil, fromArrayToCSSRuleHandler], [['gr', 'grid-row'], nil, fromArrayToCSSRuleHandler], [['gre', 'grid-row-end'], nil, toCSSRuleHandler], [['grg', 'grid-row-gap'], nil, fromArrayToCSSRuleHandler], [['grs', 'grid-row-start'], nil, toCSSRuleHandler], [['gt', 'grid-template'], nil, toCSSRuleHandler], [['gta', 'grid-template-areas'], nil, toCSSRuleHandler], [['gtc', 'grid-template-columns'], auto(), fromArrayToCSSRuleHandler], [['gtr', 'grid-template-rows'], auto(), fromArrayToCSSRuleHandler], // Border | ||
| [['b', 'border'], nil, fromArrayToCSSRuleHandler], [['bB', 'border-bottom'], nil, fromArrayToCSSRuleHandler], [['bBc', 'border-bottom-color'], nil, toCSSRuleHandler], [['bBlr', 'border-bottom-left-radius'], nil, fromArrayToCSSRuleHandler], [['bBrr', 'border-bottom-right-radius'], nil, fromArrayToCSSRuleHandler], [['bBs', 'border-bottom-style'], nil, toCSSRuleHandler], [['bBw', 'border-bottom-width'], nil, fromArrayToCSSRuleHandler], [['bC', 'border-collapse'], nil, toCSSRuleHandler], [['bc', 'border-color'], nil, toCSSRuleHandler], [['bi', 'border-image'], nil, toCSSRuleHandler], [['bio', 'border-image-outset'], nil, toCSSRuleHandler], [['bir', 'border-image-repeat'], nil, toCSSRuleHandler], [['bis', 'border-image-slice'], nil, toCSSRuleHandler], [['biSrc', 'border-image-source'], nil, toCSSRuleHandler], [['biw', 'border-image-width'], nil, fromArrayToCSSRuleHandler], [['bL', 'border-left'], nil, fromArrayToCSSRuleHandler], [['bLc', 'border-left-color'], nil, toCSSRuleHandler], [['bLs', 'border-left-style'], nil, toCSSRuleHandler], [['bLw', 'border-left-width'], nil, fromArrayToCSSRuleHandler], [['br', 'border-radius'], nil, fromArrayToCSSRuleHandler], [['bR', 'border-right'], nil, fromArrayToCSSRuleHandler], [['bRc', 'border-right-color'], nil, toCSSRuleHandler], [['bRs', 'border-right-style'], nil, toCSSRuleHandler], [['bRw', 'border-right-width'], nil, fromArrayToCSSRuleHandler], [['bs', 'border-spacing'], nil, fromArrayToCSSRuleHandler], [['bS', 'border-style'], nil, toCSSRuleHandler], [['bT', 'border-top'], nil, fromArrayToCSSRuleHandler], [['bTc', 'border-top-color'], nil, toCSSRuleHandler], [['bTlr', 'border-top-left-radius'], nil, fromArrayToCSSRuleHandler], [['bTrr', 'border-top-right-radius'], nil, fromArrayToCSSRuleHandler], [['bTs', 'border-top-style'], nil, toCSSRuleHandler], [['bTw', 'border-top-width'], nil, fromArrayToCSSRuleHandler], [['bw', 'border-width'], nil, fromArrayToCSSRuleHandler], // Clip | ||
@@ -201,0 +205,0 @@ [['clp', 'clip'], nil, fromArrayToCSSRuleHandler], [['clpp', 'clip-path'], nil, toCSSRuleHandler], // General |
@@ -11,6 +11,2 @@ import { Properties } from 'csstype'; | ||
| /** | ||
| * Unit to use globally for number values. | ||
| */ | ||
| unit?: string; | ||
| /** | ||
| * Function the applies unit to a value | ||
@@ -21,2 +17,3 @@ */ | ||
| export declare interface CCSSTransformedFn extends TransformedFn { | ||
| (InputObject: CCSSProps): Whatever; | ||
| options: CCSSOptions; | ||
@@ -49,3 +46,3 @@ outputTransformer: CCSSOutputTransformer; | ||
| * child({ | ||
| * h: { d: 'b' }, | ||
| * h: { dp: 'b' }, | ||
| * '.childDiv': { p: 10 } | ||
@@ -52,0 +49,0 @@ * }) |
| { | ||
| "name": "@cryptic-css/core", | ||
| "version": "5.0.0-alpha.3", | ||
| "version": "5.0.0", | ||
| "description": "> TODO: description", | ||
@@ -32,6 +32,4 @@ "author": "Viktor Vincze <viktor.vincze@doclerholding.com>", | ||
| "devDependencies": { | ||
| "@types/react": "^16.9.48", | ||
| "@types/styled-components": "^5.1.2", | ||
| "fetch-cheerio-object": "^1.3.0", | ||
| "turndown": "^6.0.0" | ||
| "@types/react": "^17.0.0", | ||
| "@types/styled-components": "^5.1.7" | ||
| }, | ||
@@ -82,6 +80,6 @@ "mhy": { | ||
| "dependencies": { | ||
| "@ungap/global-this": "^0.4.1", | ||
| "csstype": "^3.0.3", | ||
| "transformed": "^1.0.0" | ||
| "@ungap/global-this": "^0.4.3", | ||
| "csstype": "^3.0.5", | ||
| "transformed": "^1.1.1" | ||
| } | ||
| } |
@@ -28,3 +28,3 @@ import path from 'path' | ||
| * child({ | ||
| * h: { d: 'b' }, | ||
| * h: { dp: 'b' }, | ||
| * '.childDiv': { p: 10 } | ||
@@ -31,0 +31,0 @@ * }) |
| import { CCSSTransformedFn } from './types'; | ||
| export declare const createCCSS: ({ outputTransformer, options, props }?: { | ||
| outputTransformer?: import("transformed").CCSSOutputTransformer | undefined; | ||
| options?: any; | ||
| props?: any; | ||
| outputTransformer?: import("./types").CCSSOutputTransformer | undefined; | ||
| options?: Partial<import("./types").CCSSOptions> | undefined; | ||
| props?: import("transformed").Props | undefined; | ||
| }) => CCSSTransformedFn; | ||
| export declare const ccss: CCSSTransformedFn; |
@@ -50,25 +50,25 @@ // @ts-nocheck | ||
| it('parseSingle', () => { | ||
| expect(ccss({ ti: 2 })).toBe('text-indent: 2rem;') | ||
| expect(ccss({ ti: 2 })).toBe('text-indent: 2px;') | ||
| }) | ||
| it('parseSingle:object', () => { | ||
| expect(ccssObject({ ti: 2 })).toStrictEqual({ textIndent: '2rem' }) | ||
| expect(ccssObject({ ti: 2 })).toStrictEqual({ textIndent: '2px' }) | ||
| }) | ||
| it('parseMultipart', () => { | ||
| expect(ccss({ m: [1, 2, 3, 4] })).toBe('margin: 1rem 2rem 3rem 4rem ;') | ||
| expect(ccss({ m: [1, '1:3'] })).toBe('margin: 1rem 1:3 ;') | ||
| expect(ccss({ m: 10 })).toBe('margin: 10rem;') | ||
| expect(ccss({ m: [1, 2, 3, 4] })).toBe('margin: 1px 2px 3px 4px ;') | ||
| expect(ccss({ m: [1, '1:3'] })).toBe('margin: 1px 1:3 ;') | ||
| expect(ccss({ m: 10 })).toBe('margin: 10px;') | ||
| }) | ||
| it('parseMultipart:object', () => { | ||
| expect(ccssObject({ m: [1, 2, 3, 4] })).toStrictEqual({ margin: '1rem 2rem 3rem 4rem ' }) | ||
| expect(ccssObject({ m: [1, '1:3'] })).toStrictEqual({ margin: '1rem 1:3 ' }) | ||
| expect(ccssObject({ m: 10 })).toStrictEqual({ margin: '10rem' }) | ||
| expect(ccssObject({ m: [1, 2, 3, 4] })).toStrictEqual({ margin: '1px 2px 3px 4px ' }) | ||
| expect(ccssObject({ m: [1, '1:3'] })).toStrictEqual({ margin: '1px 1:3 ' }) | ||
| expect(ccssObject({ m: 10 })).toStrictEqual({ margin: '10px' }) | ||
| }) | ||
| it('pipe', () => { | ||
| expect(ccss({ br: 'global' })).toBe('border-radius: 6rem;') | ||
| expect(ccss({ br: 'global' })).toBe('border-radius: 6px;') | ||
| }) | ||
| it('pipe:object', () => { | ||
| expect(ccssObject({ br: 'global' })).toStrictEqual({ borderRadius: '6rem' }) | ||
| expect(ccssObject({ br: 'global' })).toStrictEqual({ borderRadius: '6px' }) | ||
| }) | ||
| it('pipe:object with long name', () => { | ||
| expect(ccssObject({ borderRadius: 'global' })).toStrictEqual({ borderRadius: '6rem' }) | ||
| expect(ccssObject({ borderRadius: 'global' })).toStrictEqual({ borderRadius: '6px' }) | ||
| }) | ||
@@ -78,3 +78,3 @@ it('pseudo', () => { | ||
| ccss({ | ||
| '::b': { d: 'b' } | ||
| '::b': { dp: 'b' } | ||
| }).trim() | ||
@@ -88,3 +88,3 @@ ).toBe(`&::before { | ||
| ccssObject({ | ||
| '::b': { d: 'b' } | ||
| '::b': { dp: 'b' } | ||
| }) | ||
@@ -100,3 +100,3 @@ ).toStrictEqual({ | ||
| ccss({ | ||
| '::before': { d: 'b' } | ||
| '::before': { dp: 'b' } | ||
| }).trim() | ||
@@ -110,3 +110,3 @@ ).toBe(`&::before { | ||
| ccss({ | ||
| ':hover': { d: 'b' } | ||
| ':hover': { dp: 'b' } | ||
| }).trim() | ||
@@ -159,3 +159,3 @@ ).toBe(`&:hover { | ||
| }).trim() | ||
| ).toBe(`font-size: 32rem;`) | ||
| ).toBe(`font-size: 32px;`) | ||
| }) | ||
@@ -168,3 +168,3 @@ | ||
| }) | ||
| ).toStrictEqual({ fontSize: '32rem' }) | ||
| ).toStrictEqual({ fontSize: '32px' }) | ||
| }) | ||
@@ -229,3 +229,3 @@ | ||
| ccssObject({ | ||
| d: () => 'b' | ||
| dp: () => 'b' | ||
| }) | ||
@@ -238,3 +238,3 @@ ).toStrictEqual({ display: 'block' }) | ||
| ccss({ | ||
| d: () => 'b' | ||
| dp: () => 'b' | ||
| }) | ||
@@ -241,0 +241,0 @@ ).toBe(`display: block;`) |
@@ -1,2 +0,3 @@ | ||
| declare const defaultOptions: () => any; | ||
| import { CCSSOptions } from './types'; | ||
| declare const defaultOptions: () => Partial<CCSSOptions>; | ||
| export default defaultOptions; |
@@ -1,17 +0,14 @@ | ||
| import { Options } from 'transformed' | ||
| import { CCSSOptions } from './types' | ||
| const defaultOptions = (): Partial<Options> => { | ||
| const options = { | ||
| // InOut options | ||
| // Convert CSS properties to camel case | ||
| const defaultOptions = (): Partial<CCSSOptions> => { | ||
| return { | ||
| autoCamelCase: true, | ||
| // CCSS options | ||
| unit: typeof navigator != 'undefined' && navigator.product === 'ReactNative' ? 'px' : 'rem', | ||
| // CCSS Options | ||
| applyUnit(n) { | ||
| return `${n}${this.unit}` | ||
| return `${n}px` | ||
| } | ||
| } | ||
| return options | ||
| } | ||
| export default defaultOptions |
@@ -1,2 +0,3 @@ | ||
| declare const defaultProps: () => any; | ||
| import { Props } from 'transformed'; | ||
| declare const defaultProps: () => Props; | ||
| export default defaultProps; |
@@ -46,2 +46,6 @@ import { Props } from 'transformed' | ||
| const auto = () => ({ | ||
| a: 'auto' | ||
| }) | ||
| // Minify and optimize | ||
@@ -445,4 +449,4 @@ const toCSSRuleHandler = [toCSSRule] | ||
| [['gta', 'grid-template-areas'], nil, toCSSRuleHandler], | ||
| [['gtc', 'grid-template-columns'], nil, fromArrayToCSSRuleHandler], | ||
| [['gtr', 'grid-template-rows'], nil, fromArrayToCSSRuleHandler], | ||
| [['gtc', 'grid-template-columns'], auto(), fromArrayToCSSRuleHandler], | ||
| [['gtr', 'grid-template-rows'], auto(), fromArrayToCSSRuleHandler], | ||
@@ -449,0 +453,0 @@ // Border |
@@ -11,6 +11,2 @@ import { Properties } from 'csstype'; | ||
| /** | ||
| * Unit to use globally for number values. | ||
| */ | ||
| unit?: string; | ||
| /** | ||
| * Function the applies unit to a value | ||
@@ -21,2 +17,3 @@ */ | ||
| export declare interface CCSSTransformedFn extends TransformedFn { | ||
| (InputObject: CCSSProps): Whatever; | ||
| options: CCSSOptions; | ||
@@ -49,3 +46,3 @@ outputTransformer: CCSSOutputTransformer; | ||
| * child({ | ||
| * h: { d: 'b' }, | ||
| * h: { dp: 'b' }, | ||
| * '.childDiv': { p: 10 } | ||
@@ -52,0 +49,0 @@ * }) |
@@ -13,6 +13,2 @@ import { Properties } from 'csstype' | ||
| /** | ||
| * Unit to use globally for number values. | ||
| */ | ||
| unit?: string | ||
| /** | ||
| * Function the applies unit to a value | ||
@@ -23,2 +19,3 @@ */ | ||
| export declare interface CCSSTransformedFn extends TransformedFn { | ||
| (InputObject: CCSSProps): Whatever | ||
| options: CCSSOptions | ||
@@ -69,3 +66,3 @@ outputTransformer: CCSSOutputTransformer | ||
| * child({ | ||
| * h: { d: 'b' }, | ||
| * h: { dp: 'b' }, | ||
| * '.childDiv': { p: 10 } | ||
@@ -72,0 +69,0 @@ * }) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-50%
2
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-2.37%
1056801
- Number of package files
- decreased by-13.04%
60
- Lines of code
- decreased by-0.39%
8509
Dependency changes
Updated@ungap/global-this@^0.4.3
Updatedcsstype@^3.0.5
Updatedtransformed@^1.1.1