hudochenkov/stylelint-order

A plugin pack of order related linting rules for Stylelint.

stylelint-order

A plugin pack of order-related linting rules for Stylelint. Every rule supports autofixing (stylelint --fix).

Installation

1. If you haven't, install Stylelint:

npm install stylelint --save-dev

2. Install stylelint-order:

npm install stylelint-order --save-dev

Usage

Add stylelint-order to your Stylelint config plugins array, then add rules you need to the rules list. All rules from stylelint-order need to be namespaced with order.

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

Rules

• order: Specify the order of content within declaration blocks.
• properties-order: Specify the order of properties within declaration blocks.
• properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks.

Autofixing

Every rule supports autofixing with stylelint --fix. postcss-sorting is used internally for order autofixing.

Automatic sorting has some limitations that are described for every rule, if any. Please, take a look at how comments are handled by postcss-sorting.

CSS-in-JS styles with template interpolation could be ignored by autofixing to avoid style corruption.

Autofixing in Less syntax may work but isn't officially supported.

Example configs

All these configs have properties-order configured with logical properties groups:

• stylelint-config-idiomatic-order
• stylelint-config-hudochenkov/order
• stylelint-config-recess-order
• stylelint-config-property-sort-order-smacss
• stylelint-config-clean-order

Thanks

properties-order and properties-alphabetical-order code and README were based on the declaration-block-properties-order rule which was a core rule prior to Stylelint 8.0.0.

stylelint-order's Issues

Is there a way to auto order in source sass files legacy project?

cant install with stylelint 8.1.1

Stylelint don't lint anymore after adding style-order in plugins

Hi there,

I'm trying to configure my .stylelintrc with stylelint-order but when I add stylelint-order to plugins, stylelint no longer detect any problems.

I'm using stylelint 8.2.0 and stylelint-order 0.7.0.

Any clue ?

Allow stylelint fix to make order changes?

Is there a way for the --fix option of the stylelint CLI to handle these ordering rules automatically? Or is there a quick way to auto-fix css based on these ordering rules via some other CLI tool?

Once added, or if a solution exists, please add to README.

[Feature request] List unparsed properties

I would find nice if styleint-order could list the declarations of a stylesheet (SCSS) that are not parsed by this plugin. This would help to better spot potentially unwanted declarations and to better iterate on the list of order/order declarations while CSS evolve in time.

A property like listUnparsed would be great. What do you think? Is there any chance this could be a thing?

Thanks for contributor’s job on this plugin.

Plugin complaining about blockless at-rule, even though it has one

Hey there! I'm running into an error with following configuration:

module.exports = {
  'plugins': [
    'stylelint-order'
  ],
  'rules': {
    'order/order': [
      'dollar-variables',
      {
        type: 'at-rule',
        hasBlock: false,
      },
      'declarations',
      'rules',
    ],
  }
};

The code:

@mixin type--h1 {
    @include ff--base-bold;
    font-size: 3.0rem;

    &:not(:last-child) {
        margin-bottom: 28px;
    }

    @include mq('<=sm') {
        font-size: 2.6rem;
    }
}

The complaint:

   9:5  error  Expected blockless at-rule to come before rule         order/order

It seems that the rule is misinterpreted as blockless even though it has one. The problem does not occur when I change the configuration to contain also at-rules with blocks. However, I don't want to restrict where to write them.

Add wildcard to match rules

In the newest versions, stylelint-order does not handle shorthand properties which is very unfortunate but understandable.

This means that we must specify all properties which is very verbose. For instance, I want to group border properties and there are 33+ border related properties.

What if we could support border-* to match rules? This would be very helpful.

Deprecation Warning: 'declaration-block-properties-order' has been deprecated and in 8.0

With order/declaration-block-property-groups-structure rule stylelint prints next warning:

Deprecation Warning: 'declaration-block-properties-order'has been deprecated and in 8.0 will be removed. Instead use the community 'stylelint-order' plugin pack. See: https://stylelint.io/user-guide/rules/declaration-block-properties-order/

Properties with prefixes ignored when defined in group object

