Type Definitions
coreFunction(fallbackopt) → {function}
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
fallback |
object.<(string|number|bigint)> | array.<(string|number|bigint)> | string | number | bigint |
<optional> |
A fallback value to use when no prop value is passed |
Properties:
Name | Type | Description |
---|---|---|
propName |
stringModifier | Function to set the name of the prop the component should have |
p |
stringModifier | Shorthand for propName |
important |
modifier | Function to mark the value as !important |
i |
modifier | Shorthand for important |
propless |
modifier | Function to disable using a prop |
l |
modifier | Shorthand for propless |
calc |
stringModifier | Function to add css calc() to transform the value |
c |
stringModifier | Shorthand for calc |
Returns:
Function to take component props passed by styled-components
- Type
- function
cssMaker(value) → {array.<(string|number|bigint)>}
Parameters:
Name | Type | Description |
---|---|---|
value |
object.<(string|number|bigint)> | array.<(string|number|bigint)> | string | number | bigint | A CSS value |
Returns:
An array that represents a line of CSS code when joined
- Type
- array.<(string|number|bigint)>
modifier() → {coreFunction}
Returns:
The function it was called on
- Type
- coreFunction
props
An object containing a
theme
property
Type:
- object
Properties:
Name | Type | Description |
---|---|---|
theme |
theme | A theme object |
stringModifier(string) → {coreFunction}
Parameters:
Name | Type | Description |
---|---|---|
string |
string | A string value |
Returns:
The function it was called on
- Type
- coreFunction
theme
An object containing a
breakpoints
or a mediaQueries
property.
Type:
- object
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
breakpoints |
object.<(string|number|bigint)> | array.<(string|number|bigint)> |
<optional> |
An object or array of CSS min-width values |
mediaQueries |
object.<string> | array.<string> |
<optional> |
An object or array of strings containing valid media queries |
Examples
{
breakpoints: {
mobile: '320px',
tablet: '768px',
desktop: '1024px'
}
}
{
mediaQueries: {
mobile: '@media screen and (min-width: 320px)',
tablet: '@media screen and (min-width: 768px)',
desktop: '@media screen and (min-width: 1024px)'
}
}