💬 Questions and Help

I wonder is there any way to do responsive scale in theme object, like how styled-system does https://styled-system.com/theme-specification#scale-objects.

{
...
  variants: {
    heading: {
      fontSize: { sx: '14px', md: '16px', lg: '18px' }, // does't work with xstyled
      // fontSize: ['14px', '16px', '18px'], with styled-system
    },
  }

Thanks!

I have the same error under ViteJS/React install : http://host.electroheadfx.fr/efxbox/laurent/Capturedecran2021-06-19a18.34.32.png I have not any issue with styled-components, chakra-ui (so styled-system) packages with VITE

I have the same error under ViteJS/React install : http://host.electroheadfx.fr/efxbox/laurent/Capturedecran2021-06-19a18.34.32.png I have not any issue with styled-components, chakra-ui (so styled-system) packages with VITE

Codecov Report

Merging #282 (fbe5a1c) into main (9098b83) will increase coverage by 0.01%. The diff coverage is n/a.

@@            Coverage Diff             @@
##             main     #282      +/-   ##
==========================================
+ Coverage   92.73%   92.74%   +0.01%     
==========================================
  Files          60       60              
  Lines        1252     1255       +3     
  Branches      244      244              
==========================================
+ Hits         1161     1164       +3     
  Misses         91       91              

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9098b83...fbe5a1c. Read the comment docs.

Fix #277

💥 Regression Report

Because _ breakpoint value is no longer present in the defaultTheme breakpoints function now returns null { ... } media query for objects with _ key. _ key was removed in fe74ec9cbb6ca6876737f0ffc965534193c8bb12.

Fix should be pretty straightforward, either _ breakpoint should be added back or getBreakpointMin should account for this. https://github.com/gregberge/xstyled/blob/4865316ed1d0881e3833c0c6aad139040927e08c/packages/system/src/media.ts#L18

Last working version

Worked up to version: 2.5.0

Stopped working in version: 3.0.0

To Reproduce

Steps to reproduce the behavior:

breakpoints({ _: { width: 10 } })({ theme: defaultTheme })

Expected behavior

Expected:

[{ width: 10 }]

Current:

["null {", { width: 10 }, "}"]

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/magical-framework-6qjbh?file=/src/App.js

Fix #274

💥 Regression Report

After upgrading from 2.5.0 to 3.0.1, all of my unitless elements are no longer being converted to rem, but rather get rendered as their unitless value, which leads to a broken layout.

Last working version

Worked up to version: 2.5.0

Stopped working in version: 3.0.1

To Reproduce

Add rpxTransformers to your theme object.

import { defaultTheme, DefaultTheme, rpxTransformers } from '@xstyled/styled-components'
// import { rpxTransformers } from '@xstyled/system'

const bhsTheme: DefaultTheme = {
  ...defaultTheme,
    transformers: {
      ...rpxTransformers,
    },
    sizes: {
      ...defaultTheme.sizes,
      cardWidth: 320 - 32,
      }
  }

note - rpxTransformers is now imported from @xstyled/styled-components instead of @xstyled/system as before. Didn't see this documented in the migration guide, but this page indicate this change.
The same issue persists importing this either way.

Create a component using this feature, example.

const ToolsArea = styled.divBox`
  display: grid;
  grid-template-columns: 1fr;
  gap: 8;
  @media (min-width: md) {
    gap: 120;
    height: 5000;
    grid-template-columns: repeat(
      auto-fit,
      minmax(${th.size('cardWidth')}, 1fr)
    );
  }
`

Expected behavior

gap: 8 maps to the default theme size key, and works as expected (2 rem). gap: 120 doesn't map to a theme value, so I expect it to be converted to the rem equivalent, but it comes out as gap: 120, which is an invalid value.

grid-template-columns uses a size from my theme, but the value does not get converted to it's rem equivalent (7.5rem), but instead comes out as... grid-template-columns: repeat( auto-fit,minmax(288,1fr) );

3. Put in height for the example, which also doesn't convert. height: 5000; vs the expected height: 312.5rem;

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

Paste the results here:

## System:
 - OS: macOS 11.2.3
 - CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
 - Memory: 521.88 MB / 8.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
 - Yarn: 1.22.5 - ~/.yarn/bin/yarn
 - npm: 6.14.6 - ~/.nvm/versions/node/v12.16.1/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @xstyled/styled-components: ^3.0.1 => 3.0.1 
 - styled-components: ^5.3.0 => 5.3.0

🐛 Bug Report

Since the original issue got closed and I'm unable to reopen it, I'm creating a new one. There is a problem with the type definition of a color prop because it combines the type of a color attribute prop and color utility prop. This means that only strings are valid inputs.

I'd gladly help to resolve this issue :)

To Reproduce

Use color prop with an object.

<x.a
  href="#"
  color={{
    _: 'indigo-500',
    hover: 'indigo-600',
    visited: { hover: 'indigo-900' },
  }}
>
  Link
</x.a>

Expected behavior

The color prop should accept objects with responsive/state values as described in docs. https://xstyled.dev/docs/hover-focus-other-states/

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/xstyled-color-type-error-forked-v3kz2?file=/src/App.tsx

• fix(emotion): fix color prop
• refactor: rename type

Codecov Report

Merging #281 (cf86fb9) into main (9098b83) will increase coverage by 0.01%. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main     #281      +/-   ##
==========================================
+ Coverage   92.73%   92.74%   +0.01%     
==========================================
  Files          60       60              
  Lines        1252     1255       +3     
  Branches      244      244              
==========================================
+ Hits         1161     1164       +3     
  Misses         91       91              

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 9098b83...cf86fb9. Read the comment docs.