stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.75k stars 253 forks source link

Fix `as` prop is not forwarded to target Component #988

Closed lesha1201 closed 2 years ago

lesha1201 commented 2 years ago

Fixes: https://github.com/modulz/stitches/issues/979

Previous behaviour:

const StyledButton = styled('button', {
  color: 'red',
})

const Button = (props) => {
  return React.createElement(StyledButton, props)
}

const CustomStyledButton = styled(Button, {
  backgroundColor: 'blue',
})

// Renders: <Button {...} />
<CustomStyledButton />
// Renders: <a {...} />
<CustomStyledButton as="a" />

New behaviour:

const StyledButton = styled('button', {
  color: 'red',
})

const Button = (props) => {
  return React.createElement(StyledButton, props)
}

const CustomStyledButton = styled(Button, {
  backgroundColor: 'blue',
})

// Renders: <Button {...} />
<CustomStyledButton />
// Renders: <Button as="a" {...} />
<CustomStyledButton as="a" />
codesandbox-ci[bot] commented 2 years ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0493cbeac5c8271492a7277352d7594fc271edec:

Sandbox Source
Stitches CI: CRA Configuration
Stitches CI: Next.js Configuration
EfstathiadisD commented 2 years ago

Do we have any plans to merge this? In general there are a few 0PRs worth merging. Anyone from the 🧵 team?

hadihallak commented 2 years ago

Hey everyone!

This change is no longer needed after the changes that we added in https://github.com/stitchesjs/stitches/pull/1103 which allow you to control how Stitches should handle its props like as,css or any Stitches defined variant.

Once this is released you should be able to manually override whether Stitches should handle the as prop or not:

const { styled } = createStitches()

const StyledButton = styled('button', {
  color: 'red',
})

const Button = (props) => {
  return React.createElement(StyledButton, props)
}

const forwardAsPropConfig = {
  shouldForwardStitchesProp: (prop) => {
    if (prop === 'as') {
      return true
    }
  },
}

const StitchesComponent = styled.withConfig(forwardAsProp)(Button, {})

The changes are merged with canary and will be released as a beta soon.

bmsuseluda commented 1 year ago

Hello, do you know when this change will be released in a stable version? Thanks