New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@cryptic-css/core

Package Overview
Dependencies
Maintainers
2
Versions
69
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cryptic-css/core - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

CHANGELOG.md

5

dist/ccss.d.ts

@@ -1,2 +0,3 @@

declare const ccss: (v: any) => string;
export default ccss;
export declare const defaultOptions: Partial<import("./types").IOptions>;
export declare const createCCSS: (options?: Partial<import("./types").IOptions>) => (ccssProps: any) => string;
export declare const ccss: (ccssProps: any) => string;

21

dist/ccss.js

@@ -1,10 +0,10 @@

import props from "./props";
import { createOptions } from "./createOptions";
const ccss = v => {
let generated = ''; // eslint-disable-next-line no-restricted-syntax
const generate = (v, options) => {
let generated = options.outputTransformer.defaultOutput(); // eslint-disable-next-line no-restricted-syntax
for (const k in v) {
if (Object.prototype.hasOwnProperty.call(v, k)) {
if (props[k]) {
generated += props[k](v[k], k, v);
if (options.props[k]) {
generated = (options.props[k] ? options.outputTransformer : options.outputTransformer.unsupportedHandler)(generated, options.props[k](v[k], k, options, v));
}

@@ -17,2 +17,11 @@ }

export default ccss;
export const defaultOptions = createOptions();
export const createCCSS = function createCCSS() {
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
const __ccss = ccssProps => generate(ccssProps, options);
options.__ccss = __ccss;
return __ccss;
};
export const ccss = createCCSS();

@@ -1,3 +0,4 @@

import ccss, { setValueMap, setProps, pipe, mapValue } from "./";
setValueMap({
import { createCCSS, createOptions, pipe, mapValue, createValueMap, createProps } from "./";
import { objectOutputTransformer } from "./outputTransformers";
const valueMap = createValueMap({
r: {

@@ -15,5 +16,16 @@ global: 6

});
setProps({
size: pipe(mapValue, ccss)
const props = createProps({
size: pipe(mapValue, (input, prop, options) => options.__ccss(input))
});
const options = createOptions({
props,
valueMap
});
const optionsObject = createOptions({
props,
valueMap,
outputTransformer: objectOutputTransformer
});
const ccss = createCCSS(options);
const ccssObject = createCCSS(optionsObject);
describe('ccss tests', () => {

@@ -26,2 +38,9 @@ describe('Evaluations', () => {

});
it('normal:object', () => {
expect(ccssObject({
a: 'example 5s linear 2s infinite alternate'
})).toStrictEqual({
animation: 'example 5s linear 2s infinite alternate'
});
});
it('mapValue', () => {

@@ -32,2 +51,9 @@ expect(ccss({

});
it('mapValue:object', () => {
expect(ccssObject({
fd: 'c'
})).toStrictEqual({
flexDirection: 'column'
});
});
it('parseSingle', () => {

@@ -38,2 +64,9 @@ expect(ccss({

});
it('parseSingle:object', () => {
expect(ccssObject({
ti: 2
})).toStrictEqual({
textIndent: '2rem'
});
});
it('parseMultipart', () => {

@@ -50,2 +83,19 @@ expect(ccss({

});
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'
});
});
it('pipe', () => {

@@ -56,2 +106,9 @@ expect(ccss({

});
it('pipe:object', () => {
expect(ccssObject({
r: 'global'
})).toStrictEqual({
borderRadius: '6rem'
});
});
it('pseudo', () => {

@@ -66,2 +123,13 @@ expect(ccss({

});
it('pseudo:object', () => {
expect(ccssObject({
':b': {
d: 'b'
}
})).toStrictEqual({
':before': {
display: 'block'
}
});
});
it('child/pseudo', () => {

@@ -75,5 +143,18 @@ expect(ccss({

}).trim()).toBe(`:hover {
color: white;
}`);
color: white;
}`);
});
it('child/pseudo:object', () => {
expect(ccssObject({
child: {
':h': {
c: 'white'
}
}
})).toStrictEqual({
':hover': {
color: 'white'
}
});
});
it('can use custom prop', () => {

@@ -84,3 +165,10 @@ expect(ccss({

});
it('can use custom prop:object', () => {
expect(ccssObject({
size: 'large'
})).toStrictEqual({
fontSize: '32rem'
});
});
});
});

@@ -1,6 +0,7 @@

export { default } from './ccss';
export * from './ccss';
export * from './parsers';
export { default as props, setProps } from './props';
export { default as options, setOptions } from './options';
export { valueMap, pseudoMap, setValueMap, setPseudoMap } from './maps';
export { default as ICCSSProps } from './types';
export * from './createProps';
export * from './createOptions';
export * from './createMaps';
export * from './outputTransformers';
export * from './types';

@@ -1,6 +0,7 @@

export { default } from "./ccss";
export * from "./ccss";
export * from "./parsers";
export { default as props, setProps } from "./props";
export { default as options, setOptions } from "./options";
export { valueMap, pseudoMap, setValueMap, setPseudoMap } from "./maps";
export { default as ICCSSProps } from "./types";
export * from "./createProps";
export * from "./createOptions";
export * from "./createMaps";
export * from "./outputTransformers";
export * from "./types";

@@ -1,19 +0,7 @@

export declare const toCSSRule: (cssProp: any) => (input: any) => string;
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[]) => (input: any, prop: any, original: any) => any;
export declare const parsePseudo: (input: any, prop: any) => string;
/**
* You can pass children to your ccss supporting both pseudo classes and nested selectors
*
* @example
* ```js
* child({
* ':h': { d: 'b' },
* '.childDiv': { p: 10 }
* })
* // Output: ':hover{ display: block; } .childDiv { padding: 10rem; }'
* ```
*/
export declare const child: (input: any) => string;
export declare const toCSSRule: (overrides: any, [light, long]: [any, any]) => (input: any, prop: any, options: any) => any;
export declare const parseSingle: (input: any, prop: any, options: any) => any;
export declare const parseArray: (input: any, prop: any, options: any) => any;
export declare const mapValue: (input: any, prop: any, options: any) => any;
export declare const pipe: (...fs: any[]) => (input: any, prop: any, options: any, original: any) => any;
export declare const parsePseudo: (input: any, prop: any, options: any) => any;
export declare const child: (input: any, prop: any, options: any) => any;

@@ -1,14 +0,13 @@

import options from "./options";
import { valueMap, pseudoMap } from "./maps";
import ccss from "./ccss";
export const toCSSRule = cssProp => input => {
return input === undefined ? '' : `${cssProp}: ${input};`;
export const toCSSRule = (cssProp, objectProp) => {
return (input, prop, options) => {
return options.outputTransformer.toCSSRule(cssProp, objectProp, input, prop, options);
};
};
export const parseSingle = input => typeof input === 'number' ? input === 0 ? 0 : options.applyUnit(input) : input;
export const parseSingle = (input, prop, options) => typeof input === 'number' ? input === 0 ? 0 : options.applyUnit(input) : input;
const applyArray = input => {
const applyArray = (input, prop, options) => {
let out = '';
for (const i of input) {
out += `${parseSingle(i)} `;
out += `${parseSingle(i, prop, options)} `;
}

@@ -19,18 +18,18 @@

export const parseArray = input => {
export const parseArray = (input, prop, options) => {
switch (true) {
case Array.isArray(input):
return applyArray(input);
return applyArray(input, prop, options);
case input:
return parseSingle(1);
return parseSingle(1, prop, options);
default:
return parseSingle(input);
return parseSingle(input, prop, options);
}
};
export const mapValue = (input, prop) => {
var _valueMap$prop;
export const mapValue = (input, prop, options) => {
var _options$valueMap, _options$valueMap$pro;
return (valueMap === null || valueMap === void 0 ? void 0 : (_valueMap$prop = valueMap[prop]) === null || _valueMap$prop === void 0 ? void 0 : _valueMap$prop[input]) || input;
return ((_options$valueMap = options.valueMap) === null || _options$valueMap === void 0 ? void 0 : (_options$valueMap$pro = _options$valueMap[prop]) === null || _options$valueMap$pro === void 0 ? void 0 : _options$valueMap$pro[input]) || input;
};

@@ -42,5 +41,5 @@ export const pipe = function pipe() {

return (input, prop, original) => {
return (input, prop, options, original) => {
for (const f of fs) {
input = f(input, prop, original);
input = f(input, prop, options, original);
}

@@ -51,33 +50,7 @@

};
export const parsePseudo = (input, prop) => `
:${pseudoMap[prop]} {
${ccss(input)}
}
`;
/**
* You can pass children to your ccss supporting both pseudo classes and nested selectors
*
* @example
* ```js
* child({
* ':h': { d: 'b' },
* '.childDiv': { p: 10 }
* })
* // Output: ':hover{ display: block; } .childDiv { padding: 10rem; }'
* ```
*/
export const child = input => {
let generated = ''; // eslint-disable-next-line no-restricted-syntax
for (const k in input) {
if (Object.prototype.hasOwnProperty.call(input, k)) {
generated += `
${pseudoMap[k] ? `:${pseudoMap[k]}` : k} {
${ccss(input[k])}
}`;
}
}
return generated;
export const parsePseudo = (input, prop, options) => {
return options.outputTransformer.toPseudo(input, prop, options);
};
export const child = (input, prop, options) => {
return options.__ccss(input);
};

@@ -15,2 +15,2 @@ /**

*/
export default function mergeDeep<T>(target: T, source: Partial<T>): Partial<T>;
export declare function mergeDeep<T>(target: T, source: Partial<T>): Partial<T>;

@@ -16,5 +16,5 @@ /**

export default function mergeDeep(target, source) {
export function mergeDeep(target, source) {
if (!isObject(target) || !isObject(source)) {
return source;
return target;
}

@@ -35,2 +35,6 @@

return target;
}
}
export const camelify = t => t.replace(/^-+/, '').replace(/-./g, (_ref) => {
let [, l] = _ref;
return l.toUpperCase();
});
{
"name": "@cryptic-css/core",
"version": "1.0.2",
"version": "2.0.0",
"description": "> TODO: description",

@@ -35,3 +35,3 @@ "author": "Viktor Vincze <viktor.vincze@doclerholding.com>",

},
"gitHead": "6201693108f080ed447f00f8acc9684ba2c4dd07"
"gitHead": "d791131dcc71f4e3536e7bb4cd3e85f781a257b9"
}
# `@cryptic-css/core`
> Core of CCSS and APIs for extending with new features.
> Core of **CCSS** and APIs for extending with new features.
See: https://ccss.dev/docs/api-and-packages/core

@@ -21,3 +21,4 @@ // @ts-nocheck

import { valueMap } from '../src/maps'
import { createValueMap } from '../src/createMaps'
const valueMap = createValueMap()

@@ -24,0 +25,0 @@ const DIST = path.resolve(__dirname, '../dist')

@@ -1,2 +0,1 @@

declare const ccss: (v: any) => string;
export default ccss;
export declare const defaultOptions: Partial<import("./types").

@@ -1,4 +0,5 @@

import ccss, { setValueMap, setProps, pipe, mapValue } from '@'
import { createCCSS, createOptions, pipe, mapValue, createValueMap, createProps } from '@'
import { objectOutputTransformer } from './outputTransformers'
setValueMap({
const valueMap = createValueMap({
r: {

@@ -16,6 +17,9 @@ global: 6

})
setProps({
size: pipe(mapValue, ccss)
const props = createProps({
size: pipe(mapValue, (input, prop, options) => options.__ccss(input))
})
const options = createOptions({ props, valueMap })
const optionsObject = createOptions({ props, valueMap, outputTransformer: objectOutputTransformer })
const ccss = createCCSS(options)
const ccssObject = createCCSS(optionsObject)

@@ -29,8 +33,21 @@ describe('ccss tests', () => {

})
it('normal:object', () => {
expect(ccssObject({ a: 'example 5s linear 2s infinite alternate' })).toStrictEqual({
animation: 'example 5s linear 2s infinite alternate'
})
})
it('mapValue', () => {
expect(ccss({ fd: 'c' })).toBe('flex-direction: column;')
})
it('mapValue:object', () => {
expect(ccssObject({ fd: 'c' })).toStrictEqual({
flexDirection: 'column'
})
})
it('parseSingle', () => {
expect(ccss({ ti: 2 })).toBe('text-indent: 2rem;')
})
it('parseSingle:object', () => {
expect(ccssObject({ ti: 2 })).toStrictEqual({ textIndent: '2rem' })
})
it('parseMultipart', () => {

@@ -41,5 +58,13 @@ expect(ccss({ m: [1, 2, 3, 4] })).toBe('margin: 1rem 2rem 3rem 4rem ;')

})
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' })
})
it('pipe', () => {
expect(ccss({ r: 'global' })).toBe('border-radius: 6rem;')
})
it('pipe:object', () => {
expect(ccssObject({ r: 'global' })).toStrictEqual({ borderRadius: '6rem' })
})
it('pseudo', () => {

@@ -54,2 +79,13 @@ expect(

})
it('pseudo:object', () => {
expect(
ccssObject({
':b': { d: 'b' }
})
).toStrictEqual({
':before': {
display: 'block'
}
})
})
it('child/pseudo', () => {

@@ -63,5 +99,18 @@ expect(

).toBe(`:hover {
color: white;
}`)
color: white;
}`)
})
it('child/pseudo:object', () => {
expect(
ccssObject({
child: {
':h': { c: 'white' }
}
})
).toStrictEqual({
':hover': {
color: 'white'
}
})
})

@@ -75,3 +124,11 @@ it('can use custom prop', () => {

})
it('can use custom prop:object', () => {
expect(
ccssObject({
size: 'large'
})
).toStrictEqual({ fontSize: '32rem' })
})
})
})
import { TCCSSCoreProp } from './types'
import props from './props'
import { createOptions } from './createOptions'
const ccss = (v: TCCSSCoreProp & any): string => {
let generated = ''
const generate = (v: TCCSSCoreProp & any, options): string => {
let generated = options.outputTransformer.defaultOutput()
// eslint-disable-next-line no-restricted-syntax
for (const k in v) {
if (Object.prototype.hasOwnProperty.call(v, k)) {
if (props[k]) {
generated += props[k](v[k], k, v)
if (options.props[k]) {
generated = (options.props[k]
? options.outputTransformer
: options.outputTransformer.unsupportedHandler)(generated, options.props[k](v[k], k, options, v))
}

@@ -17,2 +19,10 @@ }

export default ccss
export const defaultOptions = createOptions()
export const createCCSS = (options = defaultOptions) => {
const __ccss = ccssProps => generate(ccssProps, options)
options.__ccss = __ccss
return __ccss
}
export const ccss = createCCSS()

@@ -1,6 +0,7 @@

export { default } from './ccss';
export * from './ccss';
export * from './parsers';
export { default as props, setProps } from './props';
export { default as options, setOptions } from './options';
export { valueMap, pseudoMap, setValueMap, setPseudoMap } from './maps';
export { default as ICCSSProps } from './types';
export * from './createProps';
export * from './createOptions';
export * from './createMaps';
export * from './outputTransformers';
export * from './types';

@@ -1,6 +0,7 @@

export { default } from './ccss'
export * from './ccss'
export * from './parsers'
export { default as props, setProps } from './props'
export { default as options, setOptions } from './options'
export { valueMap, pseudoMap, setValueMap, setPseudoMap } from './maps'
export { default as ICCSSProps } from './types'
export * from './createProps'
export * from './createOptions'
export * from './createMaps'
export * from './outputTransformers'
export * from './types'

@@ -1,19 +0,7 @@

export declare const toCSSRule: (cssProp: any) => (input: any) => string;
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[]) => (input: any, prop: any, original: any) => any;
export declare const parsePseudo: (input: any, prop: any) => string;
/**
* You can pass children to your ccss supporting both pseudo classes and nested selectors
*
* @example
* ```js
* child({
* ':h': { d: 'b' },
* '.childDiv': { p: 10 }
* })
* // Output: ':hover{ display: block; } .childDiv { padding: 10rem; }'
* ```
*/
export declare const child: (input: any) => string;
export declare const toCSSRule: (overrides: any, [light, long]: [any, any]) => (input: any, prop: any, options: any) => any;
export declare const parseSingle: (input: any, prop: any, options: any) => any;
export declare const parseArray: (input: any, prop: any, options: any) => any;
export declare const mapValue: (input: any, prop: any, options: any) => any;
export declare const pipe: (...fs: any[]) => (input: any, prop: any, options: any, original: any) => any;
export declare const parsePseudo: (input: any, prop: any, options: any) => any;
export declare const child: (input: any, prop: any, options: any) => any;

@@ -1,15 +0,14 @@

import options from './options'
import { valueMap, pseudoMap } from './maps'
import ccss from './ccss'
export const toCSSRule = cssProp => input => {
return input === undefined ? '' : `${cssProp}: ${input};`
export const toCSSRule = (cssProp, objectProp) => {
return (input, prop, options) => {
return options.outputTransformer.toCSSRule(cssProp, objectProp, input, prop, options)
}
}
export const parseSingle = input => (typeof input === 'number' ? (input === 0 ? 0 : options.applyUnit(input)) : input)
export const parseSingle = (input, prop, options) =>
typeof input === 'number' ? (input === 0 ? 0 : options.applyUnit(input)) : input
const applyArray = input => {
const applyArray = (input, prop, options) => {
let out = ''
for (const i of input) {
out += `${parseSingle(i)} `
out += `${parseSingle(i, prop, options)} `
}

@@ -19,21 +18,21 @@ return out

export const parseArray = input => {
export const parseArray = (input, prop, options) => {
switch (true) {
case Array.isArray(input):
return applyArray(input)
return applyArray(input, prop, options)
case input:
return parseSingle(1)
return parseSingle(1, prop, options)
default:
return parseSingle(input)
return parseSingle(input, prop, options)
}
}
export const mapValue = (input, prop) => {
return valueMap?.[prop]?.[input] || input
export const mapValue = (input, prop, options) => {
return options.valueMap?.[prop]?.[input] || input
}
export const pipe = function(...fs) {
return (input, prop, original) => {
return (input, prop, options, original) => {
for (const f of fs) {
input = f(input, prop, original)
input = f(input, prop, options, original)
}

@@ -44,32 +43,8 @@ return input

export const parsePseudo = (input, prop) => `
:${pseudoMap[prop]} {
${ccss(input)}
}
`
export const parsePseudo = (input, prop, options) => {
return options.outputTransformer.toPseudo(input, prop, options)
}
/**
* You can pass children to your ccss supporting both pseudo classes and nested selectors
*
* @example
* ```js
* child({
* ':h': { d: 'b' },
* '.childDiv': { p: 10 }
* })
* // Output: ':hover{ display: block; } .childDiv { padding: 10rem; }'
* ```
*/
export const child = input => {
let generated = ''
// eslint-disable-next-line no-restricted-syntax
for (const k in input) {
if (Object.prototype.hasOwnProperty.call(input, k)) {
generated += `
${pseudoMap[k] ? `:${pseudoMap[k]}` : k} {
${ccss(input[k])}
}`
}
}
return generated
export const child = (input, prop, options) => {
return options.__ccss(input)
}

@@ -15,3 +15,3 @@ export declare type TCCSSCoreProp = {

}
export default interface ICCSSProps {
export interface ICCSSProps {
/**

@@ -18,0 +18,0 @@ * @propDocStart

@@ -15,3 +15,3 @@ export type TCCSSCoreProp = {

export default interface ICCSSProps {
export interface ICCSSProps {
/**

@@ -18,0 +18,0 @@ * @propDocStart

@@ -15,2 +15,2 @@ /**

*/
export default function mergeDeep<T>(target: T, source: Partial<T>): Partial<T>;
export declare function mergeDeep<T>(target: T, source: Partial<T>): Partial<T>;

@@ -16,5 +16,5 @@ /**

*/
export default function mergeDeep<T>(target: T, source: Partial<T>): Partial<T> {
export function mergeDeep<T>(target: T, source: Partial<T>): Partial<T> {
if (!isObject(target) || !isObject(source)) {
return source
return target
}

@@ -37,1 +37,3 @@

}
export const camelify = t => t.replace(/^-+/, '').replace(/-./g, ([, l]) => l.toUpperCase())

@@ -14,3 +14,3 @@ {

"declaration": true,
"baseUrl": "X:\\GITHUB\\ccss\\packages\\core\\src",
"baseUrl": "C:\\Work\\Repos\\ccss\\packages\\core\\src",
"skipLibCheck": true,

@@ -21,25 +21,25 @@ "incremental": true,

"*": [
"X:\\GITHUB\\ccss\\packages\\core\\node_modules\\*",
"C:\\Users\\Winter\\AppData\\Roaming\\npm\\node_modules\\mhy\\node_modules\\*"
"C:\\Work\\Repos\\ccss\\packages\\core\\node_modules\\*",
"C:\\Work\\nodejs\\node_modules\\mhy\\node_modules\\*"
],
"@": [
"X:\\GITHUB\\ccss\\packages\\core\\src\\index"
"C:\\Work\\Repos\\ccss\\packages\\core\\src\\index"
],
"@/*": [
"X:\\GITHUB\\ccss\\packages\\core\\src\\*"
"C:\\Work\\Repos\\ccss\\packages\\core\\src\\*"
],
"@/mhy": [
"C:\\Users\\Winter\\AppData\\Roaming\\npm\\node_modules\\mhy\\dist\\index"
"C:\\Work\\nodejs\\node_modules\\mhy\\dist\\index"
],
"@/mhy/*": [
"C:\\Users\\Winter\\AppData\\Roaming\\npm\\node_modules\\mhy\\dist\\*"
"C:\\Work\\nodejs\\node_modules\\mhy\\dist\\*"
]
},
"typeRoots": [
"C:\\Users\\Winter\\AppData\\Roaming\\npm\\node_modules\\mhy\\node_modules\\@types",
"X:\\GITHUB\\ccss\\packages\\core\\node_modules\\@types"
"C:\\Work\\nodejs\\node_modules\\mhy\\node_modules\\@types",
"C:\\Work\\Repos\\ccss\\packages\\core\\node_modules\\@types"
]
},
"include": [
"X:\\GITHUB\\ccss\\packages\\core\\src\\**\\*"
"C:\\Work\\Repos\\ccss\\packages\\core\\src\\**\\*"
],

@@ -50,4 +50,4 @@ "exclude": [

"files": [
"C:\\Users\\Winter\\AppData\\Roaming\\npm\\node_modules\\mhy\\dist\\configs\\typescript\\mhy.d.ts"
"C:\\Work\\nodejs\\node_modules\\mhy\\dist\\configs\\typescript\\mhy.d.ts"
]
}

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

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc