@wezom/toolkit-css-in-js

v6.1.0

Published

3 years ago

Useful tools for working with CSS-in-JS

Downloads

0High
0Medium
0Low

dutchenkooleg

@wezom toolkit toolbox CSS-in-JS JSS

@wezom/toolkit-css-in-js

Useful tools for working with CSS-in-JS

| Statements | Branches | Functions | Lines | | --------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | | | | |

Table of Content:

Tools

Absolute position

`jssAbsoluteCenter()`

Generate CSS properties for absolute centering

Parameters:

| Name | Data type | Argument | Default value | Description | | ------ | ----------------------------------------------- | ---------- | ------------- | ----------- | | 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 | Description | | -------------- | --------- | ---------- | ------------- | ----------- | | 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 | Description | | ----- | ------------------------------------------------------------------------------------ | ---------- | ------------- | ----------- | | 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@wezom/toolkit-css-in-js

Table of Content:

Tools

Absolute position

jssAbsoluteCenter()

jssAbsoluteGap()

jssAbsoluteSquare()

Dividers

jssSplitAndChangeJoiner()

jssChangeJoiner()

CSS min-max

jssClamp()

jssClampHack()

jssMax()

jssMin()

CSS units

jssConvertPixels()

jssEm()

jssRem()

jssRemWithSize()

jssSetPreDefinedRemSize()

jssPercentage()

jssUnitExtract()

jssUnitLess()

jssUnitRevertSign()

Borders

jssBorder()

Fonts

jssFontFaceSrc()

Custom Properties

jssVar()

Contributing

Licence

`jssAbsoluteCenter()`

`jssAbsoluteGap()`

`jssAbsoluteSquare()`

`jssSplitAndChangeJoiner()`

`jssChangeJoiner()`

`jssClamp()`

`jssClampHack()`

`jssMax()`

`jssMin()`

`jssConvertPixels()`

`jssEm()`

`jssRem()`

`jssRemWithSize()`

`jssSetPreDefinedRemSize()`

`jssPercentage()`

`jssUnitExtract()`

`jssUnitLess()`

`jssUnitRevertSign()`

`jssBorder()`

`jssFontFaceSrc()`

`jssVar()`