Light

Make use of stylelint-config-rational-order about stylelint-config-twbs-bootstrap HOT 13 CLOSED

twbs commented on May 8, 2024 1

Make use of stylelint-config-rational-order

from stylelint-config-twbs-bootstrap.

Comments (13)

XhmikosR commented on May 8, 2024

How does it do with our current style in Bootstrap core repo?

I'm all for reducing custom rules, I just don't want us to make a lot of changes in our source code.

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

The config is based more or less the same, some properties are switched, this is the complete diff for the scss folder:


scss/_alert.scss
 8:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"      order/properties-order

scss/_badge.scss
 12:3  ✖  Expected "color" to come before "line-height" in group "Typography"           order/properties-order
 14:3  ✖  Expected "white-space" to come before "text-align" in group "Typography"      order/properties-order

scss/_breadcrumb.scss
 5:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"      order/properties-order

scss/_buttons.scss
 10:3  ✖  Expected "font-weight" to come before "font-family" in group "Typography"       order/properties-order
 11:3  ✖  Expected "color" to come before "font-weight" in group "Typography"             order/properties-order
 15:3  ✖  Expected "background-color" to come before "user-select" in group "Visual"      order/properties-order
 79:3  ✖  Expected "color" to come before "font-weight" in group "Typography"             order/properties-order

scss/_card.scss
 71:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"      order/properties-order

scss/_carousel.scss
  64:5  ✖  Expected "transform" to come before "transition-property" in group "Visual"      order/properties-order
 155:3  ✖  Expected "margin-right" to come before "padding-left" in group "Box Model"       order/properties-order
 161:5  ✖  Expected "flex" to come before "box-sizing" in group "Box Model"                 order/properties-order
 168:5  ✖  Expected "background-color" to come before "cursor" in group "Visual"            order/properties-order

scss/_close.scss
 6:3  ✖  Expected "color" to come before "line-height" in group "Typography"      order/properties-order

scss/_custom-forms.scss
  86:5  ✖  Expected "content" to come before "pointer-events" in group "Misc"              order/properties-order
  87:5  ✖  Expected "background-color" to come before "content" in group "Visual"          order/properties-order
 101:5  ✖  Expected "background" to come before "content" in group "Visual"                order/properties-order
 179:7  ✖  Expected "border-radius" to come before "pointer-events" in group "Visual"      order/properties-order
 222:3  ✖  Expected "font-weight" to come before "font-family" in group "Typography"       order/properties-order
 224:3  ✖  Expected "color" to come before "line-height" in group "Typography"             order/properties-order
 339:3  ✖  Expected "font-weight" to come before "font-family" in group "Typography"       order/properties-order
 341:3  ✖  Expected "color" to come before "line-height" in group "Typography"             order/properties-order
 357:5  ✖  Expected "color" to come before "line-height" in group "Typography"             order/properties-order
 360:5  ✖  Expected "border-left" to come before "content" in group "Visual"               order/properties-order
 413:5  ✖  Expected "background-color" to come before "cursor" in group "Visual"           order/properties-order
 439:5  ✖  Expected "background-color" to come before "cursor" in group "Visual"           order/properties-order
 468:5  ✖  Expected "background-color" to come before "cursor" in group "Visual"           order/properties-order

scss/_dropdown.scss
  26:3  ✖  Expected "margin" to come before "padding" in group "Box Model"                    order/properties-order
 127:3  ✖  Expected "clear" to come before "padding" in group "Box Model"                     order/properties-order
 129:3  ✖  Expected "color" to come before "font-weight" in group "Typography"                order/properties-order
 131:3  ✖  Expected "white-space" to come before "text-align" in group "Typography"           order/properties-order
 164:5  ✖  Expected "background-color" to come before "pointer-events" in group "Visual"      order/properties-order
 180:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"             order/properties-order

