search

vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript
https://vanilla-extract.style
MIT License
9.53k stars 288 forks source link

(regression) Styling API produces colliding class names #672

Closed joemckenney closed 2 years ago

joemckenney commented 2 years ago

Describe the bug

After upgrading from @vanilla-extract/esbuild-plugin@2.0.3 to @vanilla-extract/esbuild-plugin@2.0.4 the component packages in our design system with different styling produce colliding class names.

Button Component + vanilla-extract/esbuild-plugin usage

joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat button/src/index.css.ts 
import { style } from '@vanilla-extract/css';
import { vars } from '@bodo/theme';

export const className = style({
  display: 'inline-block',
  width: vars.space['fit'],
  height: vars.space['325'],
  padding: `0 ${vars.space['100']}`,
  borderRadius: vars.space['40'],
  backgroundColor: vars.colors.white,
  border: `1px solid ${vars.colors.gray4}`,
  ':hover': {
    backgroundColor: vars.colors.gray6,
  },
});
joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat button/tsup.config.ts 
import { defineConfig } from 'tsup';
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
import { dependencies, peerDependencies } from './package.json';

export default defineConfig((options) => ({
  entry: ['src/index.tsx'],
  outDir: 'dist',
  format: ['esm', 'cjs'],
  sourcemap: true,
  bundle: true,
  minify: false,
  dts: true,
  esbuildPlugins: [vanillaExtractPlugin()],
  external: [...Object.keys(dependencies), ...Object.keys(peerDependencies)],
  clean: !options.watch,
}));

Modal Component + vanilla-extract/esbuild-plugin usage

joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat modal/src/index.css.ts 
import { style } from '@vanilla-extract/css';
import { vars } from '@bodo/theme';

export const root = style({
  display: 'flex',
  ':hover': {
    color: vars.colors.red10,
  },
  position: 'fixed',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
  background: 'rgba(0, 0, 0, 0.5)',
  alignItems: 'center',
  justifyContent: 'center',
});

export const modalHidden = style({
  display: 'none',
});
joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat modal/tsup.config.ts 
import { defineConfig } from 'tsup';
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
import { dependencies, peerDependencies } from './package.json';

export default defineConfig((options) => ({
  entry: ['src/index.tsx'],
  outDir: 'dist',
  format: ['esm', 'cjs'],
  sourcemap: true,
  bundle: true,
  minify: false,
  dts: true,
  esbuildPlugins: [vanillaExtractPlugin()],
  external: [...Object.keys(dependencies), ...Object.keys(peerDependencies)],
  clean: !options.watch,
}));

Button CSS

joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat button/dist/index.css
/* vanilla-extract-css-ns:src/index.css.ts.vanilla.css?source=LnNyY19fMWFncWV1bTAgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICB3aWR0aDogdmFyKC0tc3BhY2UtZml0KTsKICBoZWlnaHQ6IHZhcigtLXNwYWNlLTMyNSk7CiAgcGFkZGluZzogMCB2YXIoLS1zcGFjZS0xMDApOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXNwYWNlLTQwKTsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvcnMtd2hpdGUpOwogIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWNvbG9ycy1ncmF5NCk7Cn0KLnNyY19fMWFncWV1bTA6aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1ncmF5Nik7Cn0= */
.src__1agqeum0 {
  display: inline-block;
  width: var(--space-fit);
  height: var(--space-325);
  padding: 0 var(--space-100);
  border-radius: var(--space-40);
  background-color: var(--colors-white);
  border: 1px solid var(--colors-gray4);
}
.src__1agqeum0:hover {
  background-color: var(--colors-gray6);
}
/*# sourceMappingURL=index.css.map */%

Modal CSS

joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat modal/dist/index.css
/* vanilla-extract-css-ns:src/index.css.ts.vanilla.css?source=LnNyY19fMWFncWV1bTAgewogIGRpc3BsYXk6IGZsZXg7CiAgcG9zaXRpb246IGZpeGVkOwogIHRvcDogMDsKICBsZWZ0OiAwOwogIGJvdHRvbTogMDsKICByaWdodDogMDsKICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuNSk7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKfQouc3JjX18xYWdxZXVtMDpob3ZlciB7CiAgY29sb3I6IHZhcigtLWNvbG9ycy1yZWQxMCk7Cn0KLnNyY19fMWFncWV1bTEgewogIGRpc3BsYXk6IG5vbmU7Cn0= */
.src__1agqeum0 {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}
.src__1agqeum0:hover {
  color: var(--colors-red10);
}
.src__1agqeum1 {
  display: none;
}
/*# sourceMappingURL=index.css.map */%

