search

postcss / postcss-nested

PostCSS plugin to unwrap nested rules like how Sass does it.
MIT License
1.15k stars 66 forks source link

Ampersand class concat not working #154

Closed projct1 closed 1 year ago

projct1 commented 1 year ago

Hiho!

.scrollable {
    overflow-x: auto;
    mask-image: linear-gradient(to right, white 90%, transparent);

    &--invert {
        mask-image: linear-gradient(to left, white 90%, transparent);
    }
}

Styles for scrollable--inver not applies. Its excepted or...? My postcss.config.js:

module.exports = {
  plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': 'postcss-nesting',
      tailwindcss: {},
      autoprefixer: {},
  },
}

I use vite as bundler.

ai commented 1 year ago

What is CSS output?

projct1 commented 1 year ago

Sure, i forgot:

.scrollable {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, white 90%, transparent);
    mask-image: linear-gradient(to right, white 90%, transparent)
}

--invert.scrollable {
    -webkit-mask-image: linear-gradient(to left, white 90%, transparent);
    mask-image: linear-gradient(to left, white 90%, transparent)
}

Looks like a bug.

ai commented 1 year ago

You are using postcss-nesting (CSS spec syntax), this is postcss-nested repo (Sass-like syntax).

You need to report an issue to another plugin.