I'd like to add a box-shadow property whilst keeping the color mapped to my tokens, and noticed that currently it doesn't do that by default (I can understand why)

I'm curious how one would go about doing that, given that there's no long-hand box shadow color property.

As a comparison, Styled System's css function also accepts a callback function as a value, providing the theme:

css({
  boxShadow: theme => `0 0 0 2px ${theme.colors.red500}`
})

Repro: https://codesandbox.io/s/stiches-boxshadow-color-mapping-to-token-7lbdm?file=/src/App.tsx

Hello, there is a fail actually, the system ui doc says:

but in stitches the padding are taken from sizes and not space

thanks

Thinking of how we can eventually support people abstracting styles without getting type errors, eg:

const sharedCss = {
  outline: 0,
}

const Component = styled.div({
  ...sharedCss,
})

Currently, TS complains because in sharedCss the outline property value is 0 as a Number. And Stitches expects outline to be "0" as a String.

Technically, they're both valid, and right now it's unknown why the error appears.

Im curious about whats the best DX we can apply here?

Should we relax the CSS Types to essentially allow string or numbers when it makes sense?

Update:
This also happens with certain properties like appearance: 'none',. If its added in the shared css object, when you spread it complains. But if you add it directly to the CSS definition, it's fine.. haha wut

Sandbox demo https://codesandbox.io/s/gh-stitches-spread-shared-css-oject-3ss8p?file=/src/App.tsx

We should be able to define a low level React component, which can take a use prop.
We can then create a Stitches component, and pass it to the low level component via the use prop.
Then, we should be able to wrap that into a reusable component. The return of this is an actual Stitches component.
Finally, we should be consume this wrapped component, and pass an as prop to it, since Stitches components add that for us.

It's a bit complex to understand, but right now I think the issue is that the components from Stitches are not padding the as prop correctly.

Code Sandbox with repro

This is a demo of it working, with a local version of Stitches: https://codesandbox.io/s/gh-stitches-prototype-useas-prop-5c1yh?file=/src/App.jsx
Note that this was before Stitches supports styled(Component)

Hello,

First of all, I just wanna say that I really liked the library, and it’s functional approach.

I don’t know if is in the backlog, or the author have any intention, but it’d be great if had react-native support.

Taken from example in the readme, here I'm adding a marginX util, but I'm required to pass in a second argument (pseudo)

Repro: https://codesandbox.io/s/stiches-utils-require-second-argument-iybfq?file=/src/App.tsx

Is this behaving as expected?

One of the things that I found really interesting about classy-ui was the ability to define group decorators. Are there any plans to implement a similar API for stitches?

My use case is that I want to change the visibility of an element based upon if a parent element is hovered or not.

This is mentionned in Configure section of stitches/tailwind:
import {createCss} from @stiches/styled instead of @stitches/css, right ?

Capture:

Does a changelog for stitches exist? I just saw that there was a major version bump but don't know what changed other than comparing commits v1.6.1...v2.0.0

The same as Styled Components or Emotion, I'd like to:

const BaseButton  = styled.button({})
const MyButton = styled(BaseButon, {})

and

function BaseButton(props) {
  return <button {...props} />
}

const MyButton = styled(BaseButton, {})

Not sure about the API, whether it would be an arg or the styled function returns another function (like SC and Emotion)

I think that'd improve the dev experience when working locally. Right now the rules are inserted in a way that arent visible within dev tools.

Hi!

I ran into an issue when I tried to use stitches with Next.js. Here are the steps to reproduce:

1. install the stitches-css starter from the Next.js examples
2. try to load an external stylesheet by adding the following code to _document.js:

  import Document, { Html, Head, Main, NextScript } from "next/document";
  ...

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

3. get the following error (in Chrome):

SecurityError: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule
createCss
./node_modules/@stitches/css/es/index.js:183

It looks like something like this is the problem - maybe the insertRule order is off when there's already existing stylesheets?

Hi,

I'm tried to upgrade NextJS from 9.3.x to 9.4 and i see the error bellow:

I use Stitches CSS+TAILWIND+STYLED in my projet (with typescript) .

Thanks by advance :-).

For now, i stay with NextJS 9.3.x

Hey there,

