search

hudochenkov / postcss-sorting

PostCSS plugin to keep rules and at-rules content in order.
MIT License
517 stars 31 forks source link

Clarification on Using Via postcss-cli #72

Closed tohuw closed 7 years ago

tohuw commented 7 years ago

Per #42, it isn't clear how to use this command via CLI. I tried the following, and no sorting occurred in my test file:

postcss test.css -u postcss-sorting -c .postcssrc.json -r --no-map
✔ Finished test.css (11 ms)

Test file:

body {
  background-color: red;
  font-size: 1em;
  margin-right: 2rem;
  line-height: 4;
  border: 1px solid purple;
}
tohuw commented 7 years ago

Whoops, my .postcssrc.json:

{
    "properties-order": [
    "margin",
    "padding",
    "border",
    "background"
    ]
}

postcss-sorting is v4.1.1, by the way.

mrmlnc commented 7 years ago

Why you think that postcss-sorting supports config in the .postcssrc.json file?

Sorry, maybe it provided by postcss.

tohuw commented 7 years ago

@mrmlnc I'm not confident of the syntax of the sorting file, and welcome any commentary on that also. Right now, I just can't get your VSCode plugin, or postcss-sorting itself via CLI, to work at all. Any help is appreciated. Thanks!

tohuw commented 7 years ago

Enhanced the test case a bit:

Contents of test.css

body {
  border: 1px solid purple;
  background-color: red;
  font-size: 1em;
  margin-right: 2rem;
  line-height: 4;
  display: block;
}

Contents of sort.json

{
    "order": [
        "custom-properties",
        "dollar-variables",
        "declarations",
        "at-rules",
        "rules"
    ],

    "properties-order": "alphabetical",

    "unspecified-properties-position": "bottom"
}

Syntax

postcss -u postcss-sorting -c sort.json  --no-map -r test.css

The file does not change, even though postcss returns an exit code 0. Conversely, something like the below does what it should:

postcss -u cssnano  --no-map -r test.css
hudochenkov commented 7 years ago

@tohuw I never used PostCSS CLI, but I see your config is not what PostCSS CLI expects. Please, take a look at its documentation.

tohuw commented 7 years ago

Ack, you're completely right, of course. I thought I could simply pass the options for your relevant plugins to it, but I now realize I need a formal structure (which made plenty of sense when I RTFM). It works now, thanks so much!

This is a working css sort test with postcss-cli:

Contents of test.css

body {
  border: 1px solid purple;
  background-color: red;
  font-size: 1em;
  margin-right: 2rem;
  line-height: 4;
  display: block;
}

Contents of postcss.config.js

module.exports = (ctx) => ({
  plugins: {
    'postcss-sorting': {
      'order': [
        'custom-properties',
        'dollar-variables',
        'declarations',
        'at-rules',
        'rules'
      ],

      'properties-order': 'alphabetical',

      'unspecified-properties-position': 'bottom'
    }
  }
})

Syntax

postcss -c postcss.config.js  --no-map -r test.css
hudochenkov commented 7 years ago

@tohuw would you mind creating a documentation PR for using this plugin via PostCSS CLI, please? It would help other users.