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

Usage

ESNext distribution version

We use TypeScript as main development language and distribute our lib in the maximum compliance with modern JavaScript specifications.

Your project bundler (webpack or something else) should not exclude this installed package from node_modules folder for the transpilation process.

The package babel-loader-exclude-node-modules-except can help you with this

CommonJS distribution version

If you cannot change your bundler config or if you do not want to include ESNext code version into your project - for this we have compiled CommonJS distribution version.

You can install @wezom/toolkit-css-in-js-cjs instead of the current package.

Install the chosen npm package

# esnext version
npm i @wezom/toolkit-css-in-js
# or commonjs
npm i @wezom/toolkit-css-in-js-cjs

▲ Go Top | ▲ Table of Content

Tools

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

▲ Go Top | ▲ Table of Content

Contributing

Please fill free to create issues or send PR

Licence

BSD-3-Clause License