search

stitchesjs / stitches

[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
https://stitches.dev
MIT License
7.75k stars 253 forks source link

css prop not working with utils and variables #1013

Closed ronaldruzicka closed 2 years ago

ronaldruzicka commented 2 years ago

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

69b4ae54-695c-4bf2-accc-b3bb0095e2b8

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 Screenshot 2022-04-28 at 08 55 22

But for the values it doesn't, probably because the type is {} | undefined as you can see on the previous image Screenshot 2022-04-28 at 08 55 48

But if I use full CSS property, the autocomplete for the values works Screenshot 2022-04-28 at 08 50 16

But in the end neither utils nor the variable values are transformed into CSS Screenshot 2022-04-28 at 08 51 25 Screenshot 2022-04-28 at 08 51 32

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

norman-ags commented 2 years ago

That's weird. We have a package published to github registry, it works fine. But we're not using vite/rollup when bundling. Maybe its the bundler?

LexSwed commented 2 years ago

You didn't post your stitches.config, but it should be the root of the problem. It should be something like this:

// ...
utils: {
  bgColor: (value: PropertyValue<'backgroundColor'>) => ({
    backgroundColor: value,
  }),
}

It is always easier to verify the problem when you try to build a minimal reproducible example on Codesandbox :) Then it's easier for people to help you and most probably you can find the issue yourself while doing so.

JonatasAmaral commented 2 years ago

Came here just looking for this. Quite the same case as author: Vite, Stitches React, some space themes and MarginX utils.

I was trying CSS["paddingTop"], ended getting only the "built-in" mapped values (like 'initial') The PropertyValue<'marginTop'> did the job.

So thanks for the nice unaware wizard timing @LexSwed

ronaldruzicka commented 2 years ago

@LexSwed this is our config file:

import { createStitches, defaultThemeMap } from '@stitches/react';

import { utils } from './utils';

export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config, reset } =
  createStitches({
    prefix: 'abis-ui',
    theme: {
      colors: {
        inherit: 'inherit',
        transparent: 'transparent',
        black10: 'rgba(0,0,0,0.1)',
        black20: 'rgba(0,0,0,0.2)',
        black30: 'rgba(0,0,0,0.3)',
        black40: 'rgba(0,0,0,0.4)',
        black50: 'rgba(0,0,0,0.5)',
        black60: 'rgba(0,0,0,0.6)',
        black70: 'rgba(0,0,0,0.7)',
        black80: 'rgba(0,0,0,0.8)',
        black90: 'rgba(0,0,0,0.9)',
        black100: '#000',

        white10: 'rgba(255,255,255,0.1)',
        white20: 'rgba(255,255,255,0.2)',
        white30: 'rgba(255,255,255,0.3)',
        white40: 'rgba(255,255,255,0.4)',
        white50: 'rgba(255,255,255,0.5)',
        white60: 'rgba(255,255,255,0.6)',
        white70: 'rgba(255,255,255,0.7)',
        white80: 'rgba(255,255,255,0.8)',
        white90: 'rgba(255,255,255,0.9)',
        white100: '#fff',

        gray80: '#d9d9d9',
        gray70: '#bcbdbd',
        gray50: '#909191',
        gray25: '#58595b',
        gray15: '#424345',
        grayMain: '#212224',

        redMain: '#ff0000',
        redLight: '#ff6258',
        redDark: '#b10308',

        greenMain: '#33d718',
        greenLight: '#8a9917',
        greenDark: '#128808',

        blueMain: '#3d8bf6',
        blueLight: '#00D1FF',

        violetMain: '#ab31f5',

        orangeDark: '#c2520e',
        orangeLight: '#e2a421',

        brownMain: '#976953',

        cyanMain: '#0c866c',

        text: '$white100',

        // TODO: referenced color is used as CSS variable and not hex value: https://github.com/modulz/stitches/issues/937
        // success: '$greenMain',
        // danger: '$redMain',
        // warning: '$orangeLight',
        // default: '$gray50',
        success: '#33d718',
        danger: '#ff0000',
        warning: '#e2a421',
        default: '#909191',
        info: '#3d8bf6',

        bodyBg: '$grayMain',
      },
      space: {
        0: 0,
        1: '4px',
        2: '8px',
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '32px',
        8: '40px',
        9: '48px',
        10: '56px',
        11: '64px',
      },
      sizes: {
        0: 0,
        1: '4px',
        2: '8px',
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '32px',
        8: '40px',
        9: '48px',
        10: '56px',
        11: '64px',
      },
      fonts: {
        body: 'Montserrat, Helvetica, Arial, sans-serif',
        button: 'Oswald, Helvetica, Arial, sans-serif',
        mono: 'monospace, Helvetica, Arial, sans-serif',
        ocr: 'ocr-b, Helvetica, Arial, sans-serif',
        title: 'Oswald, Helvetica, Arial, sans-serif',
      },
      fontSizes: {
        xs: '11px',
        sm: '12px',
        md: '14px',
        lg: '16px',
        xl: '18px',
        '2xl': '24px',
        '3xl': '32px',
        body: '$md',
        h1: '$3xl',
        h2: '$2xl',
        h3: '$sm',
        button: '$md',
        tableTitle: '13px',
      },
      lineHeights: {
        xs: '15px',
        sm: '16px',
        md: '19px',
        lg: '24px',
        xl: '25px',
        '2xl': '28px',
        '3xl': '40px',
        body: '$md',
        h1: '$3xl',
        h2: '$2xl',
        h3: 'normal',
      },
      fontWeights: {
        normal: 400,
        bold: 700,
      },
      letterSpacings: {
        h1: '-0.02em', // -2%
        h2: 'normal',
        h3: '0.1em', // 10%
        button: '0.1em', // 10%
        ocr: '0.1em',
        tableTitle: '0.2em', // 20%
      },
      radii: {
        sm: '5px',
        md: '10px',
        lg: '15px',
      },
      // custom theme variables
      icons: {
        sm: '16px',
        md: '24px',
        lg: '48px',
      },
      opacity: {
        disabled: 0.3,
      },
      separatorSize: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
      separatorColor: {
        sm: '$colors$gray15',
        md: '$colors$black100',
        lg: '$colors$black100',
      },
    },
    // Custom utils
    utils,
    // Custom mapping for css properties
    themeMap: {
      ...defaultThemeMap,
      opacity: 'opacity',
    },
  });

and utils.ts

import type * as Stitches from '@stitches/react';

export const utils = {
  size: (value: Stitches.PropertyValue<'width'>) => ({
    width: value,
    height: value,
  }),

  // paddings
  p: (value: Stitches.PropertyValue<'padding'>) => ({
    padding: value,
  }),
  pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({
    paddingTop: value,
  }),
  pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({
    paddingRight: value,
  }),
  pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({
    paddingBottom: value,
  }),
  pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
    paddingLeft: value,
  }),
  px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
    paddingLeft: value,
    paddingRight: value,
  }),
  py: (value: Stitches.PropertyValue<'paddingTop'>) => ({
    paddingTop: value,
    paddingBottom: value,
  }),

  // margins
  m: (value: Stitches.PropertyValue<'margin'>) => ({
    margin: value,
  }),
  mt: (value: Stitches.PropertyValue<'marginTop'>) => ({
    marginTop: value,
  }),
  mr: (value: Stitches.PropertyValue<'marginRight'>) => ({
    marginRight: value,
  }),
  mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({
    marginBottom: value,
  }),
  ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({
    marginLeft: value,
  }),
  mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({
    marginLeft: value,
    marginRight: value,
  }),
  my: (value: Stitches.PropertyValue<'marginTop'>) => ({
    marginTop: value,
    marginBottom: value,
  }),

  bgColor: (value: Stitches.PropertyValue<'backgroundColor'>) => ({ backgroundColor: value }),

  // Clamp a line of text to a certain number of rows
  lineClamp: (value: number) => ({
    display: '-webkit-box',
    WebkitLineClamp: value,
    WebkitBoxOrient: 'vertical',
    overflow: 'hidden',
  }),

  // Truncate a line of text with an ellipsis
  truncate: (value: boolean) =>
    value
      ? {
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }
      : '',
};
JonatasAmaral commented 2 years ago

You didn't post your stitches.config, but it should be the root of the problem. It should be something like this:

// ...
utils: {
  bgColor: (value: PropertyValue<'backgroundColor'>) => ({
    backgroundColor: value,
  }),
}

It is always easier to verify the problem when you try to build a minimal reproducible example on Codesandbox :) Then it's easier for people to help you and most probably you can find the issue yourself while doing so.

Hey a little extra on that

Seems that custom utils types doesn't match with que theme types image

LexSwed commented 2 years ago

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

All theme tokens are prefixed with $ sign.

hadihallak commented 2 years ago

Not sure if this issue is still applicable but In the past I remember coming across a similar issue and it turned out to be that there was a babel transformation applied that was transforming the css prop to css outside of stitches

I think this probably the case for you but I can't be sure because I can't see the class name that was generated (it's covered in the red rectangle) would you please assert that the class name starts with the component id and ends with css for the css prop. if it's not then that's probably not related to stitches and you would need to check your build config tracking the plugin that's causing this transformation.

this is an example of the className generated by stitches for reference 

c-dLywTd c-dLywTd-idkEfkH-css
ronaldruzicka commented 2 years ago

@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! 🙏