Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

presetAttributify and transformerAttributifyJsx don't work in react18 #3773

Closed
4 tasks done
tbtnb opened this issue May 6, 2024 · 1 comment
Closed
4 tasks done

Comments

@tbtnb
Copy link

tbtnb commented May 6, 2024

UnoCSS version

0.58.6

Describe the bug

when I use presetAttributify and transformerAttributifyJsx in my project,it appears an error
image
this is my uno.config.ts

import { defineConfig } from 'unocss/vite'
import theme from './src/config/theme'
import {
  transformerAttributifyJsx,
  transformerDirectives,
  presetAttributify,
  presetUno
} from 'unocss'
import presetIcons from 'unocss/preset-icons'

export default defineConfig({
  exclude: [
    'node_modules',
    'dist',
    '.git',
    '.husky',
    '.vscode',
    'public',
    'build',
    'mock',
    './stats.html'
  ],
  presets: [presetUno({ dark: 'class' }), presetAttributify(), presetIcons()],
  transformers: [transformerDirectives(), transformerAttributifyJsx()],
  shortcuts: {},
  theme: {
    colors: {
      ...theme
    }
  }
})

this is my vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [Unocss({}), react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // src 路径
    }
  }
})

this is my react code

const Home = () => {
  return (
    <div>
      <h1 mt-20>Home</h1>
    </div>
  )
}
export default Home

I also add shims.d.ts in the root path,but I don't think it can make this error

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

Reproduction

const Home = () => {
  return (
    <div>
      <h1 mt-20>Home</h1>
    </div>
  )
}
export default Home

System Info

No response

Validations

@tbtnb tbtnb closed this as completed May 6, 2024
@tbtnb tbtnb reopened this May 6, 2024
@tbtnb
Copy link
Author

tbtnb commented May 6, 2024

plus: when I use classname,unocss works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants