postcss-sorting not working as expected

[code-siyeon]

Hello,

I'm currently using the postcss-sorting plugin in my project, but it doesn't seem to be working as expected. I've created a new file called postcssSorting.config.js and added the provided code into it. Despite this, the sorting order of my CSS properties does not change.

My environment is as follows:

(vs code v1.842 , postcsssorting v3.0.1, prettier-code formatter v10.1.0, Node.js Modules Intellisense v1.5.0 Node.js v18.150 os windowX64) Here are the steps I've taken:

I installed the necessary packages as devDependencies in my package.json. I created a new file postcssSorting.config.js and added the sorting order code into it. I ran my build script.

I also registered the keyboard shortcuts and tried running it by pressing F1. Despite these efforts, the problem still persists.

Expected Result: The CSS properties in my files should be sorted according to the order specified in the postcssSorting.config.js file.

Actual Result: The CSS properties are not being sorted as specified, and remain in their original order.

I did not get any error messages during this process. I'm not sure what I'm missing or doing wrong. Any help would be greatly appreciated.

Thank you.

a. naver clone.zip

Additionally, as I am not a native English speaker, it would be greatly appreciated if you could explain the solution in simple terms. Thank you in advance for your understanding and assistance.

[hudochenkov]

I think you just need to rename postcssSorting.config.js to postcss.config.js.

[code-siyeon]

Even after renaming the file from postcssSorting.config.js to postcss.config.js, the issue still persists. Further action seems to be required.

[hudochenkov]

It did work for me for PostCSS CLI:

npx postcss --no-map --replace your-css-file.css

For VS Code extension reach out to the extension repository. I didn't build it, and never used it. Can't help with it.

[code-siyeon]

Thank you very much for your assistance, even though you've don't created it. I'll give it a try. Very appreciated."

[hudochenkov]

No problem. Hope you will find solution soon.

[smorrisods]

@code-siyeon, did you find a solution? I've been running into something that seems similar to what you describe here. I run postcss-sorting as part of my postcss.config.js plugins but it doesn't seem to do anything at all.

My postcss.confic.js is as follows:

module.exports = {
    plugins: [
        require("postcss-merge-rules"),
        require("postcss-combine-duplicated-selectors")({
            removeDuplicatedValues: true,
        }),
        require("postcss-sorting")({
            order: [
                "at-rules",
                "custom-properties",
                "dollar-variables",
                "declarations",
                "rules",
            ],
            "properties-order": "alphabetical",
            "unspecified-properties-position": "bottom",
        }),
    ],
};

My input CSS is:

body {
    color: black;
}

body {
    background: white;
}

@font-face {
    font-family: "Open Sans";
    src: url("open-sans.woff2") format("woff2");
}

@media (max-width: 600px) {
    body {
        color: white;
    }
}

@import "base.css";

My output CSS is:

body {
    background: white;
    color: black;
}

@font-face {
    font-family: "Open Sans";
    src: url("open-sans.woff2") format("woff2");
}

@media (max-width: 600px) {
    body {
        color: white;
    }
}

@import "base.css";

I expect the @-rules to be at the top based on all the examples I've looked at, but they just stay in place.

Upon more research it seems the at-rules order option only works on nested at-rules and not top level at rules.

[code-siyeon]

"I'm sorry for the delay. I gave up the issue and deleted the plug-in."