NPM_PACKAGE

@soroush.tech/styled-system

Maintained, first-class-TypeScript rewrite of styled-system — responsive, theme-aware style props for CSS-in-JS. Drop-in replacement for styled-system v5.

$ npm i @soroush.tech/styled-system

VIEW_ON_NPM SOURCE

A maintained, first-class-TypeScript rewrite of styled-system v5 — responsive, theme-aware style props for CSS-in-JS.

It is a drop-in replacement for the styled-system runtime: the root export surface matches upstream verbatim, and the package ships its own types (replacing @types/styled-system).

Features

Add style props that hook into your own theme
Quickly set responsive font-size, margin, padding, width, and more with props
Influenced by constraint-based design-system principles
Typographic scale, and a spacing scale for margin and padding
Works with any color palette
Works with most CSS-in-JS libraries, including Emotion and styled-components
First-class TypeScript types — theme-scale-aware props, replacing @types/styled-system

Install

# npm
npm install @soroush.tech/styled-system

# pnpm
pnpm add @soroush.tech/styled-system

# yarn
yarn add @soroush.tech/styled-system

@emotion/is-prop-valid (^1.4.0, peer) and prop-types (^15.8.1, optional peer) are each used by a single subpath — should-forward-prop and prop-types respectively. Install one only if you import that subpath. You bring your own CSS-in-JS library (Emotion, styled-components, …); the core carries neither at runtime.

Usage

// Example uses Emotion, but styled-system works with most other CSS-in-JS libraries as well
import styled from '@emotion/styled'
import { space, layout, typography, color } from '@soroush.tech/styled-system'

// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${layout}
  ${typography}
  ${color}
`

Each style function exposes its own set of component props that handle styles based on values defined in a theme.

// width: 50%
<Box width={1 / 2} />

// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />

// margin: 16px (theme.space[2])
<Box m={2} />

// padding: 32px (theme.space[3])
<Box p={3} />

// color
<Box color="tomato" />

// color: #333 (theme.colors.gray[0])
<Box color="gray.0" />

// background-color
<Box bg="tomato" />

Responsive style props

Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. See Responsive Styles.

// responsive width
<Box width={[1, 1 / 2, 1 / 4]} />

// responsive font-size
<Box fontSize={[2, 3, 4]} />

// responsive margin
<Box m={[1, 2, 3]} />

// responsive padding
<Box p={[1, 2, 3]} />

Subpath imports

Subpaths mirror the original @styled-system/* packages:

import { css } from '@soroush.tech/styled-system/css'
import { themeGet } from '@soroush.tech/styled-system/theme-get'
import { pick, omit } from '@soroush.tech/styled-system/props'
import propTypes, { createPropTypes } from '@soroush.tech/styled-system/prop-types'
import shouldForwardProp, {
  createShouldForwardProp,
  props,
} from '@soroush.tech/styled-system/should-forward-prop'

Drop-in via alias

Existing styled-system users can swap with a package-manager alias — no code changes:

"dependencies": {
  "styled-system": "npm:@soroush.tech/styled-system@^5"
}

The satellite @styled-system/* packages don't need separate aliases — import them as subpaths off the aliased styled-system name, and they resolve through this package's exports:

import themeGet from 'styled-system/theme-get'
import propTypes from 'styled-system/prop-types'
import { css } from 'styled-system/css'
import shouldForwardProp from 'styled-system/should-forward-prop'

Types resolve under both modern module resolution (node16/nodenext/bundler, via exports) and classic node (via typesVersions).

Documentation

Full docs live in docs/:

Runnable demos live in the examples repo.