constverum / stylelint-config-rational-order Goto Github PK
View Code? Open in Web Editor NEWStylelint config that sorts related property declarations by grouping together in the rational order :vertical_traffic_light:
License: Apache License 2.0
Stylelint config that sorts related property declarations by grouping together in the rational order :vertical_traffic_light:
License: Apache License 2.0
With this css:
h1 {
position: absolute;
display: block;
float: right;
color: black;
background-color: blue;
border: 1px black solid;
}
This configuration (basically copy/pasta).
{
"extends": [
"stylelint-config-standard",
"stylelint-config-rational-order"
],
"plugins": [
"stylelint-order",
"stylelint-config-rational-order/plugin"
],
"rules": {
"order/properties-order": [],
"plugin/rational-order": [true, {
"border-in-box-model": false,
"empty-line-between-groups": true,
}]
}
}
And the command:
stylelint --config config/.stylelintrc --fix fixtures/main.css
Strictly nothing happen.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
In modern applications that are created with Ionic the recommend the new logical properties, so instead of margin-left:
we are using margin-inline-start:
.
Hi,
The preset is missing the content
css propriety for pseudo-elements.
The preset is missing the mix-blend-mode
and isolation
for photoshop-like layer effects
The preset is missing the object-fit
propriety for image positioning/sizing
You have defined it as [special, positioning, boxModel, typography, etc].
I would like to be able to change the predefined order of groups because I don't agree with such an order.
Can you add an option for the plugin? Something like:
"plugin/rational-order": [
true,
{
"border-in-box-model": false,
"empty-line-between-groups": false,
"groups-order": ["box-model", "positioning", "visual", ... ]
}
]
There seems to be not much activity.
Is this project still under maintenance?
Thanks in advance!
stylelint.config.js
file like this:
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
plugins: ['stylelint-order', 'stylelint-config-rational-order/plugin'],
rules: {
// `standard` conflict with `rational-order`
'declaration-empty-line-before': [
'never',
{
except: ['after-comment', 'after-declaration', 'first-nested'],
ignore: [
'after-comment',
'after-declaration',
'first-nested',
'inside-single-line-block',
],
},
],
'order/properties-order': [],
'plugin/rational-order': [
true,
{
'border-in-box-model': false,
'empty-line-between-groups': true,
},
],
},
};
When I using declaration-empty-line-before
with empty-line-between-groups: true
, one of the two rules not work.
So, If I only hope empty-line-between-groups: true
rule worksοΌ how to configure it?
Hi Denis!
thx! π
Any idea how I turn the rules to result in a warning instead of error?
Should probably live in box model section, above flex.
I like separating the properties into rational groups with lines in between - however when there's only a handful (< 3 || 4) of properties the gaps are a bit unwieldily and it makes it difficult to reason.
Suggestion: a minimum property setting for enacting the empty lines.
Removing the 'visibility' element from the array resolves it but not sure why. Lemme know if you want a PR
stylelint and stylelint order should be listed as peerDependencies so the user can specify their versions.
This fixes the issue of the blank line in error messages and allows users to use stylelint v10 (as you have a yarn.lock file)
yarn audit v1.22.4
βββββββββββββββββ¬βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β low β Prototype Pollution β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Package β yargs-parser β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Patched in β >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2 β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Dependency of β stylelint-config-rational-order β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β Path β stylelint-config-rational-order > stylelint > meow > β
β β yargs-parser β
βββββββββββββββββΌβββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€
β More info β https://www.npmjs.com/advisories/1500 β
βββββββββββββββββ΄βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
I suggest moving border property into box-model section because where it belongs
Firstly, I'm not sure if this is an issue with the vscode plugin or with stylelint-config-rational-order
but I needed to start somewhere.
When I enable this by extending the stylelint config it works perfectly.
{
"extends": [
"stylelint-config-rational-order"
]
}
However if I enable it as a plugin and rule the vscode plugin throws an error about severity, see the below error.
{
"plugins": [
"stylelint-config-rational-order/plugin"
],
"rules": {
"plugin/rational-order": true
// OR (both break)
// "plugin/rational-order": [true, {
// "border-in-box-model": false,
// "empty-line-between-groups": false,
// }]
}
}
Error: `severity` property of a stylelint warning must be either 'error' or 'warning', but it was 'ignore' (string). at stylelintWarningToVscodeDiagnostic (/Users/ben/.vscode/extensions/shinnn.stylelint-0.48.0/node_modules/stylelint-warning-to-vscode-diagnostic/index.js:40:9) at Array.map (<anonymous>) at processResults (/Users/ben/.vscode/extensions/shinnn.stylelint-0.48.0/node_modules/stylelint-vscode/index.js:59:18) at stylelintVSCode (/Users/ben/.vscode/extensions/shinnn.stylelint-0.48.0/node_modules/stylelint-vscode/index.js:144:9)
I tried adding the severity option but the error is still throw.
"plugin/rational-order": [true, { "severity": "warning" } ]
Any ideas where this problem exists or how to fix it?
BTW I love this project, thank you :)
The spec conforming gap is part of the rules, but row-gap and column-gap are not.
There is no answer to this question, and still, many devs live with alphabetical sort, and seeing no drawbacks of using it.
It would be good to point add some articles here:
According to Atom 1.37.0 (latest):
stylelint v3+ requires plugins to expose a ruleName.
The plugin "node_modules/stylelint-config-rational-order/index.js"
is not doing this, so will not work with stylelint v3+.
Please file an issue with the plugin.
package.json versions:
...
"devDependencies": {
"stylelint": "^10.0.1",
"stylelint-config-rational-order": "^0.1.2",
"stylelint-order": "^3.0.0",
"stylelint-no-unsupported-browser-features": "^3.0.2"
}
Note: this error happens EVERY TIME the file is saved π’
Hi π
Just updated to the latest version and I'm getting the following error while saving:
Error:
severity property of a stylelint warning must be either 'error' or 'warning', but it was 'ignore' (string). at stylelintWarningToVscodeDiagnostic
.
Hey,
I've been using this awesome plugin to order styles across our entire organization. It works really well, and everyone is acquainted with the setup.
We are moving from Sass to the very amazing Styled Components. Unfortunately, this config doesn't reorder the styles written in a template literal.
Here is my .stylelintrc
{
"defaultSeverity": "warning",
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components",
"stylelint-order",
"stylelint-config-rational-order"
],
"plugins": [
"stylelint-prettier",
"stylelint-order",
"stylelint-config-rational-order/plugin"
],
"syntax": "scss",
"processors": ["stylelint-processor-styled-components"],
"rules": {
"order/properties-order": [],
"plugin/rational-order": true,
"at-rule-empty-line-before": [
"always",
{
"except": ["first-nested"],
"ignoreAtRules": ["import"]
}
],
"block-closing-brace-newline-after": "always",
"block-opening-brace-space-before": "always",
"prettier/prettier": true,
"property-no-vendor-prefix": true,
"rule-empty-line-before": [
"always",
{
"except": "first-nested"
}
],
"selector-no-vendor-prefix": true,
"unit-case": "lower",
"value-no-vendor-prefix": true
}
}
Am I missing something?
Cheers!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.