Strange behaviour on unwrapping nested elements

[talyguryn]

Found strange behaviour on my code and tried to test on example. Correct me if I'm wrong please.

Code from readme

✅ OK for postcss-nested@5.0.1

❌ WRONG for postcss-nested@5.0.2-postcss-nested@5.0.6

.postcssrc.yml

plugins:
  # Consumes files by @import rule
  # https://github.com/postcss/postcss-import
  postcss-import: {}

  # Convert modern CSS into something most browsers can understand
  # https://github.com/csstools/postcss-preset-env
  postcss-preset-env:
    # Polyfill CSS features
    # https://github.com/csstools/postcss-preset-env#stage
    #
    # List of features with levels: https://cssdb.org/
    stage: 0

    # Define polyfills based on browsers you are supporting
    # https://github.com/csstools/postcss-preset-env#browsers
    browsers:
      - 'last 2 versions'
      - '> 1%'

    # Instruct all plugins to omit pre-polyfilled CSS
    # https://github.com/csstools/postcss-preset-env#preserve
    preserve: false

  # Nested rules unwrapper
  # https://github.com/postcss/postcss-nested
  #
  # As you know 'postcss-preset-env' plugin has an ability to process
  # 'postcss-nesting' feature but it does not work with BEM
  # Report: https://github.com/csstools/postcss-preset-env/issues/40
  postcss-nested: {}

  # Compression tool
  # https://github.com/cssnano/cssnano
#  cssnano: {}

[ai]

Can you post an input example as a text, so I can copy paste it?

[talyguryn]

Tested code

.phone {
    &_title {
        width: 500px;
        @media (max-width: 500px) {
            width: auto;
        }
        body.is_dark & {
            color: white;
        }
    }
    img {
        display: block;
    }
}

.title {
  font-size: var(--font);

  @at-root html {
      --font: 16px
  }
}

hm, sorry. might be not postcss-nested problem. i think this is my bad with the wrong order of plugins.

but it is still strange to get this unpacking by postcss-preset-env 🤔

[ai]

Seems like you are using postcss-nesting (another plugin, it used by postcss-preset-env). It based on CSS spec and has another syntax. You need @nest body.is-dark & (if your selector started not from & you need @nest prefix).