With @vanilla-extract/esbuild-plugin@2.0.3

joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat button/dist/index.css
/* vanilla-extract-css-ns:@bodo/button/src/index.css.ts.vanilla.css?source=LnNyY19fYWtwY2JxMCB7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogIHdpZHRoOiB2YXIoLS1zcGFjZS1maXQpOwogIGhlaWdodDogdmFyKC0tc3BhY2UtMzI1KTsKICBwYWRkaW5nOiAwIHZhcigtLXNwYWNlLTEwMCk7CiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc3BhY2UtNDApOwogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy13aGl0ZSk7CiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tY29sb3JzLWdyYXk0KTsKfQouc3JjX19ha3BjYnEwOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvcnMtZ3JheTYpOwp9 */
.src__akpcbq0 {
  display: inline-block;
  width: var(--space-fit);
  height: var(--space-325);
  padding: 0 var(--space-100);
  border-radius: var(--space-40);
  background-color: var(--colors-white);
  border: 1px solid var(--colors-gray4);
}
.src__akpcbq0:hover {
  background-color: var(--colors-gray6);
}
/*# sourceMappingURL=index.css.map */%                                                                                                                                                                                                       
joe at caballito in ~/repos/company/packages/@bodo (main●) 
$ cat modal/dist/index.css 
/* vanilla-extract-css-ns:@bodo/modal/src/index.css.ts.vanilla.css?source=LnNyY19fZmgyNjZxMCB7CiAgZGlzcGxheTogZmxleDsKICBwb3NpdGlvbjogZml4ZWQ7CiAgdG9wOiAwOwogIGxlZnQ6IDA7CiAgYm90dG9tOiAwOwogIHJpZ2h0OiAwOwogIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC41KTsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwp9Ci5zcmNfX2ZoMjY2cTA6aG92ZXIgewogIGNvbG9yOiB2YXIoLS1jb2xvcnMtcmVkMTApOwp9Ci5zcmNfX2ZoMjY2cTEgewogIGRpc3BsYXk6IG5vbmU7Cn0= */
.src__fh266q0 {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}
.src__fh266q0:hover {
  color: var(--colors-red10);
}
.src__fh266q1 {
  display: none;
}
/*# sourceMappingURL=index.css.map */%

Link to reproduction

See above. The design system is not yet open source so a reproduction may take a moment. If you can't make progress w/o it let me know and I can try to create some minimal reproduction.

System Info

  System:
    OS: Linux 5.16 Arch Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 13.50 GB / 31.06 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 3.2.0 - ~/.nvm/versions/node/v16.9.1/bin/yarn
    npm: 7.21.1 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Firefox: 98.0.2

All of our design system components have the following relevant dev deps

"@typescript-eslint/eslint-plugin": "5.22.0",
"@typescript-eslint/parser": "5.22.0",
"@vanilla-extract/css": "1.7.0",
"@vanilla-extract/esbuild-plugin": "2.0.3",
"@vanilla-extract/sprinkles": "1.4.0",
"esbuild": "0.14.38",
"esbuild-jest": "0.5.0",
"eslint": "8.14.0",
"jest": "28.0.3",
"prettier": "2.6.2",
"shx": "0.3.4",
"tsup": "5.12.6",
"typescript": "4.6.4"
mattcompiles commented 2 years ago

Thanks for the report. I think I know what's causing this. Will look into a fix next week.

joemckenney commented 2 years ago

@mattcompiles I created minimal reproductions here:

@vanilla-extract/esbuild-plugin@2.0.3 - https://github.com/joemckenney/vanilla-extract-esbuild-plugin-bug @vanilla-extract/esbuild-plugin@2.0.4 - https://github.com/joemckenney/vanilla-extract-esbuild-plugin-bug/tree/joe/vanilla-extract-esbuild-plugin-upgrade

I checked in the dist/ dirs so you don't have to build (but if you do want to a yarn; npx turbo run build; from the top of the repo will do the trick).