scss/_forms.scss
  14:3  ✖  Expected "font-weight" to come before "font-family" in group "Typography"          order/properties-order
  16:3  ✖  Expected "color" to come before "line-height" in group "Typography"                order/properties-order
  85:3  ✖  Expected "margin-bottom" to come before "padding-bottom" in group "Box Model"      order/properties-order
 115:3  ✖  Expected "margin-bottom" to come before "padding-bottom" in group "Box Model"      order/properties-order
 118:3  ✖  Expected "color" to come before "line-height" in group "Typography"                order/properties-order
 229:3  ✖  Expected "margin-right" to come before "padding-left" in group "Box Model"         order/properties-order

scss/_input-group.scss
 106:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"        order/properties-order
 110:3  ✖  Expected "color" to come before "line-height" in group "Typography"           order/properties-order
 112:3  ✖  Expected "white-space" to come before "text-align" in group "Typography"      order/properties-order

scss/_jumbotron.scss
 3:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"      order/properties-order

scss/_list-group.scss
 11:3  ✖  Expected "margin-bottom" to come before "padding-left" in group "Box Model"        order/properties-order
 49:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"             order/properties-order
 67:5  ✖  Expected "background-color" to come before "pointer-events" in group "Visual"      order/properties-order

scss/_modal.scss
 109:3  ✖  Expected "background-color" to come before "pointer-events" in group "Visual"      order/properties-order
 146:5  ✖  Expected "margin" to come before "padding" in group "Box Model"                    order/properties-order

scss/_nav.scss
 10:3  ✖  Expected "margin-bottom" to come before "padding-left" in group "Box Model"      order/properties-order
 26:5  ✖  Expected "cursor" to come before "pointer-events" in group "Visual"              order/properties-order

scss/_navbar.scss
  46:3  ✖  Expected "margin-right" to come before "padding-bottom" in group "Box Model"      order/properties-order
  65:3  ✖  Expected "margin-bottom" to come before "padding-left" in group "Box Model"       order/properties-order
 129:3  ✖  Expected "background" to come before "content" in group "Visual"                  order/properties-order

scss/_pagination.scss
 11:3  ✖  Expected "margin-left" to come before "padding" in group "Box Model"       order/properties-order
 13:3  ✖  Expected "color" to come before "line-height" in group "Typography"        order/properties-order
 56:5  ✖  Expected "cursor" to come before "pointer-events" in group "Visual"        order/properties-order
 57:5  ✖  Expected "background-color" to come before "cursor" in group "Visual"      order/properties-order

scss/_popover.scss
  32:7  ✖  Expected "border-color" to come before "content" in group "Visual"          order/properties-order
 109:5  ✖  Expected "border-bottom" to come before "content" in group "Visual"         order/properties-order
 155:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"      order/properties-order

scss/_print.scss
 55:7  ✖  Expected "page-break-inside" to come before "border" in group "Typography"      order/properties-order

scss/_progress.scss
 25:3  ✖  Expected "white-space" to come before "text-align" in group "Typography"      order/properties-order

scss/_reboot.scss
  50:3  ✖  Expected "font-weight" to come before "font-family" in group "Typography"      order/properties-order
  52:3  ✖  Expected "color" to come before "line-height" in group "Typography"            order/properties-order
 119:3  ✖  Expected "border-bottom" to come before "cursor" in group "Visual"             order/properties-order
 411:3  ✖  Expected "margin" to come before "padding" in group "Box Model"                order/properties-order
 422:3  ✖  Expected "margin-bottom" to come before "padding" in group "Box Model"         order/properties-order
 425:3  ✖  Expected "color" to come before "line-height" in group "Typography"            order/properties-order

scss/_toasts.scss
 11:3  ✖  Expected "opacity" to come before "backdrop-filter" in group "Visual"      order/properties-order

scss/_tooltip.scss
 26:7  ✖  Expected "border-color" to come before "content" in group "Visual"      order/properties-order

