Incorrect class applies under specific condition

[andjsrk]

Steps to reproduce:

1. Create a solid project with npm init [email protected] (SolidStart: No, Template: ts, Use Typescript: Yes)
2. Update package.json:

{
  // other fields...
  "dependencies": {
    "@macaron-css/core": "1.5.2",
    "@macaron-css/solid": "1.5.3",
    "@macaron-css/vite": "1.5.1",
    "solid-js": "1.9.3"
  },
  "overrides": {
    "vite": "5.4.11"
  }
}

3. npm install
4. Update vite.config.ts to use macaron plugin: plugins: [macaronVitePlugin(), solidPlugin()]
5. Set moduleResolution to "bundler" in tsconfig.json (otherwise TS complains about imports)
6. Create/update files:

// src/App.tsx
import './a' // import to prevent tree-shaking
import { textAlign } from './prelude'

export default function App() {
  return <div class={textAlign.center}>Hello</div>
}

// src/prelude.ts
import { keyframes, style } from '@macaron-css/core'

// key: namespace
export namespace textAlign {
  export const center = style({ textAlign: 'center' })
  export const end = style({ textAlign: 'end' })
}

// key: a call to `keyframes()`
keyframes({})

// src/a.tsx
import { styled } from '@macaron-css/solid'
import { textAlign } from './prelude'

// key: a call to `styled()`, with a reference to the class
styled('div', {
  base: [textAlign.center],
})

7. Remove other files in src except index.tsx.
8. Start dev server with npm run dev

Expected

Hello is displayed on the center

Actual

Hello is displayed on the right side (text-align: end; is applied)

Note

I tried to reduce the reproduction as small as possible, but there may be some unnecessary code