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

Table of Content:

Usage
1. Install npm package
2. Import to your codebase
  - ESNext
  - CommonJS Version
Tools
Contributing
License

Usage

Install npm package

npm i @wezom/toolkit-css-in-js

Import to your codebase

ESNext

We use TypeScript as main development language and distribute our lib in the maximum compliance with modern JavaScript specifications. You project bundler (webpack or something else) must not exclude this installed package from node_modules folder.

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

CommonJS Version

If you cannot change your bundler config or if you don not want to include esnext code version into your project - for this we have compiled CommonJS version of each library file and you can import *.cjs.js files. They ready to use without excluding node_modules and else. These files may have redundant code that is necessary for them to work "out of the box". And they will also be deprived of all the features of the ESNext specifications.

// no ES6 features but ready for use as is, without transpiling
import /* ... */ '@wezom/toolkit-css-in-js/dist/index.cjs.js';

▲ 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