Package Exports

@wezom/toolkit-css-in-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@wezom/toolkit-css-in-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@wezom/toolkit-css-in-js

Useful tools for working with CSS-in-JS

Statements	Branches	Functions	Lines

jssAbsoluteCenter()

Generate CSS properties for absolute centering

Parameters:

Name	Data type	Argument	Default value	Description
width	`string`
height	`string`	optional	`...`

Examples:

 jssAbsoluteCenter('3rem');
 // returns
 {
     top: '50%',
     left: '50%',
     width: '3rem',
     height: '3rem',
     margin: '-1.5rem 0 0 -1.5rem'
 }

 jssAbsoluteCenter('4rem', '60px');
 // returns
 {
     top: '50%',
     left: '50%',
     width: '4rem',
     height: '60px',
     margin: '-30px 0 0 -2rem'
 }

jssAbsoluteGap()

Parameters:

Name	Data type	Argument	Default value	Description
x	`string`
y	`string`	optional	`...`

Examples:

 jssAbsoluteGap('10px');
 // returns
 {
     width: 'auto',
     height: 'auto',
     top: '10px',
     right: '10px',
     bottom: '10px',
     left: '10px'
 }

 jssAbsoluteGap('10px', '2em');
 // returns
 {
     width: 'auto',
     height: 'auto',
     top: '10px',
     right: '2em',
     bottom: '10px',
     left: '2em'
 }

jssAbsoluteSquare()

Parameters:

Name	Data type	Argument	Default value	Description
percent	`string / number`

Examples:

 jssAbsoluteSquare(54);
 // returns
 {
     top: '23%',
     left: '23%',
     width: '54%',
     height: '54%'
 }

 jssAbsoluteSquare(100);
 // returns
 {
     top: '0%',
     left: '0%',
     width: '100%',
     height: '100%'
 }

 jssAbsoluteSquare('120%');
 // returns
 {
     top: '-10%',
     left: '-10%',
     width: '120%',
     height: '120%'
 }

jssClamp()

Generate css math function clap(min, val, max)

Parameters:

Name	Data type	Argument	Default value	Description
min	`Operand`
val	`Operand`
max	`Operand`

Returns: string

Examples:

jssClamp('10px', '5vw', '50px'); // 'clamp(10px, 5vw, 50px)'
jssClamp(jssRem(24), '10%', jssRem(64)); // 'clamp(1.5rem, 10%, 4rem)'

jssClampHack()

Generate css math function-hack max(x, min(y, z)) instead clamp(z, y, x)

Parameters:

Name	Data type	Argument	Default value	Description
min	`Operand`
val	`Operand`
max	`Operand`

Returns: string

Examples:

jssClamp('10px', '5vw', '50px'); // 'max(10px, min(5vw, 50px))'
jssClamp(jssRem(24), '10%', jssRem(64)); // 'max(1.5rem, min(10%, 4rem))'

jssEm()

Parameters:

Name	Data type	Argument	Default value
remSize	`number`
pixels	`PixelValue[]`
joiner	`Joiner`	optional	`' '`

Returns: string

Examples:

jssEm(16, [16]); // => '1em'
jssEm(16, [16, 'auto']); // => '1em auto'
jssEm(16, [-8, 0]); // => '-0.5em 0'
jssEm(16, [24, 32, 48]); // => '1.5em 2em 3em'
jssEm(20, [30, 10, 45]); // => '1.5em 0.5em 2.25em'
jssEm(20, [30, 10, 45], ', '); // => '1.5em, 0.5em, 2.25em'

jssFontFaceSrc()

Returns string font-face src value

Parameters:

Name	Data type	Argument	Default value	Description
woff2	`string`
woff	`string`

Returns: string

Examples:

const src = jssFontFaceSrc('fonts/my.woff2', 'fonts/my.woff');
// => "url('/fonts/my.woff2') format('woff2'), url('/fonts/my.woff') format('woff')"

jssMax()

Generate css math function max(a, b)

Parameters:

Name	Data type	Argument	Default value	Description
a	`Operand`
b	`Operand`

Returns: string

Examples:

jssMax('5vw', '50px'); // 'max(5vw, 50px)'
jssMax('5vw', jssRem(64)); // 'max(5vw, 4rem)'

jssMin()

Generate css math function min(a, b)

Parameters:

Name	Data type	Argument	Default value	Description
a	`Operand`
b	`Operand`

Returns: string

Examples:

jssMin('5vw', '50px'); // 'min(5vw, 50px)'
jssMin('5vw', jssRem(64)); // 'min(5vw, 4rem)'

jssPercentage()

Calculate percentage value

Parameters:

Name	Data type	Argument	Default value
part	`number`
full	`number`
returnAsNumber	`boolean`	optional	`false`
fractionDigits	`number`	optional	`5`

Returns: string / number

Examples:

jssPercentage(720, 1280); // => '56.25%'
jssPercentage(9, 16); // => '56.25%'
jssPercentage(9, 16, true); // => 56.25
jssPercentage(9, 16, true, 1); // => 56.2

jssRem()

Parameters:

Name	Data type	Argument	Default value
remSize	`number`
pixels	`PixelValue[]`
joiner	`Joiner`	optional	`' '`

Returns: string

Examples:

jssRem(16, [16]); // => '1rem'
jssRem(16, [16, 'auto']); // => '1rem auto'
jssRem(16, [-8, 0]); // => '-0.5rem 0'
jssRem(16, [24, 32, 48]); // => '1.5rem 2rem 3rem'
jssRem(20, [30, 10, 45]); // => '1.5rem 0.5rem 2.25rem'
jssRem(20, [30, 10, 45], ', '); // => '1.5rem, 0.5rem, 2.25rem'

jssUnitExtract()

Get CSS unit px|rem|em|%|vw|vh|ms|s from value

Parameters:

Name	Data type	Argument	Default value	Description
value	`string / number`

Returns: string

Examples:

jssUnitExtract(100); // ''
jssUnitExtract('3rem'); // 'rem'
jssUnitExtract(jssEm(16, [64])); // 'em'
jssUnitExtract('-20px'); // 'px'
jssUnitExtract('56.25%'); // '%'

jssUnitLess()

Remove CSS unit px|rem|em|%|vw|vh|ms|s and receive number value

Parameters:

Name	Data type	Argument	Default value	Description
value	`string / number`

Returns: number

Examples:

jssUnitLess('3rem'); // 4
jssUnitLess(jssEm(16, [64])); // 4
jssUnitLess('-20px'); // -20
jssUnitLess('56.25%'); // 56.25