Whenever I open a PostCSS file the I get an error in the PostCSS language Server:

[Error - 15:30:18] (node:11705) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

Extension version: v2.1.0
VSCode version: 1.51.1

given this example

.Text {
    &__bold {
        font-weight: bold;
    }
    &__red {
        color: red;
    }

    &__bold&__red {
        border: 1px red solid;
    }
}

produces such highlight

but it should look like this (but without comma)

I get an error when typing :host selector:

TypeError: Cannot read property '0' of undefined at Parser.decl (/Users/equinusocio/.vscode/extensions/shinnn.stylelint-0.24.0/node_modules/postcss/lib/parser.js:203:25) at Parser.other (/Users/equinusocio/.vscode/extensions/shinnn.stylelint-0.24.0/node_modules/postcss/lib/parser.js:170:18) at Parser.loop (/Users/equinusocio/.vscode/extensions/shinnn.stylelint-0.24.0/node_modules/postcss/lib/parser.js:81:26) at parse (/Users/equinusocio/.vscode/extensions/shinnn.stylelint-0.24.0/

contain property is marked as unknown property.

Specs:

• https://drafts.csswg.org/css-containment/

Other links:

• https://developer.mozilla.org/en-US/docs/Web/CSS/contain
• https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#containment

When I press vscode‘s shortcut ctrl - /, the comments style is double slash comments style //, How can I use /* comments */ rather than //comments ? Thanks😊

Add allow custom property like "box: horizontal", "lost". Best way get this from stylelint rules:

"property-no-unknown": [true, {ignoreProperties: ['/lost*/', 'box', 'size']}],

For the details please look at: https://stackoverflow.com/questions/65529731/how-to-enable-scss-highlighting-and-formatter-in-style-tag

Is it possible to do that with the plugin?

I don't suppose it would be possible to add support so that CSS Next variables in a separate file like below could pop up in my Intellisense autocomplete when I start typing something like z-index: var(--zind in another file?

:root {
  --zindex-dropdown: 1000;
  --zindex-overlay: 2000;
  --zindex-modal: 3000;
}

It would be hugely amazingly helpful if this were possible though!

http://cssnext.io/features/#custom-properties-set-apply

I am having trouble getting PostCSS mixins to work, the syntax is correct and the intellisense is spitting out syntax errors, everything else with the package works great it's just a bit of a bother to see errors when working with PostCSS that should be valid. Is there any work around for this, for that matter is anyone else experiencing a similar issue.

Hello,

with this plugin enabled I can't see color box like this:

With plugin enabled it disappears.

File: .css.
VS Code: 1.11
OS: Linux Ubuntu 16.04

See #6 for details.
Ideally these features should work in any language where language were injected, however it is require to investigate if there is a possibility to do so.

I use Stylelint in a project with Postcss which defines some non-standard css properties and rules.

In my workspace settings I have

  "css.validate": false,
  "scss.validate": false

Which is supposed to suppress validation warnings for css and scss. When I have this plugin installed with

  "files.associations": {
    "*.css": "postcss"
  }

I can not disable the warnings

Is it possible to turn off the validation while retaining auto complete?

Hi,
Do you plan to add support for cssnext? More exacly I need http://cssnext.io/features/#custom-media-queries.

How to enable CSS Modules support in this extension?

Hi! Thanks for this plugin. Seems bug related to #3 and #4.
In postcss language and VS CODE 1.15.1 color square and autocomplete working good, but not emmet abbreviations :(
In usual css/less/sass language all fine. Can we fix that somehow?

Please add support of styled-jsx-postcss.

Example app with styled-jsx-postcss:

export default () => (
  <div className='hello'>
    <p>Hello World</p>
    <style jsx>{`
      :global(:root) {
        --bgColor: green;
        --color: white;
      }
      .hello {
        font: 15px Helvetica, Arial, sans-serif;
        background: var(--bgColor);
        color: var(--color);
        padding: 100px;
        text-align: center;
        transition: 100ms ease-in background;
      }
      .hello:hover {
        color: color(var(--color) blackness(+80%));
      }
    `}</style>
  </div>
)

Also we have vscode-styled-jsx without support of postcss.

Hi mate,

Best postcss highlighter I've found. Though, unfortunately, this extension disables Bracket Pair Colorizer from working within the given PostCSS file.

These are the only language modes I'm aware of that prevent the Bracket Pair Colorizer package from working for a file.

See #6 for details.

sex mod very nice

can I add formatting functionality to it somehow? imagine SASS mod

I just want to say thank you, this is must to have plugin if you're working with CSS. 👍

Hello,

if this plugin is enabled the autocomplete disappears, because the language mode is changed from CSS to PostCSS, I really like VS Code autocomplete, because it helps a lot, it will be very good to somehow fix this issue by having CSS language mode with coloring or PostCSS language mode, but with autocomplete.

Hello! I am using mixin in my postcss, but I have a warning from vscode. How can this be fixed? thank

Using this extension, I don't see the values in the autocomplete for css properties anymore.

Expected behavior:

Actual behavior:

Hello,

I think it's better to turn off by default .css icons, because I like to use this plugin https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons which have really good icons for VS Code and right now my .css files look like this:

So my suggestion is to turn off by default icons for .css files and let people decide if they want use it.

File: .css.
VS Code: 1.11
OS: Linux Ubuntu 16.04

P.S. Tested, seems this happens only with this https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons enabled.

Suggestions don't work after last vscode update (v1.37.1)

Hi,
would it be possible to allow mixins ?

I don't see syntax highlighting of *.pcss files with last version of VS Code, 1.30.2 currently.

I'm currently using postcss-nested, but this is valid for cssnext nesting features too.

When a rule is nested, the autocomplete only display values for pseudo-classes:

Since extension was updated to 2.0.3 /**/ comments now work as expected, but all nested rules are now being marked as errors. Is it possible this has something to do with the update or did I do anything wrong? Previously I had no problems with nested styles. Thanks!

These are new specs supported by cssnext, but are flagged by the extension.

See http://cssnext.io/features/#custom-properties-set-apply, http://cssnext.io/features/#custom-media-queries, and http://cssnext.io/features/#custom-selectors

If there's an option to turn off the linting support that would also be fine with me because I'm usually using stylelint with postcss anyway.

When using the postcss syntax, the command Toggle Line Comment adds a commentary to the css line using two slashes:

This syntax is from SASS commentaries, so this extension should add a comment with the original css syntax:

We are using postcss-mixins and we are getting some highlighting errors.

Is that to be expected or something we should add/configure.

What would it take to add postcss-mixins support? We can try to see if we can help.