styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️

A utility-first CSS-in-JS framework built for React.

npm install @xstyled/styled-components styled-components

Docs

See the documentation at xstyled.dev for more information about using xstyled!

Quicklinks to some of the most-visited pages:

• Getting started
• Motivation

Example

import { x } from '@xstyled/styled-components'

function Example() {
  return (
    <x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
      <x.div flexShrink={0}>
        <x.img h={12} w={12} src="/img/logo.svg" alt="xstyled Logo" />
      </x.div>
      <x.div>
        <x.h4
          fontSize={{ _: 'md', lg: 'xl' }}
          fontWeight="medium"
          color="black"
        >
          xstyled
        </x.h4>
        <x.p color="gray-500">A CSS-in-JS framework built for React.</x.p>
      </x.div>
    </x.div>
  )
}

License

Licensed under the MIT License, Copyright © 2019-present Greg Bergé.

See LICENSE for more information.

xstyled's Issues

Compose theme values

Hi,

I'm wondering what is the best option to compose typographic styles based on theme values.
For example, I'd like to create a theme object like this :

fontSizes: ["12rpx", "24rpx", "34rpx"],
fontWeight: [100, 500, 800],
colors: {
   primary: "#49bd17"
},
typographies: {
   title: {
      fontSize: 1,
      fontWeight: 2
   },
   label: {
      fontSize: 0,
      fontWeight: 1
   },
   ...
}

and using it in my styled component :

const Button = styled.button`
   background: transparent;
   ${typographies.label}
`;

Is there a way to achieve this?

How to add custom styles to an element

💬 Questions and Help

Hi,
I am new to styled-components, and xstyled. So far, I am enjoying the possibilities of using such tools. But I was wondering if there is a way to add custom styles to an element (kind of in-line styles)

For example, I have the following code.

const theme = {
  tables: {
    default: css`
      color: red;
    `,
    primary: css`
      color: pink;
    `,
    secondary: css`
      color: purple;
    `
  }
}

const variants = variant({
  // Variants are found in `theme.tables`
  key: 'tables',
  default: 'default'
})

const StyledTable = styled.table`
  ${system}
  ${variants}
`

This code works well, when using the styles from the theme. For example:

  <StyledTable variant="primary>
      // Table code ...
   </StyledTable>

But what if I want to add specific style just for this specific element, is it possible?

Something like:

<StyledTable variant="primary css={css`width: 100%;`}>
  // Table code ...
</StyledTable>

PS: I tried searching online and tried different ways, like style prop, className prop, and adding it as a variant with a function but could not make it work. Sorry if this is a dumb question.

Thanks

Get nested system styles using `styled`

💬 Questions and Help

I would really like to have a deeply nested theme object such as:

const theme = {
  colors: {
    primary: 'blue',
    text: '#000',
    background: '#fff',
    variants: {
      primary: {
        light: 'lightblue',
        dark: 'darkblue'
      }
    }
}

const StyledDiv = styled.div`
  border-color: primary;
  background-color: variants.primary.dark;
`

The theme is just simplified and could be flattened, but in my use case it would be a messy if the object is flattened, e.g. I want to have values like colors.variants.state.error.dark

It doesn't seem like there's a way to do this, is there?

Default way to set default attrs for component isn't working

🐛 Bug Report

Styled-components allow you to set default props for a component using .attrs() method.
Right now, after migrating to xstyled wrapper I was had to rewrite all my components like e.g.

const PasswordInput = styled(Component).attrs({ type: 'password' })`` 

to

const PasswordInput = styled(Component)``
PasswordInput.attrs = [{ type: 'password' }]

To Reproduce

1. Create a styled component
2. Try to pass attributes to the component in a way proposed in https://www.styled-components.com/docs/faqs#when-to-use-attrs

You'll get Object(...)(...).attrs is not a function

Expected behavior

It should work in the same way as it proposed in a documentation of a styled-components package

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/festive-dhawan-rn2yw?fontsize=14 (you'll have to download the code and run on your local machine, cuz codesandbox have some troubles with your package while it's perfectly working on a local server)

Paste the results here:

npx: installed 1 in 2.141s

*** Clipboard option removed - use clipboardy or clipboard-cli directly ***


## System:
 - OS: macOS 10.14.4
 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 - Memory: 58.19 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.13.0 - ~/.nenv/shims/node
 - Yarn: 1.15.2 - /usr/local/bin/yarn
 - npm: 6.7.0 - ~/.nenv/shims/npm
## npmPackages:
 - @xstyled/styled-components: 1.0.1 => 1.0.1 
 - styled-components: 4.2.0 => 4.2.0 

Add `fill` property support

🚀 Feature Proposal

fill is actually not supported, it should be.

How get theme value inside the component?

Hello there,
please, I have a specific case, where I need to get theme value inside component, like this:

const Component = (props) => {
   const primaryColor = th.color(”primary”, props)
...

But this doesnt work, because th helper is intended to be used inside styled-components.

I note that this component is under xstyled context provider.

How to do this?

Ability to choose a theme color from theme array of specific color range

My theme code follows the standards:

Theme:

const baseColors = {
    grays: ['#9B9B9B', '#DEE2E5', '#EFF0F4', '#F7F8FA'],
    reds: ['#D30C2B', '#EF3920'],
    blues: ['#2C304C', '#1A395C', '#6782A4'],
}

const colors : {
	...baseColors,
	primary: baseColors.reds[0],
    secondary: baseColors.blues[1]
}

// ...more code...

export default {
    colors,
    fontSizes,
    fontWeights,
    shadows,
    space,
    radii,
}

I would like to access a specific "blue" color from xstyled:

Basic use-case:

import styled from '@xstyled/styled-components'

const MyComp = styled.div`
	background: grays[3]; // <- xStyled should parse this as: theme.colors.grays[3]
`

I cannot possibly give alias names to all my color, in reality I have many and naming them will be more confusing than accessing an Array index, since colors arrays are sorted by darker to lighter, and it's obvious to developers in the team which gray is lighter or darker by using an index, instead of creating alias names such as:

const colors : {
	...baseColors,
	primary: baseColors.reds[0],
    secondary: baseColors.blues[1],
    gray1: baseColors.grays[1],  // <- I don't want to make these only for xStyled
    gray2: baseColors.grays[2],
    gray3: baseColors.grays[3],
}

Error with importing __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS

🐛 Bug Report

I have that error with importing module "__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS" from styled-components

To Reproduce

During building in Next.js when i run "yarn dev"

Expected behavior

Normal dev run in Next.js

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/ssbed

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
 - CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
 - Memory: 5.59 GB / 62.70 GB
 - Container: Yes
 - Shell: 4.4.12 - /bin/bash
## Binaries:
 - Node: 10.16.0 - /usr/local/bin/node
 - Yarn: 1.16.0 - /usr/local/bin/yarn
 - npm: 6.9.0 - /usr/local/bin/npm
## npmPackages:
 - @xstyled/styled-components: 1.7.0 => 1.7.0
 - @xstyled/system: 1.7.0 => 1.7.0
 - styled-components: 5.0.0-beta.6-ej4 => 5.0.0-beta.6-ej4

ThemeProvider not providing theme to createGlobalStyles

🐛 Bug Report

createGlobalStyle components are unable to use themes.

To Reproduce

import { ThemeProvider, createGlobalStyle } from '@xstyled/styled-components';

const theme = {
  colors: {
    background: '#000',
  }
}

const GlobalStyle = createGlobalStyle`
  body {
    background-color: background; // Does not work, generates CSS: `background-color: background` instead of #000
  }
`
<ThemeProvider theme={theme}>
  <>
    <GlobalStyle />
    <App />
  </>
</ThemeProvider>

Inconsistencies using emotion with media functions

🐛 Bug Report

When using the included media query utilities the css template literal did not work when using @xstyled/emotion for example

  ${up(
    'md',
    css`
      height: 300px;
    `,
  )}

shown here in the docs would result in a style tag to be placed on the media query. I believe this is because the breakpoint function doesn't reduce the second property to an object take a look here. I've attempted to circumvent this by creating
theme/media.js
which allows me to do

const Wrapper = styled(Box)`
  ${up('sm')} {
    position: relative;
    flex-wrap: nowrap;
    height: 200px;
    margin-bottom: 5;
    background: white;
    border-color: transparent;
    box-shadow: 25;
  }
  &:last-of-type {
    ${up('sm')} {
      div {
        background-color: backgroundDark;
      }
    }
  }

To Reproduce

Use a css template literal as a value to any export from breakpoints.js

Expected behavior

The functions should handle the css template literal

## System:
 - OS: Linux 5.1 Arch Linux undefined
 - CPU: (8) x64 AMD Ryzen 5 1500X Quad-Core Processor
 - Memory: 1.14 GB / 15.68 GB
 - Container: Yes
 - Shell: 3.0.2 - /usr/bin/fish
## Binaries:
 - Node: 11.15.0 - /usr/bin/node
 - Yarn: 1.16.0 - /usr/bin/yarn
 - npm: 6.9.0 - /usr/bin/npm
## npmPackages:
 - @xstyled/system: ^1.5.0 => 1.5.0 

Generated class names aren't legible

🐛 Bug Report

Component class names are not using display names. They look like this:

<div class="sc-bdVaJa cyWyZX">
  Something
</div>

To Reproduce

Here are my dependencies:

• @xstyled/styled-components 1.16.0
• @xstyled/system 1.16.0
• styled-components 4.4.1
• babel-plugin-styled-components 1.10.7

Expected behavior

Previously without xstyled, I would get this class name in my styled components:

<div class="ComponentDisplayName_Text-sc-bdVaJa cyWyZX">
  Something
</div>

How to use the ThemeProvider in a Gatsby app?

💬 Questions and Help

Not sure if this is currently supported at all, but it would be pretty great!

is it possible to extend variant?

in styled-system you can do extend variant inside your template

{
  heading: {
    fontSize: 1,
    color: 'heading',
    marginBottom: 4,
  },
  h1: {
    variant: 'heading',
    font-size: 3;
  },
}

Is it possible something similar with xstyled?
I understand that you need to use css.

{
  heading: css`
    font-size: 1;
    color: heading;
    margin-bottom: 4;
  `,
  h1: css`
    variant: heading;
    or
    ${variant('heading')}
    font-size: 3;
  },
}