When only the base property is defined in the group object in the properties key, any rules with that prefix are seemingly ignored by the plugin. Is this just the nature of using group objects to define sets of ordered properties?

Given:

[{
  emptyLineBefore: "true",
  order: "strict",
  properties: [
    "font",
    "color",
  ],
}]

The following will not present an error:

div {
  display: block;

  color: black;
  font-weight: 500;
}

Custom properties parsing broken in 0.4.2

This code works in 0.4.1 and broken in 0.4.2

:root {
   --foo: {
      top: 0;
      color: pink;
   }
}

JS error

TypeError: Cannot read property '0' of undefined
      at Object.isStandardSyntaxProperty (utils/isStandardSyntaxProperty.js:10:14)
      at processEveryNode (rules/properties-order/index.js:118:22)
      at Rule.each (node_modules/postcss/lib/container.js:114:22)
      at checkNode (rules/properties-order/index.js:66:9)
      at processRulesAndAtrules (rules/properties-order/index.js:52:5)
      at node_modules/postcss/lib/container.js:148:26
      at Root.each (node_modules/postcss/lib/container.js:114:22)
      at Root.walk (node_modules/postcss/lib/container.js:147:21)
      at rules/properties-order/index.js:50:8
      at Promise.resolve.then (node_modules/stylelint/lib/lintSource.js:122:52)

[properties-alphabetical-order] Prefixed properties doesn't precede the unprefixed version

"stylelint-order": "^0.6.0"

Hello there,

-  -moz-osx-font-smoothing: grayscale !important;
-  -ms-overflow-style: scrollbar;
-  -webkit-font-smoothing: antialiased !important;
  background-color: $content-bg;
  color: $font-color;
  font-family: $font-roboto;
  font-size: $font-size-base;
+  -moz-osx-font-smoothing: grayscale !important;
+  -webkit-font-smoothing: antialiased !important;
  font-weight: $font-weight-normal;
+  -ms-overflow-style: scrollbar;
  padding-top: 75px;
  text-rendering: optimizeLegibility !important;

It should be the contrary, any idea why it's happening ?

.stylelintrc

