postcss nesting only works with '.' as nested class

[odc-john]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

vscode

  "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]

tsconfig

 {
        "name": "typescript-plugin-css-modules",
        "options": {
          "useConfig": true
        }
      }

postcss config

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nested': {},
    'postcss-custom-media': {
      importFrom: __dirname + '/src/styles/variables/media.css'
    },
    // TODO: remove after demo
    // demo of css after minify. specifically merging media
    'postcss-pxtorem': {
      propList: ['*'],
      mediaQuery: true
    }
  }
};

Should be able to styles.TagBar. Only Tag shows

.Tag {
  position: relative;

  display: flex;
  width: 118px;
  height: 38px;

  color: var(--tag-color);

  background: var(--tag-bg);

  border-radius: 3px;

  &Bar {
    width: 4px;
    height: 100%;

    background: var(--tag-bar-bg);

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  &Label {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    margin: 4px;

    font-weight: 500;
    font-size: 14px;
  }
}

Using '.' in nested shows styles.Bar

.Tag {
&.Bar {}
}

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[mrmckeb]

Hi there, sorry for the slow reply.

Are you able to supply a reproduction repo? Just something very simple.

I can then take a look and hopefully fix this! I'm not 100% sure why this isn't working right now, but I'll do my best to get to the bottom of it :)

[IanVS]

It seems that what you're trying to do is not permitted in the css nesting spec. The nesting selector (&) is not as powerful as it is in Sass, as laid out in this comment: w3c/csswg-drafts#2701 (comment), and apparently the Sass creators wish they hadn't built that functionality either: w3c/csswg-drafts#2937 (comment)

Also, not that it helps, but I think there's a missing level for postCssOptions in your config. I believe it should be:

{
  "name": "typescript-plugin-css-modules",
  "options": {
    "postCssOptions": {
      "useConfig": true
    }
  }
}

[mrmckeb]

Thanks for the help @IanVS - I didn't spot the options error myself, so great pickup!

I'll close this off, as it's very likely the cause. Please reopen if that doesn't help @odc-john!