Skip to content

Incorrect class applies under specific condition #72

@andjsrk

Description

@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"
  }
}
  1. npm install
  2. Update vite.config.ts to use macaron plugin: plugins: [macaronVitePlugin(), solidPlugin()]
  3. Set moduleResolution to "bundler" in tsconfig.json (otherwise TS complains about imports)
  4. 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],
})
  1. Remove other files in src except index.tsx.
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions