Esbuild support for CSS property?

[FezVrasta]

Hi, I was wondering if there is any plan to add support for an alternative to the Babel Plugin Macro in order to be able to use the CSS property with Esbuild?

[FezVrasta]

I think a possible alternative could be to provide a custom jsx pragma like Emotion does.

[FezVrasta]

@kitten may I know why this was moved to the Babel plugin repository? My issue is about esbuild, not Babel. If a solution is going to be found, it will not involve Babel.

[mquandalle]

Did anyone fund a solution to support the css prop on a ViteJS/ESBuild application?

[SergeyVolynkin]

For now 'babel-plugin-styled-components' babel transformation needs to be called during esbuild.build(…)
Almost doubles the build time of esbuild project, but works

// build.mjs
import * as esbuild from 'esbuild';
import esbuildPluginBabel from 'esbuild-plugin-babel'; // small utility plugin making a bit easier to run babel transformation
//…
await esbuild.build({
  logLevel: 'info',
  outdir: './build',
  entryPoints: ['./src/index.tsx'],
  entryNames: 'static/[name]-[hash]',
  metafile: true,
  bundle: true,
  minify: true,
  sourcemap: true,
  platform: 'browser',
  target: 'chrome117',
  tsconfig: './tsconfig-src.json',
  define: {
    global: 'globalThis',
  },
  plugins: [
    // run as the first plugin
    esbuildPluginBabel({
      filter: /\.(jsx|tsx)$/u, // only process .jsx and .tsx files
      config: {
        plugins: [['babel-plugin-styled-components', { pure: true }]],
      },
    }),
    //… other plugins you have
  ],
});

---

cc @probablyup as the major contributor to the https://github.com/styled-components/babel-plugin-styled-components repo maybe you would know if styled-components team has plans to port the babel-plugin-styled-components to esbuild-native plugin? esbuild provides way to write a plugin on JS and Go lang, https://esbuild.github.io/plugins/#example-plugins

[quantizor]

I really have no time for that unfortunately. Maybe when one of the AI tools gets good enough we can generate one unless someone wants to take a stab at it

[quantizor]

The tricky thing with esbuild is it just gives you raw content and you have to provide your own AST parser. So you end up with something babel-like anyway.