Not working in 1.20.0 insider: nothing happens

[smlombardi]

Environment

• VSCode Version: 1.20.0-insider 2017-12-20T06:03:37.761Z
• OS Version: 10.12.6

Actual behavior

Run command on an SCSS file. Nothing changes.

Expected behavior

Expect attributes to sort

Steps to reproduce

Unless I am missing something obvious?

[mrmlnc]

Hello, @smlombardi,

You can provide your configuration (settings) for this plugin?

[smlombardi]

I assumed it would just use default settings, unless I provided something else. Is a settings file required anyway? That's not clear.

[smlombardi]

I created a .postcss-settings.json file at the root of my project:

{
  "postcssSorting.config": {
    "order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "at-rules",
      "rules"
    ],
    "properties-order": "alphabetical"
  }
} 

I open a scss file, run the plugin. The file says it's "dirty" (dot in the tab), but there have been no changes to the file. I deliberately chose "alphabetical" as it would be easy to spot.

Is there any other info I can provide? Here is a typical scss file I was trying to work with.

[smlombardi]

UPDATE: I can only get "alphabetical" to work, and only if I add the settings object to my vscode settings; it does not work with the external file I described above. Using any array of attributes does nothing.

[xxvis]

+1 @smlombardi experiencing the same thing. Can only get "alphabetical" to work.

[ebrahimiaval]

I fixed and say in this issue.

[RedDragon2X5]

Hi, @mrmlnc are you still maintaining this extension, Denis? I understand things might be a bit crazy with all the crap happening at the moment, but if you are that will be great news! I'm also having issues with getting your extension working in VS Code,

I'm using all your default config settings as per the repo docs,

// VS Code Settings.json
{...
  "postcssSorting.config": {
    "order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "at-rules",
      "rules"
    ],
    "properties-order": ["display", "position", "top", "right", "bottom", "left"]
  }
...}

I even tried the most basic config:

// VS Code Settings.json
{ ... 
//PostCSS Sorting - Does not seem to work at all - PostCSS Sort is doing nothing 9 Feb 2023
  "postcssSorting.config": {
    "properties-order": "alphabetical"
  },

... },

My current VS Code Ver & operating system environment: Version: 1.75.0 (system setup) Commit: e2816fe719a4026ffa1ee0189dc89bdfdbafb164 Date: 2023-02-01T15:23:45.584Z Electron: 19.1.9 Chromium: 102.0.5005.194 Node.js: 16.14.2 V8: 10.2.154.23-electron.0 OS: Windows_NT x64 10.0.19045 Sandboxed: No

VS Code Settings JSON (relevance)

// VS Code Settings.json
{ ... 
//PostCSS Sorting - Does not seem to work at all - PostCSS Sort is doing nothing 9 Feb 2023
  "postcssSorting.config": {
    "properties-order": "alphabetical"
  },

... },

Actual behaviour

Using the following random snippet (part of a full CSS File)

code[class*='language-'],
pre[class*='language-'] {
  background: 0 0;
  text-shadow: 0 1px #fff;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  color: #000;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

Run the command on a vanilla CSS file. Nothing changes.

Expected behaviour

Expect attributes to sort: color: #000;, hyphens: none; etc. to be moved up in the class

Steps to reproduce

Am I missing something obvious? Could it be an issue with Prettier being my main formatted? Maybe another formatted that interferes? For example:

  "vetur.validation.template": true,
  // * Other Linters
  // + Other Linters - CSS
  "css.lint.float": "error",
  "css.lint.compatibleVendorPrefixes": "warning",
  // ...
  "css.lint.validProperties": [
    "some-unknown-CSS-property-that-must-not-be-validated"
  ],
  // + Other Linters - SCSS
  "scss.lint.float": "error",
  "scss.lint.compatibleVendorPrefixes": "warning",
  // ...
  "scss.lint.validProperties": [
    "some-unknown-scss-property-that-must-not-be-validated"
  ],
  // + Other Linters - LESS
  "less.lint.float": "error",
  "less.lint.compatibleVendorPrefixes": "warning",
  // ...
  "less.lint.validProperties": [
    "some-unknown-LESS-property-that-must-not-be-validated"
  ],

Your guidance will be appreciated. Thanks, Andre.