xstyled v3

[codecov[bot]]

Codecov Report

Merging #229 (df3dcc4) into main (c3893f1) will increase coverage by 0.75%. The diff coverage is 97.17%.

@@            Coverage Diff             @@
##             main     #229      +/-   ##
==========================================
+ Coverage   91.97%   92.73%   +0.75%     
==========================================
  Files          58       60       +2     
  Lines        1059     1252     +193     
  Branches      192      244      +52     
==========================================
+ Hits          974     1161     +187     
- Misses         84       91       +7     
+ Partials        1        0       -1     

Impacted Files	Coverage Δ
packages/core/src/customProperties.ts	97.61% <ø> (-2.39%)	:arrow_down:
packages/styled-components/src/preflight.ts	50.00% <50.00%> (-50.00%)	:arrow_down:
packages/emotion/src/breakpoints.ts	66.66% <66.66%> (+66.66%)	:arrow_up:
packages/styled-components/src/breakpoints.ts	50.00% <80.00%> (+50.00%)	:arrow_up:
packages/system/src/styles/units.ts	78.57% <85.71%> (-3.25%)	:arrow_down:
packages/system/src/styles/backgrounds.ts	85.00% <88.88%> (-4.48%)	:arrow_down:
packages/system/src/styles/space.ts	91.66% <91.30%> (ø)
packages/system/src/styles/borders.ts	92.59% <91.83%> (+0.59%)	:arrow_up:
packages/system/src/cache.ts	94.73% <94.73%> (ø)
packages/system/src/unit.ts	97.29% <95.45%> (-2.71%)	:arrow_down:
... and 67 more

---

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 c3893f1...df3dcc4. Read the comment docs.

[agriffis]

Quick thought about v3

Right now we can extend x in a project, but styled remains as it was, pointed to the original x. Working around this involves copying the code from the bottom of packages/styled-components/src/styled.ts to rebuild styled against the new x.

Would it make sense to export a creator which would return an object of functions? Similar to createCss in stitches

For example:

// my-styled-components.js
import * as xstyled from '@xstyled/styled-components'

// my additional generators
const foo = xstyled.style(...)
const bar = xstyled.style(...)

const {css, styled, system, x} = xstyled.create({
  generators: [xstyled.system, foo, bar],
  // could optionally also override tags
})

export default styled
export {css, system, x}

In fact this would just be a feature, not a breaking change, so it doesn't need to hold up v3. But it would be a significant feature.

[gregberge]

@agriffis good idea, you mean for styled.*Box isn't it? Because for CSS magic prop mapping I don't see a real usecase.

[agriffis]

@agriffis good idea, you mean for styled.*Box isn't it? Because for CSS magic prop mapping I don't see a real usecase.

Yes, also system, but more generally you can supply a config and get the full family of customized functions in return.

For example (and please bear with me, I'm just making this up) there might be other configuration items: includeBoxTags: bool and allTagsAreSystem: bool because I might prefer styled.p with system capabitilies, instead of needing to use styled.pBox. (I can always used styled('p') to get a non-system component if I really need it.)