Alphabetical order exception for overriding shorthand declaration?

[spaceninja]

When I have order/properties-alphabetical-order I get a conflict with the following code:

.foo {
    border-color: red;
    border-bottom-color: yellow;
}

If I sort alphabetically, then the bottom border color gets overridden by the shorthand. Is there a way to resolve this?

[hudochenkov]

It's possible by using properties-order only. You can create a list of all properties in a config, sort them alphabetically and then fix whatever seems incorrect.

[hudochenkov]

Currently, there is only one exception from “true” alphabetical order: prefixed properties will go before their unprefixed versions. properties-alphabetical-order could be improved to avoid situations with shorthands overwrites. declaration-block-no-shorthand-property-overrides has good shorthands reference.

The same exceptions should be added to postcss-sorting as it's used for autofixing. We can't have linting and autofixing have different rules to achieve same order.

I'm not interested in alphabetical order, so I'm labeling this issue as help wanted.

[jamesarosen]

It's possible by using properties-order only.

That's true, though there are at present 550 standard CSS properties. Maintaining that list for almost-but-not-quite alphabetization would be tiresome.

I'm happy to submit a PR for this. Can you provide some direction? What do you think of this?

// rules/checkAlphabeticalOrder.js
const postcss = require('postcss');
const shorthandData = require('stylelint/lib/reference/shorthandData')

module.exports = function checkAlphabeticalOrder(firstPropData, secondPropData) {
        // OK if the first is shorthand for the second:
        if (shorthandData(firstPropData.unprefixedName).includes(secondPropData.unprefixedName)) {
          return true;
        }

        // Not OK if the second is shorthand for the first:
        if (shorthandData(secondPropData.unprefixedName).includes(firstPropData.unprefixedName)) {
          return false;
        }

    // If unprefixed prop names are the same, compare the prefixed versions
    if (firstPropData.unprefixedName === secondPropData.unprefixedName) {
        // If first property has no prefix and second property has prefix
        if (
            !postcss.vendor.prefix(firstPropData.name).length &&
            postcss.vendor.prefix(secondPropData.name).length
        ) {
            return false;
        }

        return true;
    }

    return firstPropData.unprefixedName < secondPropData.unprefixedName;
};

I worry that lib/reference/shorthandData isn't party of stylelint's public API.

[hudochenkov]

It's a good start. Copy shorthandData.js to this repository. It's unsafe to use unofficial APIs.

[jamesarosen]

Should I also copy shorthandData.js into postcss-sorting? I need it there to make the tests for this module pass since they make assertions about the corrections.

[hudochenkov]

@jamesarosen yes.

[jamesarosen]

See hudochenkov/postcss-sorting#85

[jamesarosen]

See #91

[hudochenkov]

3.0.1 released! Thank you very much, @jamesarosen!