Early exploration about styils HOT 3 CLOSED

1. The React server component may not be able to reply to you for the time being. I don’t know much about it at the moment. The current result does not support it. need to try
2. createSystem is the solution I don't want to write type... roughly where themes and utilities are created

• Different styles are created only once and depend on theme patterns rather than CSS rule keys. In theory, there is only a certain performance overhead during initialization, so after the first creation is completed, subsequent style changes (initializing past theme changes) will only change the className or style, and will not parse CSS rules again
• not depend on react lifecycle creation rules. theoretically the theme does not use var, It's okay, it is safe to use ':xxx-child'
• don't need to write rules like (...) (size === 'xxx' && {})) and rules like shouldForwardProp (3-2)
• Passing values ​​through props, I think this is a trap written. Multiple choices can confuse people. Not everyone understands the logic behind whether to use style or prop. Using prop directly will generate a large number of roughly the same CSS rules. Passing a value is a state change that can be resolved with variants. Values ​​that need to change frequently should use vars or style, clearer division of duties

4. yes, I will try, it should be a fun challenge
5. sx can be achieved by exporting 'styleSheet' and 'parseRules'

// 3-2
const Button = styled(
  'button',
  (theme) => ({
    width: '$width',
    padding: theme.spacing(1)
  }),
  {
    size: {
      small: {...},
      large: {...}
    },
    color: {
      primary: {...},
      secondary: {...},
      success: {...},
      error: {...},
      info: {...},
      warning: {...}
    }
  }
)

<Button variants={{ size: 'large', color: 'primary' }} vars={{ width }} />

from styils.

@oliviertassinari next13 server-component demo

server components, as if there is not much difference between server rendering, except that cannot use context, to use themes, need to implement it in a different way..

from styils.

if there is not much difference between server rendering, except that cannot use context, to use themes, need to implement it in a different way.

Interesting

from styils.