It would be very nice to have this feature.

just say thank you for this library

Hi Man.
Few months ago I have started to work with rebass and styled-system and I found a lot of things which are not great and started to thinking about own package. During search I found this library and you covered almost everything.
I wanted just tell you thank you for this great small library :) I have started to use it in my project.
Feel free to close this ticket :-D

Typescript suport

💬 Questions and Help

Will you plan to provide type definitions for this library?

Emotion v11

Will this project be updated to use emotion v11? They already have a fix in it for #77 see emotion-js/emotion#1220 as well as improved typings for Theme

I'm working on a UI library that won't be out for a while so I'm working with v11 that should be out in less than a month, it would be nice to use xstyled alongside it but they've also renamed a lot of the packages so it won't work at the moment

Compatibility with Styled-Components v3

Hi,

I'm trying to make xstyled work within a Styled-Components-v3.4.0-based app, but it seems it needs some v4 stuff to work properly :

export 'createGlobalStyle' (imported as 'createGlobalStyle$1') was not found in 'styled-components'

Should I migrate to v4 for best results ?

Make themed values less ambiguous

Hi, great library 👍 , I have a

🚀 Feature Proposal

Instead of this:

  background-color: primary; /* ⟶ theme.colors.primary */
  margin: 2; /* ⟶ theme.space.2 */

