Tahul / pinceau

🖌️ Make your <script> lighter and your <style> smarter
https://pinceau.dev
MIT License
684 stars 19 forks source link

use pinceau vite plugin theme must be passed through .vite/pinceau/flat.ts #27

Closed SGAMERyu closed 1 year ago

SGAMERyu commented 2 years ago

When we use pinceau as the initialization condition, the variable values set without the theme computeStyles and variantStyle will be undefined When we use it this way

app.use(Pinceau)

If we were to build a library based on pinceau, we might need to export flat.ts, but the code would duplicate the generated css style

Tahul commented 1 year ago

Hey @SGAMERyu ; could you provide how would you see that differently implemented/acessible?

SGAMERyu commented 1 year ago

Hey @SGAMERyu ; could you provide how would you see that differently implemented/acessible?

I initially thought that app.use(pinceau, {theme}) would be similar to the way the current community ui component library is implemented to extend or override design tokens in the default theme example for nextui and mantine https://nextui.org/docs/theme/customize-theme https://mantine.dev/theming/mantine-provider/ But actually when I looked at the code

export function resolveReferences(property: string, value: string, $tokens: TokensFunction) {
  if (!(typeof value === 'string')) { return value }

  value = value.replace(
    referencesRegex,
    (...parts) => {
      const [, tokenPath] = parts

      const token = $tokens(tokenPath, { key: undefined }) as DesignToken

      const tokenValue = typeof token === 'string' ? token : token?.attributes?.variable || token?.value || token?.original?.value

      if (!tokenValue) { return '' }

      return tokenValue
    },
  )

  return value
}

When we use computedStyle and variant features, we need to pass in the theme object, otherwise it won't find the theme object. When we used pinceau to build the ui component library, users might not pass in their own design tokens when using it, or they might just change a few token styles Can we add a fallback that converts tokenValue to var mode instead of an empty string when no theme object is passed in for example

     if (!tokenValue) { return var(--color-primary-500) }
Tahul commented 1 year ago

Hey @SGAMERyu ;

That change (forcing the import and not allowing theme as option) has been reverted for 0.8.0.

I'm planning to publish that version tomorrow.

Tahul commented 1 year ago

flat.ts does not exist anymore, very old issue but feel free to re-open if needed! 😄