wattanx / nuxt-pandacss Goto Github PK

Feature Issue

私は普段のNuxt開発においてstyled-systemをAuto-importsして利用しています。
Auto-imports設定を利用することでcss()、cva()、stack()などよく使用するメソッドをimport不要で使え開発体験が向上しています。

本モジュール側でNuxt Auto-imports機能をサポートできるとユーザー側での追加設定が不要となり、開発体験にに良い影響を与えられるのではないかと考えています。
そのため、本モジュールにおけるAuto-imports optionの追加可否を検討できたらと思っています。

Context

昨今、Nuxtモジュール側でAuto-importsをサポートする例が増えています。例えば、以下のモジュールです。

• @pinia/nuxt : docs
• @vee-validate/nuxt : docs

また@vueuse/nuxtモジュールは設定不要でAuto-imports機能が利用できる様になっています。

以上のように、Nuxtモジュール側でAuto-importsの設定可否を選択できるモジュールは今後も増えてくることが予想されます。
他モジュールと開発体験を合わせることでユーザー体験に良い影響を与えられるのではないかと考えています。

Design (my opinion)

autoImports optionを追加し、設定値によってauto-importsの設定追加可否を決定する。
下記の設定方法@vee-validate/nuxtを参考にしています。

// types.ts
export interface ModuleOptions extends Config {
  configPath?: string;
  cssPath?: string;
+ /**
+  * @default 'false'
+  */
+  autoImports: boolean;
}

Context

nuxi module add / search command can be used to search for and add modules.
nuxi module add / search command targets a set of modules added to nuxt/modules/modules/*.

Do you plan to add to nuxi/module?

my opinion

As for me, I would be happy to add nuxt-pandacss using nuxi module command.
If @wattanx and I have no disagreement, I will draft a Module Listing Request Issue on my end.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@iconify-json/heroicons, @iconify-json/simple-icons, @nuxthq/studio, @types/node, eslint, nuxt, pnpm, vitest)
• chore(deps): update nuxt core (@nuxt/content, @nuxt/kit, @nuxt/schema)
• chore(deps): update pandacss to ^0.33.0 (@pandacss/dev, @pandacss/node)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

観測したバグ・原因

発生した事象

configPath オプションを利用してpanda.config.tsの設定を行いました。
すると、panda.configで設定した内容がstyled-system/*に反映されていませんでした。

備考1：/playground/nuxt.config.tsと同様の設定を行った場合、問題ない設定の反映を確認済み。
備考2: nuxt.config.tsで設定した場合、@pandacss/preset-pandaを用いたpresetsテーマの利用も問題なく出来ています。

原因

findConfigFile()関数を用いてpanda.configのサーチを行っているが、引数でoptions.configPathを渡していない。
options.configPathを渡していないため、options.configPathの設定可否に関わらず<buildDir>/panda.config.mjsが生成される形となる。

対応PR

• resolves #19

Context

Components stories such as Storybook, Histoire, etc. are often prepared for web application development.
With vite support for Storybook, I believe there are many opportunities for users to use Storybook together with Panda CSS Module (I use Panda CSS + Storybook + Storybook Module in my product development).

Considering the opportunities for users, it would be great if Panda CSS Module can provide storybook: boolean option + automatic setup.
However, we also think it is beyond the responsibility of Panda CSS Module. Might as well keep it to "clearly state how to use in Docs".

So, I would like to hear the owner's ( @wattanx ) view.

Design: if you want to provide a storybook option.

if storybook(sb) = true:

1. install Storybook Module and npx storybook-module init
2. add Storybook Module to nuxt.config.ts

Note

We consider the result of the discussion of this feature to have an impact of one minor version up.
Therefore, we recognize that the priority of response and discussion is low (because it does not require urgency, such as a malfunctioning bug).

Ref

• Panda CSS Docs
  • https://panda-css.com/docs/installation/storybook

• Create a Configuration Viewer like @nuxtjs/tailwindcss.
• #53

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@nuxtjs)

Context

現在、aliasオプションはstyled-system固定値となっている。

• src/module.ts#L54-L56

outdir名を変更した場合、このalias設定が固有値なためimportで失敗する。
例えば、outdir: .pandacssに変更した場合などである。

そこでalias OptionsをNuxt Module Optionsとしてサポートする。

Note

本PRと合わせて以下2点のrefactorも混ぜられたらと考えています(レビュー対応数の削減目的。目的ごとにPR分けた方がよければPR分けます。言及なければ混ぜてしまいますのでお気軽に指摘ください)　

• from '@nuxt/kit'からのimport
  • 73cb2e7 対応時にミスっていました
  • https://github.com/wattanx/nuxt-pandacss/blob/main/src/resolvers.ts#L1
• types.tsファイルの用意
  • 本PRのようにオプションが増えることを考慮してtypes.tsを用意
  • ディレクトリ構成などはNuxt Tailwindからインスパイアを受けています

support for auto imports of patterns and jsx

Uncomment the presets and try it in the playground and see that it doesn't work.
https://github.com/wattanx/nuxt-pandacss/blob/main/src/imports/presets.ts#L13-L65