storybook [Bug]: 更新到最新版本后出现嵌套CSS警告

y3bcpkx1  于 6个月前  发布在  其他
关注(0)|答案(7)|浏览(67)

描述问题

在升级到 @latest 版本后,我收到了以下警告:

这些样式不存在于我的项目中,我们会尽力避免使用嵌套的CSS。

重现方法

从今天开始迁移到 @latest 版本。

系统信息

Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.1.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.0 - /opt/homebrew/bin/npm
    pnpm: 8.10.2 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 124.0.6367.203
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: ^8.1.1 => 8.1.1 
    @storybook/addon-interactions: ^8.1.1 => 8.1.1 
    @storybook/addon-links: ^8.1.1 => 8.1.1 
    @storybook/addon-svelte-csf: ^4.1.2 => 4.1.2 
    @storybook/addon-themes: ^8.1.1 => 8.1.1 
    @storybook/blocks: ^8.1.1 => 8.1.1 
    @storybook/preview-api: ^8.1.1 => 8.1.1 
    @storybook/svelte: ^8.1.1 => 8.1.1 
    @storybook/sveltekit: ^8.1.1 => 8.1.1 
    @storybook/test: ^8.1.1 => 8.1.1 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.1.1 => 8.1.1 
    storybook-dark-mode: ^4.0.1 => 4.0.1

附加背景信息

警告提到了安排Tailwind插件的顺序。我们确实使用了Tailwind,但我们没有使用Tailwind嵌套CSS插件。再次强调,我们会尽力避免嵌套。

1qczuiv0

1qczuiv01#

我确认通过更新到TailwindCSS v3.4.3,警告不再显示。

hsvhsicv

hsvhsicv2#

在Nuxt项目中,我也遇到了同样的问题。我通过在项目侧引入tailwindcss/nesting来抑制警告。

cunj1qz1

cunj1qz13#

@onishi-kohei 很高兴知道。不幸的是,我们更愿意避免额外的依赖。

k97glaaz

k97glaaz4#

我认为也是如此。

xurqigkl

xurqigkl5#

同样的警告,但是针对一个Lit项目。我们正在使用tailwindCSS,但没有嵌套CSS。

huus2vyu

huus2vyu6#

在React中也存在同样的问题。

a1o7rhls

a1o7rhls7#

我更新了相关包到最新版本,似乎已经修复或抑制了嵌套CSS警告。
以下是包的版本:

"postcss": "8.4.38",
    "tailwindcss": "3.4.3",
    "vite": "5.2.12",

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

相关问题