TypeScript 4.9 syntax satisfies doesn't appear to work

[blixt]

Environment

• Linaria version: @linaria/core v4.2.2 @linaria/esbuild v4.2.2
• Bundler (+ version): esbuild 0.15.15
• Node.js version: v19.1.0
• OS: macOS 13.0.1

Description

The Linaria plugin fails with the following error on a line of code with the syntax const something = { … } satisfies MyType:

 ✘ [ERROR] [plugin linaria] Transform failed with 1 error:
 …/src/app/fresco/src/components/Theme.styles.ts:13:85: error: Expected ";" but found "satisfies"

     ../fresco/src/components/FrescoSettings.tsx:2:7:
       2 │ import "../components/Theme.styles";
         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

   This error came from the "onLoad" callback registered here:

     ../../../node_modules/@linaria/esbuild/dist/index.js:71:12:
       71 │       build.onLoad({ filter: /\.(js|jsx|ts|tsx)$/ }, async (args) ...
          ╵             ~~~~~~

     at setup (…/node_modules/@linaria/esbuild/dist/index.js:71:13)
     at handlePlugins (…/node_modules/esbuild/lib/main.js:1251:21)
     at buildOrServeImpl (…/node_modules/esbuild/lib/main.js:942:5)
     at Object.buildOrServe (…/node_modules/esbuild/lib/main.js:750:5)
     at …/node_modules/esbuild/lib/main.js:2087:17
     at new Promise (<anonymous>)
     at Object.build (…/node_modules/esbuild/lib/main.js:2086:14)
     at build (…/node_modules/esbuild/lib/main.js:1933:51)
     at buildApp (…/src/app/vekter/esbuild/vekter.esbuild.js:165:12)

Reproducible Demo

import { css } from "@linaria/core"

interface ColorTokenMap {
    primary: string
    secondary: string
}

const lightTokens = {
    primary: "#111",
    secondary: "#09f",
} satisfies ColorTokenMap

export const text = css`
    color: ${lightTokens.primary};
`

[Anber]

Hi @blixt!

The used babel version was a bit outdated. I've upgraded it to the latest one which doesn't have problems with TS4.9.

[blixt]

Thank you! I noticed now upgrading to everything latest that I still get this issue. Did you close it before releasing the fix?

[blixt]

Okay so I forced @babel/core to be the latest version in my repo and this error still happens, so I don't think that was enough.

I think this is due to #1139 actually, and it's forcefully holding back esbuild to an old version, when it should use the one of the caller. I tried forcing a resolution to the latest esbuild and the error does indeed go away. So I think the solution is to make that plugin not bundle its own esbuild which will also speed up installation of the package, and reduce maintenance of this repo!

[Anber]

Did you close it before releasing the fix?

Yeah… GitHub automatically closes all issues that are mentioned in PR as fixed.
I've added a test that checks compatibility with the new TS. I believe the fix will work for you when it is released (which will happen in the next day or two).