{
  "extends": [
    "stylelint-config-standard"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

Error: stylelint v3+ requires plugins to expose a ruleName

Error: stylelint v3+ requires plugins to expose a ruleName. The plugin "C:\xxx\node_modules\stylelint-order\index.js" is not doing this, so will not work with stylelint v3+. Please file an issue with the plugin to upgrade.

Keep properties-alphabetical-order while giving property-order groups extended rules

What I'd like to do is be able to group CSS for certain groups, but leave the rest of the declarations in alphabetical order. As an example, I only want position lines to be separate.

.class {
    color: #000;
    display: block;
    ...alphabetical...
    width: 100%;
    z-index: 100;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

I've gotten the group to kind of work with

"order/properties-order": [
	{
		"emptyLineBefore": "always",
		"properties": [
      			"position",
			"top",
			"right",
			"bottom",
			"left"
		]
	}
]

But it's saying Expected position to come before width so the rule wants the group to still be in order. If I turn off properties-alphabetical-order the top area in my example doesn't give me warnings.

Is there a way to do this?

Bug when sorting properties & variables

Hi!

I have a problem with autofix. When I have this stylesheet:

.test {
  $var: 0;
  
  left: 0;
  top: 0;
}

And stylelint config like this:

{
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/properties-order": [
      "top",
      "left"
    ]
  }
}

After running stylelint --fix I get:

.test {
  $var: 0;
  top: 0;

  left: 0;
}

But I've expected to get:

.test {
  $var: 0;

  top: 0;
  left: 0;
}

Is it a bug, or I should to update my stylelint config by adding some rules?

Disable properties-alphabetical-order rule

Hi.
I'm using stylelint-config-concentric-order based on your package. But then I'm getting an error both from properties-order and alphabetical-order rules.
I've tried to write "order/properties-alphabetical-order": false in a config, but seems like it doesn't disable the rule. Am I doing something wrong?

Release new version with support stylelint@8

👍

Request: improve properties-order expect message

When looking at an error message about property orders it would be nice if the message about Expected "a" to come before "b" would tell you the first (ie. highest) property in the block that "a" needs to come before instead of just telling you the one that is currently above it.

For example in the css below, the z-index needs to come first. But the message says Expected "z-index" to come before "height". If it could say instead Expected "z-index" to come before "position" it would help users to immediately know where they can move it to pass that lint error. Instead I end up having to copy it up one, then up another, then up another, and so on. Basically performing a manual cut/paste bubblesort. Seems like this could be improved.

note: in this example I will end up having to bubble up several of the items so it kind of shows a worst case.

my-cmp {
   position: fixed;
   padding: 0;
   top:     0;
   height:  100%;
   z-index: 100;
}

unprefixed property names could support regular

properties-order array list is too long,

and it not support regular

Add option `noEmptyLineBetween` to prevent empty lines between properties within a configured group

The given rule

{
	"emptyLineBefore": "always",
	"noEmptyLineBetween": true,
	"properties": [
		"position",
		"display"
	]
}

will show a warning for this: (the empty line should be removed)

p {
	position: relative;

	display: block;
}

but will be fine i.e. ignore this: (current behavior without the new option anyway)

p {
	position: relative;
	display: block;
}

Alphabetical order exception for overriding shorthand declaration?

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?

Grouping properties by separator

Hello, thank you for helpful project!

Is it possible to break a solid list of properties by groups?

Let's Consider the example, for this config:

{
    "plugins": [
        "stylelint-order"
    ],
    "rules": {
        "order/properties-order": [
            ["position", "top", "right", "bottom", "left"],
            ["margin", "display", "width", "height", "padding"]
        ],
        "order/groups-separator": "\n"
    }
}

It's will be the result with empty line between two groups:

.foo {
    position: absolute;
    top: 0;
    bottom: 0;

    display: block;
    padding: 10px;
}

Do we have appropriate option in config now?

declaration-block-property-groups-structure should use internal rules for order

Because stylelint's declaration-block-properties-order going to be deprecated in [email protected] declaration-block-property-groups-structure should check order using this plugins rules or by itself.

Feature: CSS order presets

I use Concentric CSS as the basis for my CSS property ordering. Coming from sass-lint, there is a rule for property-sort-order that allows certain style presets such as alphabetical, concentric, recess, and smacss.

It would be great if we could have these presets as a configuration option in addition to manually specifying a property order.

Fix mode ignores order: flexible

When running stylelint with the autofix option, groups marked "flexible" will be reordered to match the defined order, instead of being correctly left alone (as "flexible" should indicate)

declaration-block-order: Support `selector` for rules

Config:

{
    type: 'rule',
    selector: '/^&:\w/'
}

selector is RegEx for selector matching.

It will match:

a {
    &:hover {
        color: blue;
    }
    &:focus {
        color: red;
    }
}

Won't match:

a {
    &::before {
        content: "b";
    }
    &::after {
        content: "a";
    }
}

Proposed stylelint/stylelint#1500 (comment)

order/order not working with scss properties shorthand

Hi,

I have the problem that `stylelint-order´ recognize scss properties shorthand as a rule and not as a declaration.

Example:

.some-rule {
    display: inline-block;
    padding: {
        top: 3px;
        right: 6px;
        bottom: 3px;
        left: 7px;
    }
    text-transform: uppercase;
}

Error:

 9:5  ✖  Expected declaration to come before rule   order/order                  
 9:5  ✖  Expected empty line before declaration     declaration-empty-line-before

My Config for declaration block order:

[
    "custom-properties",
    "dollar-variables",

    // declarations and rules in the middle
    "declarations",
    "rules",

    // @content rule
    {
        type: 'at-rule',
        name: 'content',
    },

    // rules to overwrite depending on theme
    {
        type: 'at-rule',
        name: 'include',
        parameter: 'on-[a-zA-Z]*-theme'
    },

    // mq and print mixins at the bottom
    {
        type: 'at-rule',
        name: 'include',
        parameter: "mq"
    },
    {
        type: 'at-rule',
        name: 'include',
        parameter: "print"
    }
]

I think the error is not correct, as padding is a declaration and not a rule.

I am not sure if the following issues are related, but I will include them here:

• stylelint/stylelint#1386
• postcss/postcss-scss#40
• stylelint-scss/stylelint-scss#44
• postcss/postcss-selector-parser#64
• stylelint/stylelint#1500

Apart from this, migrating from scsslint tostylelint is very smooth, good job people :)

Add option `minimumLines` to ignore `emptyLineBefore` if group has less than specified amount of properties

The given rules

{
	"minimumLines": 2,
	"emptyLineBefore": "always",
	"properties": [
		"position",
		"display"
	]
},
{
	"minimumLines": 2,
	"emptyLineBefore": "always",
	"properties": [
		"font",
		"color"
	]
}

will warn about this: (empty line before font-family missing)

p {
	position: relative;
	display: block;
	font-family: sans-serif;
	color: tomato;
}

but will be fine i.e. ignore this: (font-family is only 1 line of the specified group)

p {
	position: relative;
	font-family: sans-serif;
}

That would be helpful! :) Thanks for the awesome plugin!

Invalid Option error for declaration-block-order

I'm getting the following error message from Stylelint:

Invalid Option:
Invalid option "["custom-properties","dollar-variables",{"type":"at-rule","name":"extend"},{"type":"at-rule","name":"include","hasBlock":false},"declarations",{"type":"at-rule","
hasBlock":true},{"type":"rule","selector":"/^&:[\\w-]+$/"},{"type":"rule","selector":"/^&::[\\w-]+$/"},"rules"]" 
for rule order/declaration-block-order

In my .stylelintrc I have the following:

"order\/declaration-block-order": [
      "custom-properties",
      "dollar-variables",
      {
        "type": "at-rule",
        "name": "extend"
      },
      {
        "type": "at-rule",
        "name": "include",
        "hasBlock": false
      },
      "declarations",
      {
        "type": "at-rule",
        "hasBlock": true
      },
      {
        "type": "rule",
        "selector": "\/^&:[\\w-]+$\/"
      },
      {
        "type": "rule",
        "selector": "\/^&::[\\w-]+$\/"
      },
      "rules"
    ],

Removing the two rule objects clears up the error. Am I escaping the regex incorrectly or something?

smacss order

Would you consider including a declaration-block-properties-smacss-order rule?

Similar request to cahamilton/stylelint-config-property-sort-order-smacss#1

I could put together a PR using https://github.com/cahamilton/css-property-sort-order-smacss

cc @cahamilton

Setting `properties-alphabetical-order: false` causes linting loop

Testing in Atom, using the linter and linter-stylelint packages.
If you set properties-alphabetical-order: false, the linter treats it as true and runs this linting rule.
Expect that the rule is not run.

Plans on supporting order: flexible?

Are there any plans to support flexible ordering?

"order/declaration-block-properties-specified-order": [
    [
        "content",
        "position",
        "z-index",
        {
            "order": "flexible",
            "properties": ["top", "right", "bottom", "left"]
        },
        ...
    ]
]

See bullet point #2 for array-of-unprefixed-property-names-or-group-objects in the Stylelint documentation for more info.

Descending specificity error with different classes.

I'm getting Expected selector ".super-navigation ul a" to come before selector ".navigation ul a:hover" with the following CSS:

.navigation ul {
  margin: 0;

  a {
    color: #fff;

    &:hover {
      color: #eee;
    }
  }
}

.super-navigation ul {
  margin: 0;
  padding: 0;

  a {
    color: #fff;

    &:hover {
      color: #eee;
    }
  }
}

Migration tips

Unfortunately stylelint removed declaration-block-properties-order and forces to use stylelint-order.
But stylelint-order overcomplicated compared with declaration-block-properties-order in stylelint.
Can you provide some example how my stylelint config should looks in stylelint-order world?
https://gist.github.com/in-in/c261ee397999bec6f8294abd50adfb9d
Thanks.

Expected "some property" to come before "-styled-mixin0"

I have the following code:

import styled from "styled-components";

const Container = styled.div`
  ${props => {if (props.border) return "border-bottom: 1px solid #E3E6E7;";}}
  display: flex;
  flex-wrap: wrap;
  justify-content: ${props => {
  switch (props.align) {
    case "center": return "center";
    case "right": return "flex-end";
    case "spaced": return "space-between";
    default: return "flex-start";
    }
  }};
  padding: 6px 0;
`;

and getting some strange expectation: Expected "display" to come before "-styled-mixin0"
Where does it come from? How can I prevent to skip this property to take part into ordering process?

declaration-block-order: Support Less variables

As I wrote in this comment #3 (comment), it would be nice to support Less variables. We want to describe variables in the beginning of the rules, for example.

.class {
	@variable: 10px;
	
	margin: @variable;

	.nested {
		...
	}
}

I think that this problem may be solved by adding RegEx patterns to declarations config, but you can simply add a new type, like dollar-variables.

Crash: TypeError: Cannot read property 'orderData' of undefined

I am using stylelint 7.9.0 with stylelint-order 0.4.0 and it crashes on a specific LESS input.

The callstack:

TypeError: Cannot read property 'orderData' of undefined
    at checkEmptyLineBefore (/home/akhlynovskiy/code/tradingview/node_modules/stylelint-order/rules/properties-order/index.js:236:50)
    at processEveryNode (/home/akhlynovskiy/code/tradingview/node_modules/stylelint-order/rules/properties-order/index.js:147:5)
    at Rule.each (/home/akhlynovskiy/code/tradingview/node_modules/postcss/lib/container.js:114:22)
    at checkNode (/home/akhlynovskiy/code/tradingview/node_modules/stylelint-order/rules/properties-order/index.js:66:9)
    at processRulesAndAtrules (/home/akhlynovskiy/code/tradingview/node_modules/stylelint-order/rules/properties-order/index.js:52:5)
    at /home/akhlynovskiy/code/tradingview/node_modules/postcss/lib/container.js:148:26
    at Root.each (/home/akhlynovskiy/code/tradingview/node_modules/postcss/lib/container.js:114:22)
    at Root.walk (/home/akhlynovskiy/code/tradingview/node_modules/postcss/lib/container.js:147:21)
    at /home/akhlynovskiy/code/tradingview/node_modules/stylelint-order/rules/properties-order/index.js:50:8
    at Promise.resolve.then (/home/akhlynovskiy/code/tradingview/node_modules/stylelint/lib/lintSource.js:122:52)

Here's the setup to reproduce the crash.

.stylelintrc.js:

module.exports.plugins = ['stylelint-order'];
module.exports.rules = {
	'order/properties-order': [
		[
			'content',
			'display',
			'position',
			'float',
		],
		{
			unspecified: 'bottom',
			severity: 'warning',
		}
	],
};

test.less:

.selector {
	display: block;
	@less-variable: 42;
}

As far as I understand, the crash happens if any LESS variable declaration follows any "regular" property.

Please ping me if you need any additional information or help.

Error: Undefined rule order/properties-order

I keep getting the following error in both Atom and Command line:

My package.json has the following:

    "stylelint": "8.4.0",
    "stylelint-config-standard": "18.0.0",
    "stylelint-order": "0.8.0",
    "stylelint-scss": "2.2.0"

My .stylelintrc looks like this:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-order"
  ],
  "rules": {
    "at-rule-no-unknown": [ true, {
      ignoreAtRules: ["extend", "at-root", "debug", "warn", "error", "if", "else", "for", "each", "while", "mixin", "include", "content", "return", "function"]
    }],
    "declaration-empty-line-before": "never",
    "max-empty-lines": 2,
    "number-leading-zero": "never",
    "string-quotes": "double",
    "order/properties-order": [
      # Position.
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
       ...

Any idea what I am doing wrong?

introduce fuzzy selector for properties

I've found the ordering of the properties a bit tedious, I wonder if it's possible to introduce a fuzzy ordering of some sort, e.g.:

[ "border", "border-*" ]

the following statement won't cause a warning:

.rule {
  border: 10px solid red;
  border-bottom: 5px;
  border-right-color: green;
}

where the fuzzy properties are going to be ruled by either unspecified or by introducing a specific one like: fuzzy that works the same way as unspecified.

for instance:

[
  [ "border*" ],
  { "fuzzy": null }
]

that won't cause warning for the following:

.rule {
  border: 10px solid red;
  border-right-color: green;
  border-bottom: 5px;
}

hope it makes sense. 😄

Support for CSS Modules / composes

Would be great if we could support CSS Modules, especially the composes rules.

.common {
  composes: no-border from global;
  border-radius: 4px;
}

currently fails with

✖  Expected border-radius to come before composes   order/declaration-block-properties-alphabetical-order

if we have the following config:

"order/declaration-block-order": [
    "custom-properties",
    "declarations"
],
"order/declaration-block-properties-alphabetical-order": true,

Merge properties-specified-order, properties-flexible-order, and property-groups-structure into new rule

The more I think the more I realise that dividing stylelint's declaration-block-properties-order into more specific rules creates more confusion then clear state of thing. Rule's tidy couple with each other, share lots of code and big pieces of README.

Currently we have:

• declaration-block-properties-specified-order: strict order with unspecified option. Primary option: array of strings.
• declaration-block-properties-alphabetical-order: alphabetical order. Accept only true.
• declaration-block-property-groups-structure: Primary option: array of objects with properties and emptyLineBefore properties. Runs declaration-block-properties-specified-order with properties found in its primary option.
• declaration-block-properties-flexible-order (just added): strict order with unspecified option and support for flexible groups. Primary option: array of strings or objects with property properties. Properties declared within array follow strict order, while properties within object is in flexible order.

declaration-block-properties-specified-order rule is basically limited declaration-block-properties-flexible-order rule.

declaration-block-property-groups-structure should support flexible order as well as strict order. So I have to run declaration-block-properties-flexible-order from declaration-block-property-groups-structure as well as declaration-block-properties-specified-order.

See what a mess it became?

declaration-block-properties-alphabetical-order works great and won't be affected.

I was thinking it's better to merge properties-specified-order, properties-flexible-order, and property-groups-structure into one rule. It would be like declaration-block-properties-order in stylelint 6.5.0. Merged rule will support strict order, flexible order, and emptyLineBefore.

Config would be like:

[
	[
		"height",
		"width",
		{
			emptyLineBefore: "always",
			properties: [
				"color",
				"font-size",
				"font-weight",
			],
		},
		"flex",
		"display",
		{
			emptyLineBefore: "never",
			order: "flexible",
			properties: [
				"margin-top",
				"margin-bottom",
			],
		},
	],
	{
		unspecified: "bottom"
	}
]

Strict order applies for main array and to objects without order: "flexible". emptyLineBefore is optional.

I think the new rule should have name declaration-block-properties-structure. Because it's not about order, but also about emptyLineBefore. I believe there could be a better name, because properties-structure it's not clear enough.

/cc @cascornelissen @osk @swernerx @evilebottnawi what do you think about all of this?

Don't autofix CSS if there no violations found

👋 The order/order rule seems to be creating some unexpected behavior.

I've documented and created a reproducible example here: https://github.com/ismail-syed/stylelint-order-order-bug

tl;dr:

• order/order is applying fixes when it originally never report lint errors
• /* stylelint-disable order/order */ doesn't work. I suspect this is because the lint errors aren't being reported as expected.

Thanks for the great plugin!

Bug? emptyLineBefore vs declaration-block-properties-order

I think emptyLineBefore can't override declaration-block-properties-order. Which makes dedlock each other.

.stylelintrc

{
    "extends": ["stylelint-config-standard"],
    "plugins": ["stylelint-order"],
    "rules": {
        "indentation": 2,
        "number-leading-zero": null,
        "max-empty-lines": 2,
        "property-no-unknown": [ true, {
            "ignoreProperties": ["composes"]
        }],
        "order/order": [
            "custom-properties",
            "declarations"
        ],
        "order/properties-order": [
            {
                "emptyLineBefore": "never",
                "properties": [
                    "margin",
                    "padding"
                ]
            },
            {
                "emptyLineBefore": "always",
                "properties": [
                    "overflow-scrolling"
                ]
            }
        ]
    }
}

I supposed this shuld no errors.

.test {
    padding: 10px;

    -webkit-overflow-scrolling: touch;
}

But this error returned actually.

Unexpected empty line before declaration

Then, I tried to such as following

.test {
    padding: 10px;
    -webkit-overflow-scrolling: touch;
}

Also an error returns as following.

Expected an empty line before propety -webkit-overflow-scrolling

Am I misunderstood or is it Bug?

declaration-block-order: Support Less mixins

Discussed in #3. Need extend this config by hasBlock property to support mixins such as .my-mixin(); less mixin.

Add option to delete the first-nested empty line

The given rule

{
	"emptyLineBefore": ["always", 
            ["except": "first-nested"]
        ],
	"properties": [
		"position",
		"display"
	]
}

will show a warning for this: (the empty line should be removed)

p {

	position: relative;
	display: block;
}

but will be fine i.e. ignore this: (current behavior without the new option anyway)

p {
position: relative;
display: block;
}

Undefined rule order/declaration-block-properties-specified-order

My .stylelintrc config:

{
	"extends": "stylelint-config-standard",
	"plugins": [
		"stylelint-order"
	],
	"rules": {
		"color-no-hex": true,
		"font-family-name-quotes": "always-where-recommended",
		"indentation": "tab",
		"length-zero-no-unit": null,
		"number-leading-zero": null,
		"order/declaration-block-properties-specified-order": [
			[ "composes" ],
			{ "unspecified": "bottomAlphabetical" }
		],
		"order/order": [
			"at-rule",
			"custom-properties",
			"declarations"
		],
		"order/properties-alphabetical-order": true,
		"property-no-unknown": [
			true,
			{
				ignoreProperties: ["composes", "/^lost-/"]
			}
		],
		"selector-pseudo-class-no-unknown": [
			true,
			{
				"ignorePseudoClasses": [
					"global"
				]
			}
		],
		"string-quotes": "double"
	}
}

I’m working in Atom, and each time I update a CSS file I get the following error:

I couldn’t spot anything obvious here. Appreciate any suggestions I can get.

Do I need to use postcss-sorting if I'm already using stylelint-order?

Is there any benefit of using postcss-sorting over stylelint-order with stylelint?

declaration-block-order: Improve warning messages

Current implementation:

Message: Expected ${first} to come before ${second}.

Possible variations:

Matched pattern	Node description it produce
custom-properties	custom property
dollar-variables	$-variable
declarations	declaration
at-rule	at-rule
at-rule with specified name	@specified-name, e. g. @media
at-rule with specified name and parameter	@specified-name parameter, e. g. @include /^media/
at-rule (name, parameter could be specified) with a block	specified text above + " with a block", e. g. @include /^media/ with a block
at-rule (name, parameter could be specified) without a block	"blockless " + specified text above, e. g. blockless @include /^media/
rule	nested rule
rule with specified selector	nested rule with selector matching "/^&::\w+/"

Warnings could be like:

Expected custom property to come before at-rule
Expected declaration to come before @media
Expected @include /^media/ to come before at-rule
Expected nested rule with selector matching "/^&::\w+/" to come before nested rule

How to improve messages?

/cc @jeddy3 If you have a spare minute would you mind help me to figure out better messages, please?

Unspecified property causes validation error

Hi I'm getting an error using a custom property order.

My configuration:

{
    "extends": [
        "stylelint-config-standard"
    ],
    "plugins": [
        "stylelint-scss",
        "stylelint-order"
    ],
    "rules": {
        "indentation": 4,
        "max-empty-lines": 3,
        "rule-empty-line-before": ["always", {
            "ignore": ["after-comment"]
        }],
        "at-rule-empty-line-before": [ "always", {
            "ignore": ["after-comment", "inside-block", "blockless-after-same-name-blockless"],
            "ignoreAtRules": ["else", "content", "return", "warn"]
        }],
        "block-closing-brace-newline-after": ["always", {
            "ignoreAtRules": ["if", "else", "content", "return", "warn"]
        }],
        "declaration-colon-newline-after": null,
        "function-comma-newline-after": null,
        "no-missing-end-of-source-newline": null,
        "declaration-empty-line-before": "never",

        "order/properties-order": [

            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index",

            "display",
            "opacity",
            "visibility",
            "float",
            "clear",
            "overflow",
            "overflow-x",
            "overflow-y",
            "clip",
            "zoom",
            "flex-direction",
            "flex-order",
            "flex-pack",
            "flex-align",

            "box-sizing",
            "width",
            "min-width",
            "max-width",
            "height",
            "min-height",
            "max-height",
            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",
            "padding",
            "padding-top",
            "padding-right",
            "padding-bottom",
            "padding-left",
            "border",
            "border-width",
            "border-style",
            "border-color",
            "border-top",
            "border-top-width",
            "border-top-style",
            "border-top-color",
            "border-right",
            "border-right-width",
            "border-right-style",
            "border-right-color",
            "border-bottom",
            "border-bottom-width",
            "border-bottom-style",
            "border-bottom-color",
            "border-left",
            "border-left-width",
            "border-left-style",
            "border-left-color",
            "border-radius",
            "border-top-left-radius",
            "border-top-right-radius",
            "border-bottom-right-radius",
            "border-bottom-left-radius",
            "border-collapse",
            "border-image",
            "border-image-source",
            "border-image-slice",
            "border-image-width",
            "border-image-outset",
            "border-image-repeat",
            "border-spacing",

            "table-layout",
            "empty-cells",
            "caption-side",
            "list-style",
            "list-style-position",
            "list-style-type",
            "list-style-image",

            "background",
            "background-color",
            "background-image",
            "background-repeat",
            "background-attachment",
            "background-position",
            "background-position-x",
            "background-position-y",
            "background-clip",
            "background-origin",
            "background-size",

            "color",
            "outline",
            "outline-width",
            "outline-style",
            "outline-color",
            "outline-offset",
            "box-decoration-break",
            "box-shadow",

            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style",
            "font-variant",
            "font-size-adjust",
            "font-stretch",
            "font-effect",
            "font-emphasize",
            "font-emphasize-position",
            "font-emphasize-style",
            "font-smooth",
            "line-height",
            "text-align",
            "text-align-last",
            "vertical-align",
            "white-space",
            "text-decoration",
            "text-emphasis",
            "text-emphasis-color",
            "text-emphasis-style",
            "text-emphasis-position",
            "text-indent",
            "text-justify",
            "letter-spacing",
            "word-spacing",
            "text-outline",
            "text-overflow",
            "text-overflow-ellipsis",
            "text-overflow-mode",
            "text-shadow",
            "text-transform",
            "text-wrap",
            "word-wrap",
            "word-break",
            "tab-size",
            "hyphens",

            "content",
            "quotes",
            "counter-reset",
            "counter-increment",
            "resize",
            "cursor",
            "user-select",
            "nav-index",
            "nav-up",
            "nav-right",
            "nav-down",
            "nav-left",
            "pointer-events",

            "transform",
            "transform-origin",
            "animation",
            "animation-name",
            "animation-duration",
            "animation-play-state",
            "animation-timing-function",
            "animation-delay",
            "animation-iteration-count",
            "animation-direction",
            "transition",
            "transition-delay",
            "transition-timing-function",
            "transition-duration",
            "transition-property"
        ]
    }
}

Relevant CSS code:

.o-ico {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'carrefour-icons' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

Output:

Expected "-moz-osx-font-smoothing" to come before "text-transform"   order/properties-order

Add "unspecified-properties-position" rule

https://github.com/hudochenkov/postcss-sorting/blob/master/docs/unspecified-properties-position.md

unspecified-properties-position
string: "top"|"bottom"|"bottomAlphabetical"

Don't apply properties-alphabetical-order autofixing if there no violations

With the properties-alphabetical-order set to true, the following code will throw no errors:

.a {
  color: #000;
  padding: {
    bottom: 1em;
    top: 1em;
  }
  width: 25%;
}

However, the --fix flag will scramble the code to the following:

.a {
   color: #000;
   width: 25%;
   padding: {
      bottom: 1em;
      top: 1em;
   }
}

Stylelint version 8.4.0, stylelint-order version 0.8.0.