maybe do this

  background-color: $primary; /* ⟶ theme.colors.primary */
  margin: $2; /* ⟶ theme.space.2 */

Pitch

Pros:

• Easier to read, it's immediately obvious what comes from theme and what's not
• Easier to refactor, grep, codemode, etc, less chance to do something by mistake
• Familiar to users of sass, less etc, they probably could just copy-paste code over in many cases.

Cons:

• Have to type one more character

Babel Macros - not working

Hi, it would seem I cannot import the macro version of styled-components:

https://www.styled-components.com/docs/tooling#babel-macro

import styled from '@xstyled/styled-components/macro';

Failed to compile.
Error: Cannot find module '@xstyled/styled-components/macro'

Thought trying also importing from @xstyled/macro but no luck.

---

Importing directly from styled-components does work well:

import styled from 'styled-components/macro';

---

Background:

We have an app based on create-react-app, not ejected, and not using rewire, because CRA supports babel macros, and I wish to utilize that ability to be able to use the babel-plugin-styled-components plugin.

I need this so my styled-components will be generated with a real display name, to be able to access components in enzyme unit tests.

Related thread

Prop-types documentation page on the website needs fixing

🐛 Bug Report

Prop-types documentation page shows getUtilityPropTypes`` instead of getSystemPropTypes` as per https://github.com/smooth-code/xstyled/blob/master/packages/prop-types/src/index.js#L3

To Reproduce

Steps to reproduce the behavior:
Check https://github.com/smooth-code/xstyled/blob/master/packages/prop-types/src/index.js#L3

Expected behavior

getUtilityPropTypes should be referenced

Link to repl or repo (highly encouraged)

#106

README installation instructions

Hey, may I know why the README says:

npm install @xstyled/styled-components styled-components

Why is styled-components is in this command if it's already included in this repo's package.json?

It will be installed automatically

Styled Components V5

🚀 Feature Proposal

Update styled-components to V5 :)

Motivation

https://github.com/styled-components/styled-components/releases/tag/v5.0.0

Allow manipulating theme colors (e.g. alpha)

🚀 Feature Proposal

I'd like to be able to modify colors (adjust alpha, hue, saturation) with the help of polished js:

import styled from '@xstyled/styled-components'
import { th } from '@xstyled/system'
import { rgba } from 'polished'

const theme = {
  colors: {
    black: '#000'
  }
}

const Box = styled.div`
  color: ${rgba(th.colors('black'), 0.5)};
`

Motivation

I have theme with several solid colors but must apply various alpha values for box shadows, shades, etc. Opacity is not useable because it would reduce the opacity of the text within the element as well as the background color.

Pitch

Flexible color manipulation is crucial to allow users to continue using the colors specified in the sytem without having to create hardcode duplicate colors each time they want to create a variant color.

Support negative values in styled-components

🚀 Feature Proposal

Currently, adding a negative value is not supported.

Motivation

It feels natural to write negative values without increasing your theme with negative doublons

Example

margin-bottom: -md is not supported you have to use margin-bottom: -${th.space('md')}

OR

if you want to be able to make it work, you have to create negative theme values like this :
const theme.space = { '-md': -5 }

Pitch

Your library is awesome and should allow this.

interpolation in shorthand properties

theme

export const space = [0.8, 1, 2, 3, 4]
space.xs = space[0] / 2 + 'em'
space.small = space[0] + 'em'
space.medium = space[2] + 'em'
space.large = space[4] + 'em'

Some styled component:

const StyleComp = styled.div`
	margin: 0 0 0 large;
`

Undesired output:

margin: 0.8px 0.8px 0.8px 4em;

Expected output:

margin: 0 0 0 4em;

---

I do understand the difficulty in this mixed input, where one would want 0 a real value and not place [0] in the theme "space" array. Are you planning to address this?

It's very annoying to specifically write it in 2 lines:

const StyleComp = styled.div`
	margin: 0;
    margin-left: large;
