❤
npm
Sign UpSign In

@wezom/toolkit-css-in-js
TypeScript icon, indicating that this package has built-in type declarations

6.1.0 • Public • Published

@wezom/toolkit-css-in-js

Useful tools for working with CSS-in-JS

Statements Branches Functions Lines
Statements Branches Functions Lines

Table of Content:

  1. Tools
  2. Contributing
  3. License

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

Readme

Keywords

Package Sidebar

Install

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

Repository

github.com/WezomCompany/toolkits

Homepage

github.com/WezomCompany/toolkits/tree/main/packages/css-in-js#readme

Weekly Downloads

3

Version

6.1.0

License

BSD-3-Clause

Unpacked Size

47.4 kB

Total Files

27

Last publish

Collaborators

  • dutchenkooleg
Try on RunKit
Report malware