I was checking the code and it uses Proxy which doesn't have IE11 support. I initially thought that maybe I could use a Proxy polyfill. However, this kind of polyfills require to know all properties at the time the Proxy is created which isn't possible here.

Would you consider also an alternative (additional) API? Something more close to CSS-in-JS syntax?
For example:

const { createCss } = require("@stitches/css");

const css = createCss({
  screens: {
    desktop: (rule) => `@media (min-width: 700px) { ${rule} }`,
  },
});

const button = css.compose(
  css.color("gray"),
  css.padding("1rem"),
  css.color("black", ":hover"),
  css.desktop.backgroundColor("tomato", ":hover"),
  css.borderColor("red"),
  css.desktop.borderColor("black")
);

const alternative = {
  color: "gray",
  padding: "1rem",
  "&:hover": {
    color: "black",
    backgroundColor: { desktop: "tomato" },
  },
  borderColor: { default: "red", desktop: "black" },
};

Here button and alternative are equivalent. It's closer to CSS and it doesn't really require a Proxy to know which are utility or css props, for instance. It's also fairly easy to type in TS.

A working example of the above:

const toStitchesCSS = (obj, pseudo) => {
  const call = (cssIns, prop, value) => {
    return cssIns[prop](value, pseudo);
  };
  const keys = Object.keys(obj);
  const comp = [];

  for (const key of keys) {
    const value = obj[key];
    if (typeof value !== "object") comp.push(call(css, key, value));
    else if (key.startsWith("&:"))
      comp.push(toStitchesCSS(value, key.replace(/^&/, "")));
    else
      comp.push(
        ...Object.keys(value).map((screen) => {
          if (screen === "default") return call(css, key, value[screen]);
          return call(css[screen], key, value[screen]);
        })
      );
  }

  return css.compose.apply(css, comp);
};

Then you can:

const sortAsc = classes => classes.split(' ').sort().join(' ') // Just to compare
const buttonClasses = sortAsc(button.toString())
const alternativeClasses = sortAsc(toStitchesCSS(alternative).toString())

console.log({
  button: buttonClasses,
  alternative: alternativeClasses,
  isEqual: alternativeClasses === buttonClasses // true
});

Of course, this is an abstraction on top of the current implementation that uses Proxy but it's just to demonstrate that it could also work with an alternative (additional) API closer to CSS-in-JS object syntax (and it'd work in IE11 🙈)

With tailwind, css.flex(1) doesn't correctly apply the css property flex: 1, 1, 0%, it tries to apply flex-direction instead. Here's a sandbox repro.

I fixed it locally by changing the flex util to this:

export var flex = createUtility(function (css, value, pseudo) {
    return value === "1, 1, 0%"
        ? css.compose(css.flexGrow(1, pseudo), css.flexShrink(1, pseudo), css.flexBasis('0%', pseudo))
        : css.flexDirection(value, pseudo);
}, {
    theme: "flex",
    emptyValue: function (css, pseudo) { return css.display("flex", pseudo); },
    values: {
        col: "column",
        "col-reverse": "column-reverse",
    },
});

...but I feel like there's probably a more proper way to go about it. A separate flex1 helper might be a good idea, too

the onKeyDown event when using an input

the onKeyDown event when using as="input"

Could be an issue with react-polymorphic-box
/cc @kripod

Probably related to #43

It seems that the styles are wiped out when Nextjs does a hot module reload.

The issue can be reproduced on the same repos as #38 I imagine the issue itself is probably related

Hello, I created a react typescript project using CRA to test out this lib, but i'm getting this error when i use @stitches/tailwind

TypeError: Cannot set property overflow of #<Object> which has only a getter