`

remove property when it is used as variant

This feature is little bit connected with #69

Here is small example

const Test = styled(Box)`
  ${variant({
      key: 'container',
      default: 'md',
      prop: 'size',
  }))
`;

Theme

  ....
  sizes:  {
    sm: 540,
    md: 720,
    lg: 960,
    xl: 1140,
    xs: 30,
  },
  container: {
   sm: css`
    width: 320px;
  `
  }
  ...

When you render It will render with size property but also it will try to use size property inside Box and it will create another css and override width 320px with width: 540 and height 540px as well.

Can you remove property when it is used as variant and do not forward it to extended component?

Component selector not working

Im trying to use components as selector with emotion the following error is showing up

Component selectors can only be used in conjunction with babel-plugin-emotion.

I'm using the xstlyed babel preset, it seems to be working since in the compiled code it's fixing the jsx stuffs

  return (0, _emotion.jsx)(StyledComponent, props);

The thing is when I try to use components as selector.
My babel config is

const paths = require('./config/paths')

module.exports = api => {
  api.cache(false)

  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: { esmodules: true },
        },
      ],
      '@babel/preset-react',
      '@xstyled/babel-preset-emotion-css-prop',
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-proposal-object-rest-spread',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-optional-chaining',
      [
        'module-resolver',
        { root: [paths.src, 'node_modules'] },
      ],
    ],
  }
}

Also important to mention that I'm running the code in the storybook 5.2.6

What could be wrong?

Problem with xstyled and gatsby.js

Hi, I liked xstyled so much and wanted to explore it more with a simple Gatsby project, but I have a problem, when I create a global style and include it to layout component all the styles for the styled components are disappearing even sometimes browser stops working.

here is repo with which I'm having this problem - https://github.com/byurhanbeyzat/gatsby-xstyled

Environment

System:
OS: macOS High Sierra 10.13.6
Binaries:
Node: 10.15.0
Yarn: 1.16.0
Browsers:
Chrome: 74.0.3729.169
Safari: 12.1.1
npmPackages:
"@xstyled/styled-components": "^1.2.0",
"babel-plugin-styled-components": "^1.10.0",
"gatsby": "^2.8.6",
"gatsby-plugin-styled-components": "^3.0.7",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.3.1"

units other than "px" ?

💬 Questions and Help

From the example of the home page it is unclean which unit types are used for things like padding, margin, & font-size (which isn't shown in the demo)

While the theme page provides a very shallow explanation to what's shown on the home page (I think it should explicitly write on the home page which units are used) the theme page does not explain how to use other unit types, such as em or rem.

For margins or paddings, should this:

space: [0, 1, 2]

become this?

space: [0, "1em", "1em"]

Thanks!

Alias the property `background` with `bg`

🚀 Feature Proposal

Use bg as an alias of background

Motivation

bg is shorteer than background and easier to transition from styled-system that already implements it

Example

function App() {
    return (
        <Box bg='red'>
        </Box>
    )
}

Pitch

Faster development and less code

Multi-dimensional theming

💬 Questions and Help

Hi!

I was wondering if there is support for multi-dimensional theming, as in having one theme that manages colors, one that manages sizes, one that manages typography, etc. and combining them all under one provider.

border-radius handling is buggy

🐛 Bug Report

Using more than one theme value in the border-radius shorthand property is not supported
Using border-top-right-radius, border---radius does'nt allow theme values or integers without units

To Reproduce

✅ border-radius: 10 compiles to border-radius: 10px
✅ border-radius: md compiles to border-radius: 10px (if theme.radii.md = 10)
✅ border-radius: 5px 10px 2px 0px compiles to border-radius: 5px 10px 2px 0px
☠️ border-radius: md sm compiles to border-radius: md sm
☠️ border-radius: 10 5 compiles to border-radius: 10 5
☠️ border-top-right-radius: md compiles to border-top-right-radius: md
☠️ border-top-right-radius: 10 compiles to border-top-right-radius: 10

Expected behavior

border-radius: md sm should compile to border-radius: 10px 5px
border-radius: 10 5 should compile to border-radius: 10px 5px
border-radius: 0.5 0.8 should compile to border-radius: 50% 80%
border-top-right-radius: md should compile to border-top-right-radius: 10px
border-top-right-radius: 10 should compile to border-top-right-radius: 10px
etc...

Link to repl or repo (highly encouraged)

https://github.com/WTTJ/welcome-ui/blob/master/src/components/RadioTab/styles.js#L56

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: Linux 4.18 Ubuntu 18.04.2 LTS (Bionic Beaver)
 - CPU: (4) x64 Intel(R) Xeon(R) Platinum 8175M CPU @ 2.50GHz
 - Memory: 12.66 GB / 15.48 GB
 - Container: Yes
 - Shell: 3.0.2 - /usr/bin/fish
## Binaries:
 - Node: 10.15.1 - ~/.asdf/installs/nodejs/10.15.1/bin/node
 - Yarn: 1.13.0 - ~/.asdf/installs/nodejs/10.15.1/.npm/bin/yarn
 - npm: 6.4.1 - ~/.asdf/installs/nodejs/10.15.1/bin/npm

How to perform calculations on numeric theme props (e.g. sizes)?

I'd like to do:

height: 3 - 1px; // which becomes 8px - 1px = 7px

where the theme spec:

const theme = {
  sizes: [0, 2, 4, 8]
}

The above doesn't seem to work (CSS rendered is height: 3 - 1px).
What's the best way to achieve this?

I also tried getting the value using th but it doesn't seem to work with arrays:

import { th } from '@xstyled/system'

th.sizes('[3]') // doesn't work. Also tried 3, '3', [3].

I FIGURED IT OUT:
Instead of th.sizes, it is th.size, so this works

import { th } from '@xstyled/system'

const someCss = css`
  height: calc(${th.size(3)} - 1px)
