Any future plans on adding types?

[ryee-dev]

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!

[gregberge]

Hello @ryee-dev, to be clear, I am not a TypeScript user so I can't maintain types. Adding types in the core of the library is too risky if core maintainers are not TypeScript friendly. That said, types of xstyled will have to be in https://github.com/DefinitelyTyped/DefinitelyTyped. At least at start.

[JaffParker]

Has anyone tried whether it's compatible with @typed/styled-components? Something tells me it should be, but I don't have time to try right now...

[gregberge]

Yes it should be compatible with @types/styled-components you will only miss Box and styled.xxxBox. If you can extends @types/styled-components, this is the good solution.

[timolins]

I wrote this xstyled.d.ts file for one of my projects, which applies all styled-components types to xstyled. Worked fine for me until this point.

The only thing is that Box types are missing, just like @neoziro mentioned.

declare module '@xstyled/styled-components' {
	import styled from 'styled-components'
	export * from 'styled-components'
	export default styled
}

Also did the same for @xstyled/system with the types from styled-system. Looking good so far for my basic use cases, but I'm not sure if they are fully compatible with each other.

declare module '@xstyled/system' {
	export * from 'styled-system'
}

(Related #2, #31)

[good-idea]

Hi all, I think I've about cracked the Box egg here. This is working well for me so far:

xstyled.d.ts

Edit: see an updated version (and discuss issues/bugs) in this gist

declare module '@xstyled/styled-components' {
  import styled, { StyledComponent, DefaultTheme } from 'styled-components'
  export * from 'styled-components'

  interface Breakpoints {
    xs: any
    sm: any
    md: any
    lg: any
    xl: any
  }

  type BreakpointObject<ArgType> = {
    [Key in keyof Breakpoints]?: ArgType
  }

  type WithBreakpointArgs<Props> = {
    [Key in keyof Props]?: Props[Key] | BreakpointObject<Props[Key]>
  }

  type FlexArgs =
    | 'flex-start'
    | 'center'
    | 'flex-end'
    | 'space-around'
    | 'space-between'

  interface BoxPropsBase {
    /* Display */
    display:
      | 'block'
      | 'inline-block'
      | 'inline'
      | 'flex'
      | 'grid'
      | 'none'
      | 'inherit'
      | 'initial'
    /* Color */
    color: string
    backgroundColor: string
    /* Margins */
    margin: number
    m: number
    marginTop: number
    mt: number
    marginRight: number
    mr: number
    marginBottom: number
    mb: number
    marginLeft: number
    ml: number
    mx: number
    my: number
    /* Padding */
    padding: number
    p: number
    paddingTop: number
    pt: number
    paddingRight: number
    pr: number
    paddingBottom: number
    pb: number
    paddingLeft: number
    pl: number
    px: number
    py: number
    /* Space & Layout */
    space: number
    width: number | string
    /* Grid */
    row: boolean
    col: boolean | number
    /* Flex */
    justifyContent: FlexArgs
    alignItems: FlexArgs
  }

  /* adds support for { xs: arg } and makes all props optional */
  export type BoxProps = WithBreakpointArgs<BoxPropsBase>

  export const Box: StyledComponent<
    'div',
    DefaultTheme,
    WithBreakpointArgs<BoxProps>
  >
  export default styled
}

This supports using the <Box> component with all of these props as the declared type (i.e. width: number), as well as with the media query syntax. So, these will all work

<Box margin={2}>:)</Box>
<Box margin={{ xs: 1, xl: 3 }}>:)</Box>

You can also create your own styled(Box) and the props will still work:

const Wrapper = styled(Box)`
  // ...
`

<Wrapper mt={2} />

To Do:

• Other props that can be passed on to <Box>, such as borders, are missing.
  • @neoziro is there a complete list of props that Box will accept?
• xxBox components are not supported. These can all be added manually, like:

  export const aBox: StyledComponent<
      'a',
      DefaultTheme,
      WithBreakpointArgs<BoxProps>
   >

  But I don't have the time (or need) for this. It might also be possible to iterate over all available tag names, but I'm not sure if you can create concatenated object names like this, for instance, a -> aBox: StyledComponent<...>
• It would be nice to automatically read what a user sets their breakpoint keys to in their own styled.d.ts, and use that for the Breakpoint keys, falling back to the styled-system defaults. In my project, i'll just be using mobile, tablet, desktop.

Anyone out there want to goof around with this and report back if things are working or not?

@neoziro , OK if we use this issue to track this stuff until it's to a point where we can add it to the DefinitelyTyped repository?

[gregberge]

@neoziro is there a complete list of props that Box will accept?

Yes programatically you have access to the system props, or just https://www.smooth-code.com/open-source/smooth-ui/docs/box/#box-2

@neoziro , OK if we use this issue to track this stuff until it's to a point where we can add it to the DefinitelyTyped repository?

Yes of course, feel free to use it to track the work!

[good-idea]

Hi all, I've added updated definitions in this gist:

https://gist.github.com/good-idea/96576e16c650c3730c53844d266d7149

This includes all possible props for Box, as well as definitions for all xxBox, i.e. styled.aBox, styled.articleBox. (these are untested)

Feel free to try them in your project, and add any comments/bugs in a comment in the gist. When it's been tested a little bit, I'll submit it to DefinitelyTyped.

[gregberge]

I am not a TypeScript user, it looks good but I can't review it. I don't add it to the repository because it wouldn't be maintained.

[good-idea]

@neoziro yup, no problem! I'm going to use them in my projects for a bit - maybe gather some feedback from any others who might be using them - and when they're ready to go I'll publish them in a separate package.

[stevejay]

@good-idea I've got a very rough draft of typings for xstyled/system in a gist.

[good-idea]

@stevejay these look great. I'm not familiar enough with xstyled/system and how it overlaps with this package - is there anything I can do to tweak mine to better fit? (I also didn't know about ccstype, i'll make a note to update my defs to use that)

[stevejay]

@good-idea There's a description comparing the two packages here. Basically xstyled/system is the engine and xstyled/styled-components is a wrapper for styled-components that integrates that engine. AFAIK there's no tweaking necessary for your typings because there's no overlap between the two packages.

[stevejay]

@good-idea FYI I got the xstyled/system typings added to DefinitelyTyped.

[good-idea]

Cool! I'll tidy up my types and submit those as well.

[roman-16]

@good-idea Is there any progress on this?

[good-idea]

@wa4-fearless-otter sorry, i never got around to this --- i might not be able to for a little while. In the meantime, the gist i linked to above covers most cases

[rorybyrne]

I had a go at some types for @xstyled/emotion: link

I basically took @good-idea's approach and replaced the StyledComponent generic type signature with the emotion signature: StyledComponent<InnerProps, StyleProps, Theme>.

The xxBox types are mapped directly from the original, so they may not all actually exist in the lib (?). I'm relatively new to xStyled/TS in general and I haven't used these types much yet, so please add a comment to the gist if there's anything I can improve.

Note: I added optional typing for your custom theme, near the top of the gist

Edit
I removed the xxBox components

Edit 2
I re-added the xxBox components as CreateStyledComponentBase types, and extended the styled name with an intersection: styled & { ...xxBoxTypes }.

Reasoning: I changed the types of xxBox to CreateStyledComponentBase to get the styled.xxBox' ... ' TemplateString notation working, and I extended the styled type in order to make xxBox properties available on the styled object (I couldn't access styled.xxBox with the other types).

According to this TypeScript issue, we can't easily merge the declaration from @emotion/styled into our @custom/xstyled-emotion types because styled is exported as default, but this comment suggested an intersection type so I tried it out and it seems to work.

...
import styled_, { StyledComponent } from '@emotion/styled'
...
export const Box: StyledComponent<
    React.ComponentPropsWithRef<'div'>,
    WithBreakpointArgs<BoxProps>,
    Theme
>
...
const styled: typeof styled_ & {
    Box: typeof Box,
    aBox: CreateStyledComponentBase<
      React.ComponentPropsWithRef<'a'>,
      WithBreakpointArgs<BoxProps>,
      Theme
    >,
    ...
}

I can now use the xxBox components with template string notation, which I couldn't do before:

const Text = styled.pBox`
  font-size: 1
`

I'd love some input on whether CreateStyledComponentBase is the correct type for the xxBox components, because I'm not sure. Box must be a StyledComponent type in order to have withComponent(), but that type cannot be used with the styled.Box' ... ' template-string notation. I'm stumped, but I think this is close to being correct - maybe someone else who knows more can chime in?