mistcss icon indicating copy to clipboard operation
mistcss copied to clipboard

`--at-apply` gets exposed as Props.

Open totto2727 opened this issue 4 months ago • 0 comments

TailwindandUnoCSScan use the--at-applyformat instead of@apply. Lightning CSS cannot use @apply` by default, so you need to use this one.

https://github.com/unocss/unocss/issues/2910

@scope (a.base-anchor) {
  :scope {
    --at-apply: "text-blue-500 underline";
  }
}

However, it seems to be exposed as Props because it matches the syntax of CSS Variables.

---
// Generated by MistCSS, do not modify
import type { HTMLAttributes } from 'astro/types'
import './Anchor.mist.css'

type Props = { atApply?: string } & HTMLAttributes<'a'>

const { atApply, ...props } = Astro.props
---

<a {...props} style={{ '--at-apply': atApply }} class=“base-anchor” ><slot /></a>

Probably no harm is done since it is a type issue, but I wanted to prevent unnecessary type exposures if possible. Is it acceptable for PRs to add a process to ignore certain variable names? (For the time being, I plan to hard-code the variable names without adding Option)

// UnoCSS Default.
['--at-apply', '--uno-apply', '--uno']

https://github.com/typicode/mistcss/blob/6747d0cd486128a511a19f46041e56be9a8bc8cd/src/parser.ts#L54-L59

totto2727 avatar Sep 26 '24 02:09 totto2727