@cryptic-css/core - npm Package Compare versions

Comparing version 0.2.1 to 1.0.0

dist/parsers.js

		@@ -7,13 +7,4 @@ import options from "./options";
		};
		export const parseSingle = input => {
		switch (typeof input) {
		case 'number':
		return input === 0 ? 0 : options.applyUnit(input);
		export const parseSingle = input => typeof input === 'number' ? input === 0 ? 0 : options.applyUnit(input) : input;

		case 'string':
		default:
		return input;
		}
		};

		const applyArray = input => {
		@@ -20,0 +11,0 @@ let out = '';

package.json

		{
		"name": "@cryptic-css/core",
		"version": "0.2.1",
		"version": "1.0.0",
		"description": "> TODO: description",
		@@ -35,3 +35,3 @@ "author": "Viktor Vincze <viktor.vincze@doclerholding.com>",
		},
		"gitHead": "dcd133f2ef9eb5ad9b3d85924c0e48f939f5b667"
		"gitHead": "d0dcdf7f5d51ea8bc559db0eb37ac7660d8eaafe"
		}

120

README.md

		@@ -5,120 +5,2 @@ # `@cryptic-css/core`

		## Install

		```sh
		npm i @cryptic-css/core
		```

		## Usage

		By default core can be used on it's own if you don't want the
		extra features coming with the full package.

		```js
		import ccss from '@cryptic-css/core'

		ccss({
		c: '#fff'
		})
		```

		### Options

		#### `unit`

		A unit you want to use for your values.

		Default: `rem`

		#### `applyUnit`

		A function which will transform your number values to the desired unit.

		Default: `n => \`${n}${options.unit}\``

		#### Customization

		You can customize these options (or add new options).

		This is usually being called on the top level of your app only once.

		```js
		import { setOptions, options } from 'cryptic-css'

		setOptions({
		unit: 'var(--px)',
		applyUnit: v => `calc(${v} * ${options.unit})`,
		foo: 'bar'
		})
		```

		### API

		#### `ccss` (default)

		Awaits a style object and returns a CSS string. Any keys and values
		not having a shorthand will be "printed" as is.

		```js
		import ccss from 'cryptic-css'

		ccss({
		d: 'f',
		'-webkit-foo': 'bar'
		})

		/**
		* Output:
		*
		* display: flex;
		* -webkit-foo: bar;
		*/
		```

		#### `setProps`

		Allows you to add support for custom properties
		or override existing ones.

		The return value is pure CSS text.

		```js
		import { props, setProps, pipe } from 'cryptic-css'

		const schemes = {
		dark: '#000'
		}

		setProps({
		// Add support for using schemes for `color` prop
		// We will keep the existing functionality also
		c: pipe(v => schemes[v] \|\| v, props.c)

		// Add support for a new `scheme` prop
		scheme(v) {
		const color = schemes[v]

		return `
		background: ${color};
		box-shadow: 0 10px 10px ${color};
		`
		}
		})
		```

		> Please note that this is just a demonstration, you probably want to use
		> value maps to add support for custom colors.

		#### `setValueMap`

		Set custom values/shorthands for a property.

		```js
		import { setValueMap } from 'cryptic-css'

		setValueMap({
		color: {
		dark: '#000'
		}
		})
		```
		See: https://ccss.dev/docs/api-and-packages/core

src/parsers.ts

		@@ -9,11 +9,3 @@ import options from './options'

		export const parseSingle = input => {
		switch (typeof input) {
		case 'number':
		return input === 0 ? 0 : options.applyUnit(input)
		case 'string':
		default:
		return input
		}
		}
		export const parseSingle = input => (typeof input === 'number' ? (input === 0 ? 0 : options.applyUnit(input)) : input)

		@@ -20,0 +12,0 @@ const applyArray = input => {

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

dist/types.d.ts

Sorry, the diff of this file is too big to display

src/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

@cryptic-css/core - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics