Package Exports

@wezom/toolkit-css-in-js
@wezom/toolkit-css-in-js/dist/index.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

Tools

Absolute position

`jssAbsoluteCenter()`

Generate CSS properties for absolute centering

Parameters:

Name	Data type	Argument	Default value
width	`string`
height	`string`	optional	`...`
corner	`topLeft │ topRight │ bottomRight │ bottomLeft`	optional	`'topLeft'`

Returns:

{
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;
  width: string;
  height: string;
  margin: string
}

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'
 }

 jssAbsoluteCenter('100px', '100px', 'topRight);
 // returns
 {
     top: '50%',
     right: '50%',
     width: '100px',
     height: '100px',
     margin: '-50px -50px 0 0'
 }

 jssAbsoluteCenter('100px', '100px', 'bottomRight);
 // returns
 {
     bottom: '50%',
     right: '50%',
     width: '100px',
     height: '100px',
     margin: '0 -50px -50px 0'
 }

 jssAbsoluteCenter('100px', '100px', 'bottomLeft);
 // returns
 {
     bottom: '50%',
     right: '50%',
     width: '100px',
     height: '100px',
     margin: '0 0 -50px -50px'
 }

`jssAbsoluteGap()`

Parameters:

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

Returns:

{
    width: auto;
    height: auto;
    top: string;
    right: string;
    bottom: string;
    left: string;
}

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`
corner	`topLeft │ topRight │ bottomRight │ bottomLeft`	optional	`'topLeft'`

Returns:

{
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;
  width: string;
  height: string
}

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%'
 }

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

 jssAbsoluteSquare('120%', 'bottomRight');
 // returns
 {
     bottom: '-10%',
     right: '-10%',
     width: '120%',
     height: '120%'
 }

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

Dividers

`jssSplitAndChangeJoiner()`

Low level method

Parameters:

Name	Data type	Argument	Default value	Description
string	`string`
splitBy	`string`
joiner	`string`

Returns: string

Examples:

jssChangeJoiner('0 4px auto', ' ', ', '); // => '0, 4px, auto'
jssChangeJoiner('0 4px auto', ' ', '~*~'); // => '0~*~4px~*~auto' ;)

`jssChangeJoiner()`

High level joiner from ' ' to new value

Parameters:

Name	Data type	Argument	Default value	Description
string	`string`
joiner	`string`	optional	`', '`

Returns: string

Examples:

jssChangeJoiner('0 4px auto'); // => '0, 4px, auto'
jssChangeJoiner('0 4px auto', '~*~'); // => '0~*~4px~*~auto' ;)

CSS min-max

`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))'

`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)'

CSS units

`jssConvertPixels()`

Low level converter

Parameters:

Name	Data type	Argument	Default value	Description
size	`number`
pixels	`PixelValue[]`
unit	`Units`
joiner	`Joiner`

Returns: string

`jssEm()`

High level converter from px to em

Parameters:

Name	Data type	Argument	Default value	Description
emSize	`number`
pixels	`...PixelValue[]`

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'

`jssRem()`

High level converter from px to rem with pre-defined rem size By default rem size used as 16px;

Parameters:

Name	Data type	Argument	Default value	Description
pixels	`...PixelValue[]`

Returns: string

Examples:

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

`jssRemWithSize()`

High level converter from px to rem, with custom rem size

Parameters:

Name	Data type	Argument	Default value	Description
remSize	`number`
pixels	`...PixelValue[]`

Returns: string

Examples:

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

`jssSetPreDefinedRemSize()`

Change pre-defined rem size.

Parameters:

Name	Data type	Argument	Default value	Description
size	`number`

Returns: void

Examples:

jssRemDefined(20); // => '1.25rem'
jssSetPreDefinedRemSize(20);
jssRemDefined(20); // => '1rem'

`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

`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

`jssUnitRevertSign()`

Invert value sign

Parameters:

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

Returns: string │ number

Examples:

jssUnitRevertSign(-20); // 20
jssUnitRevertSign('3rem'); // '-3rem'
jssUnitRevertSign('56.25%'); // '-56.25%'
jssUnitRevertSign('-4px 4px'); // '4px -4px'
jssUnitRevertSign(jssEm(16, 64, -64)); // '-4em 4em'
jssUnitRevertSign('-4px, 4px'); // '4px, -4px'
jssUnitRevertSign('-4px, 4px 4px, -5px, -6 -7 -8, 99.9%'); // '4px, -4px -4px, 5px, 6 7 8, -99.9%'

Borders

`jssBorder()`

Setting border values a little more declarative

Parameters:

Name	Data type	Argument	Default value
width	`string │ number`
style	`none │ hidden │ dotted │ dashed │ solid │ double │ groove │ ridge │ inset │ outset`	optional	`'solid'`
color	`string`	optional

Returns: string

Examples:

jssBorder(2); // => '2px solid'
jssBorder('0.25rem'); // => '0.25rem solid'
jssBorder(3, 'double'); // => '3px double'
// instead of concat `1px solid ${myColorVar}`
jssBorder(1, 'solid', myColorVar); // => '1px solid #f00'

Fonts

`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')"

Custom Properties

`jssVar()`

Set CSS function var body

Parameters:

Name	Data type	Argument	Default value	Description
varName	`string`
fallback	`string │ number`	optional

Returns: string

Examples:

jssVar('--top'); // 'var(--top)'
jssVar('top'); // 'var(--top)'
jssVar('--color', 'red'); // 'var(--color, red)'

const myVarsDict = {
    propA: 'myPropA',
    propB: 'myPropB'
};

jssVar(myVarsDict.propA, 10); // 'var(--myPropA, 10)'

▲ Go Top | ▲ Table of Content

Contributing

Please fill free to create issues or send PR

Licence

BSD-3-Clause License