Plugin not working

[aress31]

The plugin does not seem to work/lint my typescript code. Please see my following configuration:

• .stylelintrc.json:

{
  "extends": "stylelint-config-recommended",
  "plugins": [
    "stylelint-a11y",
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "order/properties-order": [
      "width",
      "height"
    ]
  }
}

• packages.json:

--- SNIP ---
scripts {
--- SNIP ---
"lint:stylelint": "stylelint \"**/*.{css,ts}\" --ignore-path .gitignore",
--- SNIP ---
},
"devDependencies": {
    --- SNIP ---
    "stylelint": "^13.6.1",
    "stylelint-a11y": "^1.2.3",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-order": "^4.1.0",
    --- SNIP ---
}

• Sample of my CSS in JS codes:

mwc-icon-button {
  --mdc-icon-button-size: 40px;
  --mdc-icon-size: 28px;
  border-radius: 50%;
  box-shadow: 0px 0px 3px var(--text-secondary-color);
}

• Output of yarn lint:stylelint:

PS C:\Users\ateyar\Documents\GitHub\open-wc> yarn lint:stylelint
yarn run v1.22.4
$ stylelint "**/*.{css,ts}" --ignore-path .gitignore

src/styles/common.css.ts
 38:3  ×  Unexpected unknown type selector "mwc-select"      selector-type-no-unknown
 52:3  ×  Unexpected unknown type selector "mwc-textfield"   selector-type-no-unknown
 53:3  ×  Unexpected unknown type selector "mwc-textarea"    selector-type-no-unknown

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Am I doing anything wrong here? 🤔

[hudochenkov]

You code example doesn't have any order violation according to your config.

[aress31]

Sorry it was just a bad example then, my bad...

@hudochenkov do you see anything wrong with my config?

[hudochenkov]

Config looks good.

[aress31]

@hudochenkov I don't understand why I am getting no stylelint errors/warnings then, for example in my footer.ts nothing is alphabetically ordered:

      div:first-child {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--divider-color);
        margin-bottom: 2em;
      }
      div:last-child {
        margin-top: 2em;
        border-top: 1px solid var(--divider-color);
        grid-column: 1 / -1;
      }

And when running stylelint with the configuration in detailed in my previous posts:

PS C:\Users\ateyar\Documents\GitHub\open-wc> yarn lint:stylelint
yarn run v1.22.4
$ stylelint "**/*.ts" --ignore-path .gitignore

src/styles/common.css.ts
 38:3  ×  Unexpected unknown type selector "mwc-select"      selector-type-no-unknown
 52:3  ×  Unexpected unknown type selector "mwc-textfield"   selector-type-no-unknown
 53:3  ×  Unexpected unknown type selector "mwc-textarea"    selector-type-no-unknown

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[hudochenkov]

There is no alphabetic order specified in your config. If you want alphabetical order, then you need to use properties-alphabetical-order rule instead of properties-order:

{
  "extends": "stylelint-config-recommended",
  "plugins": [
    "stylelint-a11y",
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
-    "order/properties-order": [
-      "width",
-      "height"
-    ]
+    "properties-alphabetical-order": true
  }
}

[aress31]

That's now working, thank you so much @hudochenkov!

Quick extra questions to get my project finally set up with stylelint-order:

1. How can I apply the alphabetical sorting rule to custom CSS properties? Right now it seems not to be working on them.
2. How can I enforce removing all blank-lines in my CSS?

[hudochenkov]

Sorry, I somehow missed this.

1. There is a proposal for such rule: Add custom-properties-alphabetical-order rule #104. But no one implemented it yet.
2. You probably need declaration-empty-line-before and other *-empty-line-before rules.