[Bug]: Nested CSS warning after updating to latest release

[endigo9740]

Describe the bug

I'm receiving the following warnings after updating to the @latest release:

These styles are not present within my project, and we go out of our way to avoid using nested CSS.

To Reproduce

Migrate to the @latest release as of today.

System

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

Additional context

The warning mentions arranging the order of Tailwind plugins. We do use Tailwind, but we do not use the Tailwind Nested CSS plugin. Again, we go out of our way to avoid nesting.

[onishi-kohei]

@endigo9740 In a Nuxt project, I also encountered the same issue. I was able to suppress the warning by introducing tailwindcss/nesting on the project side.

import tailwindcssNesting from 'tailwindcss/nesting'

const config = {
  vite: {
    css: {
      postcss: {
        plugins: [tailwindcssNesting]
      }
    }
  }
}

export default config

[endigo9740]

@onishi-kohei good to know. Unfortunately we would rather avoid the extra dependency.

[onishi-kohei]

@endigo9740 I think so too.

[YannDuv]

Same warning, but with a Lit project. We are using tailwindCSS but no nesting CSS.

2:16:07 PM [vite] ✨ optimized dependencies changed. reloading
[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
125|      box-sizing: border-box;
126|  
127|      & ol {
   |      ^^^^^^
128|        padding-left: 18px;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^
129|        margin: 0;
   |  ^^^^^^^^^^^^^^^^
130|      }
   |  ^^^^^

[brycenaddison]

Same issue in React as well

[l0kt33n]

I updated the related packages to latest, and it seems to have fixed or suppress the nested CSS warning.

These are the package versions.

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

postcss.config.js

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

[pawelgalazka]

I can confirm that by updating to TailwindCSS v3.4.3, warning is not displayed anymore