`

Any future plans on adding types?

Hey! I've been a long-time user of styled-components and thought I'd give xstyled a try since I could totally relate and understand the motivation behind it!

But regarding the topic of this issue, would it be possible to import styled-components/styled-system's preexisting type library? And if not, are there future plans to add types?

Anyways, I really appreciate your work on this library!

Responsive styles with Emotion

💬 Questions and Help

Hi!

For context, I'm coming from ThemeUI which is based at the core on Emotion. On ThemeUI I can do like this:

<h2
   css={{
     fontSize: ["2.1rem", "2.4rem"],
  })}
>

I'm trying to use responsive styles with the Emotion's css prop but I can't make it work.
I tried the breakpoints function from @xstyled/system, also tried the following:

<h2
   css={{
     fontSize: { sm: "2.1rem", md: "2.4rem" },
  })}
>

but doesn't seem to work.
Is there a way of doing this or it's simply a missing feature?

Thanks!

Left, right... positioning do not get space from theme

🐛 Bug Report

When i add a left, right... on a box with system positioning, i can't get the space from theme.

To Reproduce

const Box = styled.div`
 ${positioning};
`

<Box position="absolute" left="sm" top="sm" />

Expected behavior

Get the space.sm from theme.

## System:
 - OS: macOS 10.15.3
 - CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
 - Memory: 48.82 MB / 8.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 12.4.0 - ~/.asdf/installs/nodejs/12.4.0/bin/node
 - Yarn: 1.19.1 - ~/.asdf/installs/nodejs/12.4.0/.npm/bin/yarn
 - npm: 6.9.0 - ~/.asdf/installs/nodejs/12.4.0/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @xstyled/styled-components: ^1.15.1 => 1.15.1 
 - @xstyled/system: ^1.15.1 => 1.15.1 
 - styled-components: ^4.0.0 || ^5.0.0 => 5.0.0 

Support `fontStyle` in typography style props

🚀 Feature Proposal

Add support for the fontStyle style prop.

Motivation

I need this to close an issue in the design system I work on.

Example

<Box fontStyle="italic" />

Compatibility with react native

Would be possible to use this project with react-native?. I tried, but I get this error:

scStyled__default.div is not a function

I could see under Box.js it's using a div. (https://github.com/smooth-code/xstyled/blob/master/packages/styled-components/src/Box.js#L4)

Makes sense to create another package to support react-native projects? what do you think? I can try to help

Custom Transformers in CSS?

🐛 Bug Report

Custom Transformers in theme are not respected when styling from the css prop

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/fervent-worker-q4y50

Expected behavior

css prop should use transformers from the theme

Values passed to transform functions aren't resolved from the theme first

🐛 Bug Report

When using a transformer, if the value comes from the theme, it isn't resolved.

To Reproduce

theme.colors.primary = "#1975f8"

styled.div`
    background-color: green.light (this works)
    background-color: primary.light (this doesn't)
`

Expected behavior

The theme color is resolved before getting to the transformer.
Could be an issue with the regex used to get the css value? Maybe it tries to find primary.light in the theme?

Link to repl or repo (highly encouraged)

https://codesandbox.io/embed/vigilant-edison-ofh4t?fontsize=14

Issues without a reproduction link are likely to stall.

## System:
 - OS: macOS 10.14.5
 - CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
 - Memory: 670.15 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 12.6.0 - /usr/local/bin/node
 - Yarn: 1.12.3 - /usr/local/bin/yarn
 - npm: 6.10.3 - ~/Desktop/ui-trial/node_modules/.bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @xstyled/styled-components: ^1.8.4 => 1.8.4 
 - @xstyled/system: ^1.8.4 => 1.8.4 
 - styled-components: ^4.3.2 => 4.3.2 

Link being passed style props

💬 Questions and Help

I am trying to figure out if I am doing something wrong when trying to create a styled version the react-router-dom Link component. I simply passed it into the styled method like styled(Link) to create an extensible Link but I am currently getting a few errors in the console like:
React does not recognize the backgroundColor prop on a DOM element.

The backgroundcolor prop lives directly on the anchor tag and I am trying to figure out how to get around this.

Variant props remaining on elements

🐛 Bug Report

I am trying to utilize variants for things like buttons and I am also trying to add a custom prop like buttonType in place of the default variant. I am still seeing them being passed directly to the html markup no matter how I construct the component. I have tried using the createSystemComponent method to avoid passing the props through but I still see the variant props passed directly to the html.

To Reproduce

Steps to reproduce the behavior:
I put together a code sandbox that illustrates this but essentially any project utilizing variants should see the html with a variant attribute or with whatever you custom attribute was still on the element.

Expected behavior

I would expect this prop to not be passed to the html element

Link to repl or repo (highly encouraged)

https://codesandbox.io/embed/affectionate-khayyam-zv2xl

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS Mojave 10.14.6
 - CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
 - Memory: 1.11 GB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 12.8.1 - ~/.nvm/versions/node/v12.8.1/bin/node
 - Yarn: 1.17.3 - ~/.nvm/versions/node/v12.8.1/bin/yarn
 - npm: 6.10.2 - ~/.nvm/versions/node/v12.8.1/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman

Can't get it to work in create react app in Codesandbox

🐛 Bug Report

I can't get it to work in code sandbox:
code

Expected behavior

It should not output a type error.

Link to repl or repo (highly encouraged)

code

Error i get

TypeError
Cannot set property css of #<Object> which has only a getter

Module not found with CRA/TypeScript

Hi :)

I cannot use this library with a basic TypeScript CRA.

Steps

1. Create a new TS React app with npx create-react-app my-app --typescript
2. Add dependency npm i @xstyled/styled-components
3. Create a simple component:

import styled from "@xstyled/styled-components"

const Toggle = styled.div`
  border: 1 violet;
  width: 16;
  height: 16;
`
export default Toggle

4. Launch with npm start

Result

Failed compilation:

Failed to compile.

./node_modules/@xstyled/styled-components/dist/xstyled.es.js
Module not found: Can't resolve 'styled-components' in '/home/jeahel/dev/devtracker/node_modules/@xstyled/styled-components/dist'

Replace confusing terms for breakpoints functions in documentation

🚀 Feature Proposal

Replace confusing terms for breakpoints functions in documentation

Motivation

Actually, description for up and down utils is switched

Example

• up => Lets you apply style up to from a breakpoint (or down to a breakpoint)
• down => Lets you apply style down to up to a breakpoint

Raw colors not being updated

🐛 Bug Report

I'm using the color mode and some utilities from polished, for example rgba. This helper needs a raw color as an argument, not a custom CSS property. When the color mode is active the colors are replaced with CSS custom properties.

I found the __rawColors object in the theme but when I change the mode this object always has the original colors.

To Reproduce

Activate the color mode and try to access to raw colors through the props.theme.__rawColors and change the color mode.

Expected behavior

Maybe we need a way to access current raw colors, can be a new object in the theme, also can be a new param in the th getter.

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/react-example-k7fbm

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

Paste the results here:

## System:
 - OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
 - CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
 - Memory: 7.66 GB / 15.53 GB
 - Container: Yes
 - Shell: 5.4.2 - /usr/bin/zsh
## Binaries:
 - Node: 12.14.1 - /usr/local/bin/node
 - Yarn: 1.21.1 - /usr/bin/yarn
 - npm: 6.13.7 - /usr/local/bin/npm
## npmPackages:
 - @xstyled/styled-components: ^1.16.0 => 1.16.0 
 - @xstyled/system: ^1.16.0 => 1.16.0 
 - styled-components: ^5.0.1 => 5.0.1 

Prop types?

How will you handle prop types?

I'm using docz to generate a documentation for my component library and I'd like to know if there's a way to expose/list the props that can be used for the Box component.

Overflow multi syntax not supported

💬 Questions and Help

This is a question in regards to the functionality around the overflow property.

I have been using xstyled on a project that needs to support Chrome, Firefox, Edge, Safari, and their mobile equivalents. I recently had a very odd style regression when testing Safari and was able to debug it down to the fact the the overflow property was not being displayed correctly. I Chrome and Firefox were fine but in Edge and Safari it just disappeared. When I went digging for answers I found that the multiple overflow: x y syntax is still not supported in all browsers.

My question is should this project support the splitting of that property into overflow-x and overflow-y by default so that it supports all browsers?

CSS prop for Styled Components

What about CSS prop for Styled Components? There is Babel preset for the Emption but there is nothing I could find for the Styled Components to support it.

{th} vs useTheme() usecases

Hi again, it's me, the person who is addicted to xStyled and asks many questions.

I see this example here:

function Example() {
  const theme = useTheme()
  return <div style={{ color: theme.colors.primary }}>Primary</div>
}

and this example here:

import { th } from '@xstyled/system'
const Container = styled.div`
  color: ${th('colors.primary')}; /* Read the primary color from the theme */
`

My question is: what use-cases does useTheme() that th doesn't?

Why is the theme in a hook? Themes cannot and should not change (while the app is running) so they don't have a state, so why is it in a hook-format?

You already have them, only different is that you also have to initialize the custom hook in order to use it, where on the other hand you can use th directly after importing, and both point to the exact same "theme" (as I understand it)

I also understand that one would want to use any of those only if the whole Application is not wrapper with a ThemeProvider that passes the theme prop to all components...

Thanks!