wattanx / nuxt-pandacss Goto Github PK
View Code? Open in Web Editor NEWPanda CSS module for Nuxt.
License: MIT License
Panda CSS module for Nuxt.
License: MIT License
私は普段のNuxt開発においてstyled-system
をAuto-importsして利用しています。
Auto-imports設定を利用することでcss()
、cva()
、stack()
などよく使用するメソッドをimport不要で使え開発体験が向上しています。
本モジュール側でNuxt Auto-imports機能をサポートできるとユーザー側での追加設定が不要となり、開発体験にに良い影響を与えられるのではないかと考えています。
そのため、本モジュールにおけるAuto-imports
optionの追加可否を検討できたらと思っています。
昨今、Nuxtモジュール側でAuto-importsをサポートする例が増えています。例えば、以下のモジュールです。
また@vueuse/nuxtモジュールは設定不要でAuto-imports機能が利用できる様になっています。
以上のように、Nuxtモジュール側でAuto-importsの設定可否を選択できるモジュールは今後も増えてくることが予想されます。
他モジュールと開発体験を合わせることでユーザー体験に良い影響を与えられるのではないかと考えています。
autoImports
optionを追加し、設定値によってauto-importsの設定追加可否を決定する。
下記の設定方法@vee-validate/nuxt
を参考にしています。
// types.ts
export interface ModuleOptions extends Config {
configPath?: string;
cssPath?: string;
+ /**
+ * @default 'false'
+ */
+ autoImports: boolean;
}
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?
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.
These problems occurred while renovating this repository. View logs.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@iconify-json/heroicons
, @iconify-json/simple-icons
, @nuxthq/studio
, @types/node
, eslint
, nuxt
, pnpm
, vitest
)@nuxt/content
, @nuxt/kit
, @nuxt/schema
)@pandacss/dev
, @pandacss/node
).github/workflows/ci.yml
actions/checkout v4
actions/setup-node v4
.github/workflows/release-please.yml
google-github-actions/release-please-action v4.0.2@cc61a07e2da466bebbc19b3a7dd01d6aecb20d1e
.github/workflows/release.yml
actions/checkout v4
pnpm/action-setup v3.0.0
actions/setup-node v4
docs/package.json
@iconify-json/heroicons ^1.1.19
@iconify-json/simple-icons ^1.1.90
@nuxt/content ^2.11.0
@nuxtjs/fontaine ^0.4.1
@nuxtjs/google-fonts ^3.1.3
nuxt-og-image ^2.2.4
@nuxthq/studio ^1.0.10
package.json
@nuxt/kit 3.9.3
@pandacss/dev ^0.27.3
@pandacss/node ^0.27.3
pathe ^1.1.2
@nuxt/devtools ^1.0.8
@nuxt/eslint-config ^0.2.0
@nuxt/module-builder ^0.5.5
@nuxt/schema 3.9.3
@nuxt/test-utils 3.11.0
@types/node ^20.11.10
changelogen ^0.5.5
eslint ^8.56.0
nuxt 3.9.3
vitest ^1.2.2
pnpm 8.15.0
playground/package.json
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
が生成される形となる。
Line 59 in 1830f51
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.
if storybook(sb) = true:
Storybook Module
and npx storybook-module init
Storybook Module
to nuxt.config.tsWe 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).
@nuxtjs/tailwindcss
.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)
現在、alias
オプションはstyled-system
固定値となっている。
outdir名を変更した場合、このalias設定が固有値なためimportで失敗する。
例えば、outdir: .pandacss
に変更した場合などである。
そこでalias OptionsをNuxt Module Optionsとしてサポートする。
本PRと合わせて以下2点のrefactorも混ぜられたらと考えています(レビュー対応数の削減目的。目的ごとにPR分けた方がよければPR分けます。言及なければ混ぜてしまいますのでお気軽に指摘ください)
from '@nuxt/kit'
からのimport
types.ts
ファイルの用意
types.ts
を用意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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.