Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@styled-system/css
Advanced tools
Readme
Styled System for the css
prop
npm i @styled-system/css
Styled System CSS lets you write style objects with responsive, theme-aware Styled System shortcuts.
// usage with the css prop
import React from 'react'
import css from '@styled-system/css'
const Beep = props =>
<div
{...props}
css={css({
fontSize: [4, 5, 6],
color: 'primary',
})}
/>
// usage with a styled HOC
import styled from '@emotion/styled'
import css from '@styled-system/css'
const Boop = styled('div')(
css({
fontSize: [ 4, 5, 6 ],
color: 'primary',
bg: 'gray',
'&:hover': {
color: 'secondary',
},
})
)
To make the css prop work with styled-components
, babel-plugin-styled-components
must be enabled.
The following keys in your style object will work the same as Styled System props, pulling values from your theme
object.
Property | Theme Key |
---|---|
fontFamily | fonts |
fontSize | fontSizes |
fontWeight | fontWeights |
lineHeight | lineHeights |
letterSpacing | letterSpacings |
color | colors |
backgroundColor , bg | colors |
margin , m | space |
marginTop , mt | space |
marginRight , mr | space |
marginBottom , mb | space |
marginLeft , ml | space |
marginX , mx | space |
marginY , my | space |
padding , p | space |
paddingTop , pt | space |
paddingRight , pr | space |
paddingBottom , pb | space |
paddingLeft , pl | space |
paddingX , px | space |
paddingY , py | space |
top | space |
bottom | space |
left | space |
right | space |
border | borders |
borderTop | borders |
borderRight | borders |
borderBottom | borders |
borderLeft | borders |
borderColor | colors |
borderWidth | borderWidths |
borderStyle | borderStyles |
borderRadius | radii |
boxShadow | shadows |
textShadow | shadows |
zIndex | zIndices |
width | sizes |
minWidth | sizes |
maxWidth | sizes |
height | sizes |
minHeight | sizes |
maxHeight | sizes |
size | sizes |
All CSS properties accept arrays as values for responsive styles.
<div
css={css({
fontSize: [ 4, 5, 6 ],
})}
/>
In this example, fontSize
accepts an array, picking up values from the theme.fontSizes
scale, and borderBottom
is passed through as plain CSS.
<div
css={css({
// Styled System key
fontSize: [ 3, 4, 5 ],
// CSS property
borderBottom: '2px solid tomato',
})}
/>
MIT License
FAQs
Styled System for the `css` prop
The npm package @styled-system/css receives a total of 466,630 weekly downloads. As such, @styled-system/css popularity was classified as popular.
We found that @styled-system/css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.