addDefaultUtils
src/utils.ts:107

  104 | 
  105 | export const addDefaultUtils = (config: IConfig) => {
  106 |   config.utils = config.utils || {};
> 107 |   config.utils.overflow = (css) => (
  108 |     value: StandardProperties["overflow"],
  109 |     pseudo?: string
  110 |   ) =>

this is my code

import React from 'react';
import { createCss } from '@stitches/css';
import { tailwind } from '@stitches/tailwind';

const css = createCss(tailwind);

function App() {
  return (
    <div className="App">
      <h1 className={css.compose(css.mt(10))}>Hello World</h1>
    </div>
  );
}

export default App;

if i use only the css from @stitches/css it works fine, but with the tailwind version, i keep getting this error

Just encounter that, we just can put -px and nothing else here so its a typing or api issue?

I've noticed that the following declaration:

border: 0

yield some unexpected results. (@christianalfoni I think you came across that in yesterday's stream too)

I kinda understand why this may happen, but think it's an unintuitive DX.

Changing from 0 to '0' (String) partially solves the issue, but some of the border long-hands property are still being generated as undefined:

Hello! I've been checking out the "real time theming" demo in Codesandbox and after inspecting the elements I've realised we're adding invalid attributes to the elements:

See the usage and styled attributes. We should filter those somehow.

Not sure how difficult it would be but I'd love to tackle this issue :)

The Problem

When I build my gatsby project, the exact same code that during development used to work now fails unexpectedly.

Expected output

The build succeeds.

Actual output

failed Building static HTML for pages - 1.526s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  172 |             }
  173 |             else if (config.utilityFirst && !isCallingUtil && !isOverriding) {
> 174 |                 throw new Error("@stitches/css - The property \"" + String(prop) + "\" is not available");
      | ^
  175 |             }
  176 |             else if (specificityProps[String(prop)]) {
  177 |                 return specificityProps[String(prop)](cssInstance);


  WebpackError: @stitches/css - The property "text" is not available
  
  - index.js:174 Object.get
    node_modules/@stitches/css/es/index.js:174:1
  
  - Title.js:4 
    src/components/styled/Title.js:4:9
  
  - index.js:35 
    node_modules/@stitches/styled/es/index.js:35:55

What I've tried so far

I tried to swap the package--@stitches/css rather than @stitches/tailwind--and that works wonderfully. However, css is not the same as tailwind.

// src/styles/css.js
import { createStyled } from "@stitches/styled"
// import { createConfig } from "@stitches/tailwind" // fails
import { createConfig } from "@stitches/css" // works as expected

If you go down this path, remember to update src/components/styled/Title to use a non-tailwind token.

I also tried to upgrade node to version 13--I should've done that anyway--but no luck with that.

How to reproduce

Requirements

• docker
• docker-compose
• npm
• node
• git
• nvm

Steps

1. I've set up a branch of my repo to replicate the bug. Simply
   !!! I've updated the branch. The issue is not reproducible anymore. See following comment !!!

git clone https://github.com/fedetibaldo/fedetibaldo.com.git bug-tailwind-build
cd bug-tailwind-build
git checkout bug/tailwind-build
nvm use
npm i -g gatsby
npm i

2. Then, spin up the Ghost instance with Docker.

docker-compose up -d

3. Navigate to http://localhost:3001/ghost, and fill out the steps with random data.

4. Create a new internal tag, with name #en

5. Assign the newly created tag to a random post

6. Create a custom integration

7. Copy the Content API Key into your .ghost.json

8. In the end, run

gatsby build

Hey

awesome new library! I like the direction this is going with integrating with tailwind. I wonder whether it also supports tailwind UI. THe question could be more general like supporting tailwind plugins both those that add utilities and those who add components (i.e https://github.com/tailwindcss/custom-forms )

excited to test this out!

Demo here

Demo: https://codesandbox.io/s/stitches-passing-variant-as-number-doesnt-work-f1bnm

A variant with this shape:

variantName: {
  0: {},
  1: {},
  2: {}
}

gets types as red?: 0 | 1 | 2. But passing them down as numbers doesn't seem to work. Passing them as string does, but TS complains.

Issue can be reproduced here or here

The type support seems great for the system-ui properties that we are configuring ourselves. Is there a way to achieve the same thing for display, alignItems and all the other css properties?

Hey, are there some plans to support data-selectors?

Maybe the second argument could be fallback to a selector if no fitting pseudo class is found.

This would be immensely helpful for styling libraries that primarily use data-selectors to adjust the styles of their components. E.g reach-ui does this quite a lot.

Hey!

I'm super excited about this! Having spent the last year diving deep into multiple styling approaches, this seems very promising - at a glance.

For now I have one question, I'd like to create a component with some baked in className but I also want to accept a class from the outside.

For example:

const Button = React.forwardRef<
  HTMLButtonElement,
  React.ComponentPropsWithRef<"button">
>((props, ref) => {
  return (
    <button
      ref={ref}
      className={css.compose(
        css.color("red500"),
        css.fontSize(5),
        props.className || ""
      )}
      {...props}
    />
  );
});

export default function App() {
  return (
    <div className="App">
      <Button className={css.color("blue500")}>Test</Button>
    </div>
  );
}

What I've tried to do is to just inject props.className into css.compose function - but seems Im going about it the wrong way.

What's happening is that the className I passed in works, but the previous baked in classes are gone. I expect to see a button with font size of 5 and blue. But it's just blue.

Would I need to use something like classnames?

I would love to see calc and other functions. They could either be implemented as a first-class citizen of stitches. E.g css.calc() or alternatively, provide a string-based escape hatch for the utilCss to define arbitrary css.

This could allow us to define our own functions.

I'm not sure how exactly this API could look like but one idea I had was the following:

type ISpace = keyof typeof STITCHES_CONFIG.tokens.space;

// inside the utilities of the STITCHES_CONFIG

calcMultiply: utilCss => (
  ...values: ISpace[],
) => utilCss.string`calc(${values.join(' * ')})`

What do you think? :)

A good starting point would be https://github.com/system-ui/theme-ui/tree/master/packages/css

Please clarify what's the recommended way for typing custom utils. If I want 'm' and 'p' utils and component properties to accept new space tokens + standard values like 'auto'. But I certainly don't want them to accept any arbitrary numbers and strings.

export const css = createCss({
  tokens: {
    space: {
      0: '0',
      5: '5px',
      10: '10px',
      15: '15px',
      20: '20px',
      25: '25px',
      30: '30px',
      35: '35px',
      40: '40px',
      45: '45px',
      50: '50px',
    },
  },
  screens: {
    sm: (rule) => `@media (min-width: ${sm}) { ${rule} }`,
    md: (rule) => `@media (min-width: ${md}) { ${rule} }`,
    lg: (rule) => `@media (min-width: ${lg}) { ${rule} }`,
    xl: (rule) => `@media (min-width: ${xl}) { ${rule} }`,
  },
  utils: {
    m: (utilCss) => (value: ---> ??? <---, pseudo?: string) =>
      utilCss.compose(
        utilCss.marginLeft(value, pseudo),
        utilCss.marginRight(value, pseudo),
        utilCss.marginTop(value, pseudo),
        utilCss.marginBottom(value, pseudo),
      ),
    p: (utilCss) => (value: ---> ??? <---, pseudo?: string) =>
      utilCss.compose(
        utilCss.paddingLeft(value, pseudo),
        utilCss.paddingRight(value, pseudo),
        utilCss.paddingTop(value, pseudo),
        utilCss.paddingBottom(value, pseudo),
      ),
  }
}

type ViewProps = {
  children: React.ReactNode
  m: ---> ??? <---
  p: ---> ??? <---
}

export function View(props: ViewProps) {
  const { children, m, p } = props
  const classes = css.compose(
    css.m(m),
    css.p(p),
  ); 
  return <div className={classes}>{children}</div>
}

Hey, is the way to escape the configuration still the same as in the original stitches video?

I just tried css.width('3px' as any) and it wasn't working for me.

In this example, Button is the return of styled.button

Hey, I just finished migrating some code from classy-ui to stitches and I thought it'd be a good idea to write up some thoughts.

I know that this is a very early version of stitches so my feedback and criticism might not be valid in a few weeks or days from now.

1. The description of properties within the type definition was amazing and something I really miss in stitches. When hovering over any property, you can't even see the value they map to which means I either have to memorize all my design tokens and their respective values, or keep a tab on my createCss config at all times.

2. The fact that no babel plugin is required is amazing. With classy-ui, I had to restart CRA at least twice and restart tsc watch + the TypeScript server in my IDE multiple times after adding or renaming a single token. Whenever I change the createCss config, it works immediately after hitting save.

3. Type experience was a lot better in classy-ui. Probably because some properties are still missing as already described in #4.

4. Going beyond what system-ui has to offer was really nice. I really enjoyed that classy-ui had transform/translate tokens baked in and provided some default properties e.g AUTO: 'auto' for spacing which stitches does not, I had to configure it myself. It was also very nice to have some custom css values that we can no longer have unless one uses utils. I preferred writing display.HIDDEN (classy-ui) instead of display('NONE') even though they express the same thing. Same with start, end instead of flex-start or flex-end. It was a nice mini abstraction on top of CSS. Now, I feel like my code is much closer to css than before.

5. Having inconsistent casing is frustrating and makes the code harder to read for me. The convention is to use CONSTANT_CASING (or however it's called, I usually call it upper snake case 😀), yet some non-system-ui properties support only the default, kebab-cased css property values. Certainly not worth to call css.textAlign('CENTER' as any) for consistent casing but it'd maybe be better to UPPER_CASE every value by default?

6. css.compose yielding not a string came as a surprise. Certain libraries (looking at you react-fontawesome) use the className internally. They tried to .split() it which obviously failed. I saw in the code that stitches uses proxies which should work in most cases. The library shouldn't really deal with the className property anyhow as long as I pass in the icon as a distinct prop. This might not really be a problem of stitches but would be good to document nonetheless. Fixed it by calling toString: <FontAwesomeIcon icon={questionMarkIcon} className={css.compose(css.color('BLUE')).toString()} />

Those were the only things I could think of at the moment. I believe the future is bright for stitches. After having used styled-components for a year and having tried many different component- and theming libraries, I now believe that css-in-ts is the way to go. Very excited for its future and thank you again for making the first important steps with classy-ui and stitches in that direction. ❤️

Hi, i'm trying to use stitches with the ant design ui lib, but unfortunately it doesn't work.

It doesn't generate the class names properly on the Ant Design Components.

example:

my code

<Footer className={css.compose(css.textAlign('center'))}>
    ©2020 Created by Gustavo Gualbano
</Footer>

what generates:

<footer class="ant-layout-footer atoms toString">©2020 Created by Gustavo Gualbano</footer>

it puts this atoms toString on the class.

if i use on a native html element likes this

<div className={css.compose(css.textAlign('center'))}>
  <Footer>©2020 Created by Gustavo Gualbano</Footer>
</div>

works just fine, but if i use directly on a ant design component, it doesn't.

Hi,

To begin, thanks for your job !

Problem

I have a problem when i try to use stitches css + tailwind + styled: I got always an error message in console, like bellow:

Warning: Prop `className` did not match. Server: "fs_5 fw_6 c_7" Client: "fs_0 fw_1 c_2"

Also, if i modify something in my "style file" like add this:

export const appContainer = css.compose(
  css.relative(),
  css.minH("screen"),
  css.text("center")
);

... my page do a refresh and i see styling correctly (whitout a new error message Warning: Prop className did not match. ...) and it works until I reload the page manually.

Configuration

I use the lastest version of stitches, NextJS, Typescript,...

This is my _app.tsx:

import Head from "next/head";
import AppLayout from "components/AppLayout";
import { css, Provider } from "styles/css";

function MyApp({ Component, pageProps }) {
  return (
    <Provider css={css}>
      <Head>
        <title>My Application Title</title>

        <link
          href="https://unpkg.com/tailwindcss/dist/base.min.css"
          rel="stylesheet"
          key="tailwindcss"
        />
      </Head>
      <AppLayout>
        <Component {...pageProps} />
      </AppLayout>
    </Provider>
  );
}

export default MyApp;

I don't use _docuemnt.tsx for now.

I think that i have to put this line in a place, but where :
const styles = css.getStyles(); // The styles to be passed with the resulting HTML

Note: i'm a "beginner", in dev and in english ^_^

Thanks by advance :-)

Hey,

I'm not being able to get css.appearance("none") to work.

Here's a repro: https://codesandbox.io/s/stiches-appearance-itc5w

Not sure why but I wonder if it's something to do with browser prefixes...?

Currently to target a descendant you need to:

{
  " svg": {}
}

I think adding a space before the selector isn’t very intuitive. Shall we keep it inline with other object style syntaxes?

So, a nested key can be a descendant or a pseudo class. Pseudo classes start with a colon.

We should allow nesting as many levels as possible too.

For example:

{
  ":hover": {
    "svg": {}
  }
}

Is the equivalent of: component:hover svg

The need to nest becomes even more appealing when targeting other instances of Styled Components:

{
  [`${Component}:hover`]: {}
}

I think the general DX would be better like this:

{
  [Component]: {
    :hover: {}
  }
}

Hope this makes sense. On my phone 😆

For example, gap can't be a number.

It may be worth referring to this https://github.com/system-ui/theme-ui/blob/f5dd5b3ee601909a52ceb14cbd5fdd1857364ef1/packages/css/src/types.ts#L14-L22

In order to promote a more pure way of defining styles, we'd like to keep responsive definitions outside of the style/variant themselves

I usually refer to this as immutable styles

In a nutshell, instead of:

const Button = styled.button({
  padding: 4,
  largeBreakpoint: {
    padding: 6
  }
})

We'd prefer this:

const Button = styled.button({
  padding: 4
}, {
  size: {
    large: {
      padding: 6
    }
  }
})

Then at the usage level, you'd do:

// Always padding=4
<Button>Button</Button>

// Always padding=6
<Button size="large">Button</Button>

// padding=4 on small and padding=6 on large breakpoint
<Button size={{ largeBreakpoint: 'large'  }}>Button</Button>

This gives consumers full control of when to render which size button, for design systems this is a crucial pattern. It then allows developers at the product side, to create product-realated decisions. and if they want to wrap a button with responsive logic in it, they would do:

const ProductButton = props => <Button size={{ largeBreakpoint: 'large'  }} {...props} />

Hello i've tried to add colors to the tailwind config but it seems it doesn't work.

I've tried to add it like that:

or

but it doesn't work here

so how can we add colors?

Codesandbox with repro

I'd like to add a box-shadow property whilst keeping the color mapped to my tokens, and noticed that currently it doesn't do that by default (I can understand why)

I'm curious how one would go about doing that, given that there's no long-hand box shadow color property.

As a comparison, Styled System's css function also accepts a callback function as a value, providing the theme:

css({
  boxShadow: theme => `0 0 0 2px ${theme.colors.red500}`
})

Repro: https://codesandbox.io/s/stiches-boxshadow-color-mapping-to-token-7lbdm?file=/src/App.tsx

Error message:

/Users/hadihallak/cra-ts/src/App.tsx
TypeScript error in /Users/hadihallak/cra-ts/src/App.tsx(13,7):
Type instantiation is excessively deep and possibly infinite.  TS2589

    11 |   return (
    12 |     <div className="App">
  > 13 |       <Box> Hello world </Box>
       |       ^
    14 |     </div>
    15 |   )
    16 | }

Relevant packages:

    "@stitches/styled": "^8.0.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"

Can be reproduced with this code in a CRA TS app:

import React from 'react'

import { createStyled } from '@stitches/styled'

export const { styled, css } = createStyled({})

export const Box = styled.div({})

function App() {
  return (
    <div className="App">
      <Box> Hello world </Box>
    </div>
  )
}

export default App

Based on the following code:

const css = createCss({
  tokens: {
    colors: {
      red500: "hsl(358, 92%, 74%)"
    }
  }
});

console.log(css);

Repro: https://codesandbox.io/s/stiches-log-css-ft3vm?file=/src/App.tsx:99-216

Hello,
It would be good if you could provide some examples on the best way to handle dynamic styles with stitches.

For example changing the value of a property based on a React prop.
I've been doing this: css.flexDirection(direction === 'vertical' ? 'column' : 'row') which seems to work.

Also some examples on including and excluding entire properties from a compose call. For example:

const styles = css.compose(
  css.display('flex'),
  justify && css.justifyContent(justify),
  align && css.alignItems(align),
)

This does not seem to work, which makes me think this may not be the best approach in the first place.

Cheers

Our primitives would export something like:

export const resetStyles = {
  root: {
    display: 'flex',

    '&[data-state-disabled]': {
      pointerEvents: 'none',
    },
  },
};

and then the consumer would do:

import { ComponentPrimitive, resetStyles } from '@interop/primitives';

const Component = styled(ComponentPrimitive, {
  ...resetStyles.root,
  border: '1px solid green';
});

The ampersand means this spreading by the consumer would work in styled-components, emotion and also stitches.

@christianalfoni was thinking we could have selector logic as:

• If it starts with &, remove it
• If it now starts with : or [, treat as state selector
• If not, insert a space to treat as nested element selector

{
  '&:hover': {},
  'div': {},
  '&[..]': {},
}