scss/_type.scss
 11:3  ✖  Expected "font-weight" to come before "font-family" in group "Typography"      order/properties-order
 13:3  ✖  Expected "color" to come before "line-height" in group "Typography"            order/properties-order

scss/mixins/_forms.scss
 58:5  ✖  Expected "margin-top" to come before "padding" in group "Box Model"      order/properties-order
 61:5  ✖  Expected "color" to come before "line-height" in group "Typography"      order/properties-order

scss/mixins/_grid.scss
 9:3  ✖  Expected "margin-right" to come before "padding-left" in group "Box Model"      order/properties-order

scss/mixins/_reset-text.scss
  5:3  ✖  Expected "font-weight" to come before "font-style" in group "Typography"             order/properties-order
 11:3  ✖  Expected "text-transform" to come before "text-shadow" in group "Typography"         order/properties-order
 12:3  ✖  Expected "letter-spacing" to come before "text-transform" in group "Typography"      order/properties-order
 15:3  ✖  Expected "white-space" to come before "word-spacing" in group "Typography"           order/properties-order

scss/mixins/_screen-reader.scss
 13:3  ✖  Expected "white-space" to come before "clip" in group "Typography"      order/properties-order
 31:5  ✖  Expected "white-space" to come before "clip" in group "Typography"      order/properties-order

scss/mixins/_text-truncate.scss
 7:3  ✖  Expected "white-space" to come before "text-overflow" in group "Typography"      order/properties-order

scss/utilities/_stretched-link.scss
 15:5  ✖  Expected "content" to come before "pointer-events" in group "Misc"          order/properties-order
 17:5  ✖  Expected "background-color" to come before "content" in group "Visual"      order/properties-order

from stylelint-config-twbs-bootstrap.

XhmikosR commented on May 8, 2024

It's quite a few changes but I guess it's OK since it's a one-time thing.

@mdo: what do you think about this change?

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

Ping @twbs/css-review

from stylelint-config-twbs-bootstrap.

ysds commented on May 8, 2024

My understanding is that the current order rule come from Code Guide by mdo. There are some small difference between the mdo's rule and the stylelint-config-rational-order, but the order of the groups is basically the same. I can accept those small changes in order to reduce maintenance costs, but ultimately I will follow the mdo's thought.

from stylelint-config-twbs-bootstrap.

mdo commented on May 8, 2024

Will dig in here more later, but generally I'd like to stick to the current approach. I don't see much benefit to moving these around right now, especially after writing it this way for nearly 10 years :D. That said, we could audit and make incremental improvements.

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

Their approach is pretty similar with ours, just some properties that are switched. I also noticed their list of properties is more complete. If we're not going to switch, we can have a look at what properties we 're missing and work with the grouping like they do.

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

#13 might be another reason to do this, stylelint-config-rational-order has a way better coverage of existing properties.

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

Ping @twbs/css-review. If we're not going to switch to stylelint-config-rational-order, we should have a look at what properties we're currently missing and maybe switch to the groups-approach they're using.

from stylelint-config-twbs-bootstrap.

roket1428 commented on May 8, 2024

#13 might be another reason to do this, stylelint-config-rational-order has a way better coverage of existing properties.

After using CSS Grid very long time, I would say that the order of grid properties in stylelint-config-rational-order totally makes no sense, it is just like alphabetical order.

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

@roket1428, could you give an example of what order doesn't make sense exactly? I haven't used grid that much so far.

from stylelint-config-twbs-bootstrap.

roket1428 commented on May 8, 2024

@roket1428, could you give an example of what order doesn't make sense exactly? I haven't used grid that much so far.

For example grid-area, grid-row or grid-column (and their variants) should be the first because they decides where element should be in. The rest of the grid properties effects other elements.

from stylelint-config-twbs-bootstrap.

MartijnCuppens commented on May 8, 2024

Gonna close this since stylelint-config-rational-order changes the property order. Tackeled the grouping idea in #50.

from stylelint-config-twbs-bootstrap.

Related Issues (20)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.