feat: Optional token scale prefix

[lcoalves]

This PR adds the ability to remove scale from CSS variables.

i.g.:

Currently:

export const { styled, css, config, theme, createTheme } = createStitches({
  theme: {
    colors: {
      "my-pink": "#FFBDC9"
    },
  },
});

the injected CSS variable is: $colors-my-pink: #FFBDC9

Proposed feature:

export const { styled, css, config, theme, createTheme } = createStitches({
  hasScalePrefix: false, // default true
  theme: {
    colors: {
      "my-pink": "#FFBDC9"
    },
  },
});

the injected CSS variable is: $my-pink: #FFBDC9

[codesandbox-ci[bot]]

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 1375f91426b4cd3537563756b1a8e0b397b08d28:

Sandbox	Source
Stitches CI: CRA	Configuration
Stitches CI: Next.js	Configuration

[LexSwed]

I understand the config flag is optional, but since the config is global, it's gonna break cases when you need to access other scales from within CSS properties?

This example is super incorrect, it's just to show the cases when you need access to scales:

$$size: 'calc($scales$md - 200px)',
width: 'calc($scales$md - 200px)',
background: 'linear-gradient(to left, $colors$my-pink, #333 $$size)',

Some would argue that magical mapping might not be the best for consistency (I love it though).

[lcoalves]

I understand the config flag is optional, but since the config is global, it's gonna break cases when you need to access other scales from within CSS properties?

This example is super incorrect, it's just to show the cases when you need access to scales:

$$size: 'calc($scales$md - 200px)',
width: 'calc($scales$md - 200px)',
background: 'linear-gradient(to left, $colors$my-pink, #333 $$size)',

Some would argue that magical mapping might not be the best for consistency (I love it though).

Oh well, this is a good point of view.

We suggested this new feature because we want to write the entire token when writing the CSS styles.

i.g.

export const { styled, css, config, theme, createTheme } = createStitches({
  prefix: "dy",
  theme: {
    colors: {
      "my-pink": "#FFBDC9"
    },
    sizes: {
      md: "400px",
      200: "800px"
    }
  },
});

so, the injected CSS variable is: $dy-colors-my-pink: #FFBDC9

and we want to write the CSS style like this:

$$size: 'calc($dy-sizes-md - 200px)',
width: 'calc($dy-sizes-200 - 10px)',
background: 'linear-gradient(to left, $dy-colors-my-pink, #333 $$size)',

If there was such a feature that allowed to write the token completely? You can help us?

[hadihallak]

@lcoalves Thanks for your contribution but unfortunately, we can't merge this feature for the reason @LexSwed outlined. In addition to that, we are also trying to keep the API as concise and consistent as possible to make the documentation easier to follow.

Gonna close this issue but again thank you so much ❤️
Please feel free to create a feature request if you'd like to validate something with the community or the core team before working on it.