the-code-monkey / styled-system

Hi there 👋

I'm Andy, a Web & Software developer from the UK, specialising in ReactJS/NextJS

I'm currently working on my own Theming, UI libraries as well as a fully ready setup development environment.

styled-system's Issues

React Native Support

Hey,
Could you tell me please if it's working with React Native styled-components lib?

Theme Specification

Here is the running conversation around theme specification and tweaks that can be done to it.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency @techstack/components to v1.3.224

Detected dependencies

github-actions

.github/workflows/deploy.yml

• actions/checkout v4
• actions/setup-node v4
• actions/cache v4
• bahmutov/npm-install v1
• ubuntu 22.04

.github/workflows/main.yml

• actions/checkout v4
• actions/setup-node v4
• bahmutov/npm-install v1

npm

docs/package.json

• @techstack/components 1.3.222
• next 14.1.0
• nextra 2.13.3
• nextra-theme-docs 2.13.3
• react 18.2.0
• react-dom 18.2.0
• @types/node 20.11.19
• typescript 5.3.3

package.json

• lerna 8.1.2
• yarn 1.22.21

packages/styled-system/package.json

• @emotion/is-prop-valid 1.2.1
• @techstack/memoize 1.3.188
• csstype 3.1.3
• react 18.2.0
• @size-limit/file 11.0.2
• @techstack/tcm-cli 1.3.188
• @types/jest 29.5.12
• jest 29.7.0
• size-limit 11.0.2
• styled-components 6.1.8
• ts-jest 29.1.2
• tslib 2.6.2
• typescript 5.3.3

---

• Check this box to trigger a request for Renovate to run again on this repository

If you use it with styled-components, you get a warning

The latest styled-component is supposed to spend $, but it should be updated.

styled-components: it looks like an unknown prop "mb" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.)

Add `sx` prop behavior for expanding alias

When I write styled-system code using styled-compoments, I tend to write something like this:

<Box css={{ pl: 0, pt: 3 }}>{children}</Box>

That's useful to group all CSS values in an object and avoid HTML pollution.

However, this doesn't work as expected, since pl and pt are shortcuts defined by styled-system.

This is the way for achieving that:

import { css } from '@techstack/styled-system'

<Box css={css({ pl: 0, pt: 3 })}>{children}</Box>

Although it's now working the code looks complex. What could be really nice is to do it automagically, similar to https://theme-ui.com/sx-prop

Any idea how to achieve that? 🤔

is `compose` really necessary?

What's the difference between:

import styled from 'styled-components'
import { compose, typography, space, color } from '@techstack/styled-system'
 
export const Text = styled('div')(
  compose(
    typography,
    space,
    color
  )
)

and

import styled from 'styled-components'
import { typography, space, color } from '@techstack/styled-system'
 
export const Text = styled('div')(
    typography,
    space,
    color
)

The only thing documentation is saying is:

The compose utility is used to combine multiple style functions together into one. This utility can help improve performance when using multiple style props functions on the same component.

Still it's unclear why it's necessary 🤔

mixing array props and inheritance

Giving this base component declaration:

const Text = styled('div')(
  typography
)

Text.defaultProps = {
  fontSize: [1, 1, 2, 2]
}

and creating a new one that use it:

const Caps = styled(Text)``

If I try to redefine defaultProps, it seems the original array declaration is taking precedence:

This doesn't work:

Caps.defaultProps = {
  fontSize: 0 // fontSize is still [1, 1, 2, 2]
}

This works:

Caps.defaultProps = {
  fontSize: [0, 0, 0 0]
}

I'm using this last as workaround, but ideally to avoid confusion I think defaultProps should always be overriden.

typing not compatible between this and styled-components 6.0.4

Hi... styled-system typing is no longer compatible with newer versions of styled-components so I spiked the potential of switching over to this fork and found it has the following issue:

const StyledDiv = styled.div(
  css({
    backgroundColor: 'garble'
  })
)

With the following error:

TS2345: Argument of type '(props?: Theme<TLengthStyledSystem> | { theme: Theme<TLengthStyledSystem>; } | undefined) => CSSObject' is not assignable to parameter of type 'Styles<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>'.
  Type '(props?: Theme<TLengthStyledSystem> | { theme: Theme<TLengthStyledSystem>; } | undefined) => CSSObject' is not assignable to type 'StyleFunction<FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>'.
    Type 'CSSObject' is not assignable to type 'Interpolation<object>'.
      Type 'CSSObject' is missing the following properties from type 'Interpolation<object>[]': length, pop, push, concat, and 27 more.

Also, I was wondering are you using this project yourself in and is your intention still to continue maintenance and development of it?

Fix 'Trailing spaces' issue in .github\workflows\deploy.yml

CodeFactor found an issue: Trailing spaces

It's currently on:
.github\workflows\deploy.yml:33