css prop not working with utils and variables

Bug report

Describe the bug

Hi, first of all thanks for the library, it’s really great!

We are using Stitches for our design system in a monorepo, but also as a package for our other apps that are not in a monorepo yet. When we use it in a monorepo, it works fine. We are using Turborepo and the design system is just imported via pnpm workspaces. So it is not bundled, just imported.

But when we use it as an npm package via Gitlab package registry in our other repos, we have a problem with the css prop. It just doesn’t transform into correct CSS. We are using vite with the following setup:

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  // Need this empty to generate path "build.js" instead of "/build.js" for minio links
  base: '',
  build: {
    outDir: 'lib',
    lib: {
      entry: path.resolve(__dirname, 'index.ts'),
      formats: ['es'],
      fileName: 'index',
    },
    rollupOptions: {
      // dont bundle react and react-dom, but instead use the external versions
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
  envPrefix: '_',
  plugins: [
    // because we use react
    react(),
    // for exporting svgs
    svgrPlugin({
      svgrOptions: {
        icon: true,
      },
    }),
    // for exportig ts types
    dts(),
  ],
});

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Use stitches as an npm package
2. Have a component which can get the css prop
3. Check CSS in the browser
4. See that the CSS is not transformed. It doesn’t transform our utils nor our variables, e.g. colors that are defined in the design system. Autocomplete works for the utils, but not for the variables

Expected behavior

utils and variables work as defined in the design system.

Screenshots

marginLeft is ok, because it uses a number, but our util mt for marginTop that uses a variable is not compiled. <IconButton> just passes the css prop to it’s styled div

The same is happening for our Box component, which looks like this:

import { styled } from '../../theme/stitches.config';

export const Box = styled('div');

Autocomplete for util property works, but the type is {} | undefined

But for the values it doesn’t, probably because the type is {} | undefined as you can see on the previous image

But if I use full CSS property, the autocomplete for the values works

But in the end neither utils nor the variable values are transformed into CSS

For other components that has e.g. color as a prop that uses our variables it works, just the css prop is broken. Is it a bug on your side or are we doing something wrong during build process?

Thanks 🙏

System information

• OS: 12.3.1
• Browser:
  • Brave - Version 1.37.116 Chromium: 100.0.4896.127 (Official Build) (arm64)
  • Chrome - Version 100.0.4896.127 (Official Build) (arm64
  • Safari 15.4
• Version of Stitches: “@stitches/react”: “^1.2.6”
• Version of Node.js: v14.18.3
• Vite: v2.8.0

[ronaldruzicka]

@hadihallak thanks for the hint. The issue probably is babel-plugin-styled-components because we also use Styled Components in older projects, so the generated class is cases-list___StyledButtonDS-sc-qqd2ak-1 gcrzmf.

But on a new Vite project without Styled Components it works properly. I’m closing this issue.

Thanks again! 🙏

[LexSwed]

Seems that custom utils types doesn’t match with que theme types

All theme tokens are prefixed with $ sign.