stylelint: Add autofix to declaration-block-no-duplicate-properties

What is the problem you’re trying to solve?

I have set the Stylelint config to remove duplicate CSS properties and values as below.

        "declaration-block-no-duplicate-properties": [
            true,
            {
                "ignore": ["consecutive-duplicates-with-different-values"]
            }
        ],

I want to remove the duplicate property values like on the fix lint command or on Ctrl+S but this is not happening at all. Example as below.

.full-screen {
    align-items: center;
    align-items: center;

    //you need to setup file-loader in webpack before you can use images
    background-position: center;
    bottom: 0;
    display: flex;
    display: flex;
    flex-direction: column;

    //_ works with row or column_

    flex-direction: column;
    height: 100%;
    justify-content: center;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
}

Please let me know how I can achieve this?the

What solution would you like to see?

I want to remove the duplicate property values like on the fix lint command and using Ctrl+S

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (13 by maintainers)

Most upvoted comments

But, can we fix the following case? Which should be removed: pink or orange?

Unless the "ignore": ["consecutive-duplicates-with-different-values"] option is set, I think we should fix this case so that the fix behaviour is complete.

We should keep the last option and remove all previous duplicates as that’s how the browser is going to interpret it most of the time, e.g.

a {
  color: red; /* remove */
  color: pink; /* remove */
  color: orange;
}

jeddy3 on Jun 6, 2022

@ybiquitous That’s correct. Adding autofix to a rule doesn’t change what problems a rule detects, it just autofixes them rather than reporting them.

It may be good to note fallbacks in the rule doc when adding autofix.

We already do that for the consecutive option.

jeddy3 on Jun 21, 2022

@carlosjeurissen Thanks for providing the related issue links. 👍🏼

When considering fallbacks, it seems safer to use the ignore: ["consecutive-duplicates-with-different-values"] option together (see also https://github.com/stylelint/stylelint/issues/6119#issuecomment-1147419243) or to specify /* stylelint-disable */ comments to code requiring fallbacks.

It may be good to note fallbacks in the rule doc when adding autofix. 🤔

ybiquitous on Jun 21, 2022

@ybiquitous You’re welcome! I personally don’t know the specifics, however, this might be useful: https://github.com/stylelint/stylelint/issues/1021 https://github.com/stylelint/stylelint/issues/404

For now I would suggest to focus on 1:1 match and remove only those. While browsers would discard some values, for the code author, I imagine it being more useful to see the duplicate warning in your editor and decide for yourself which one to keep.

carlosjeurissen on Jun 20, 2022

Let’s make sure fallback logic is not affected by this autofix. For example:

a {
  color: orange; /* remove */
  color: purple; /* should not be removed, as rebeccapurple is not supported in all browsers */
  color: rebeccapurple;
}

Same goes for calc, variables, and others:

div {
  width: 20px; /* remove */
  width: 8px; /* should not be removed, is fallback to calc */
  width: calc(100% - 100px);
}

carlosjeurissen on Jun 20, 2022