Expected keyframe name to be kebab-case keyframes-name-pattern

@keyframes flipInX {

Expected class selector to be kebab-case selector-class-pattern

.svg-inline--fa,

See #3 (review)

This makes sense only for libraries, but for most cases people don't need this. I think we should remove this and just add it in our bootstrap config.

/CC @MartijnCuppens

Hi there!

Is there any way to change the config to invert this order?

Thanks.

With stylelint 15 the stylistic rules have been removed in favor of tools like Prettier.

When we created these rules, pretty printers (like Prettier) didn't exist. They now offer a better way to consistently format code, especially whitespace. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

So should stylelint-config-twbs-bootstrap: let the user configure Prettier instead of using stylelint-stylistic which is a temporary solution because not all projects are able to shift easily.

Before stylelint 15 & stylelint-config-twbs-bootstrap 8.0.0, stylelint-config-prettier (deprecated & archived) allowed to disable all stylistic rules in conflict with Prettier.

stylelint-config-twbs-bootstrap >= 8.0.0 requires the users to manually disable each rules from stylelint-stylistic to avoid conflicts with Prettier.

Ref: twbs/bootstrap#27490

• Create repo
• Protect master branch
• Create npm project
• Give members of css team publish rights to npm
• Copy the Bootstrap configuration to this repo

Edit: npm setup will be continued when everything works

Just moving this issue from twbs/bootstrap#24519 to this repo

We could make use of stylelint-config-rational-order. This plugin groups every property into groups and using it would make it clearer for people to understand the how properties should be listed.

Current error reporting:

scss/_forms.scss
  13:3  ✖  Expected "font-weight" to come before "color"              order/properties-order
  14:3  ✖  Expected "font-family" to come before "font-weight"        order/properties-order
  84:3  ✖  Expected "padding-top" to come before "margin-bottom"      order/properties-order
 114:3  ✖  Expected "padding-top" to come before "margin-bottom"      order/properties-order
 117:3  ✖  Expected "line-height" to come before "color"              order/properties-order
 229:3  ✖  Expected "padding-left" to come before "margin-right"      order/properties-order

Error reporting with stylelint-config-rational-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

It would also decrease the amount of code we need to maintain.

CC @XhmikosR

Maybe we should add https://github.com/kristerkari/stylelint-high-performance-animation?

Or do something like stylelint/stylelint@072c164?

/CC @MartijnCuppens

It is Is it planned to add to this repos the ...-inline and ...-block properties since the support is quite good ?

ex :
margin-inline
padding-inline
border-inline
margin-block
padding-block
border-block

Hi,

this is just a GitHub reference that can be referenced by the commit messages that will allow stylelint 16

Blocked upstream by elirasza/stylelint-stylistic#17

WIP PR here: tagliala#1, blocked by tagliala#1 (comment)

We can remove the IE properties in our config for v5. Not sure how we should handle versioning for v4 and v5 than though.

CC @XhmikosR

I saw we are not directly using stylelint-scss in the project. And it is already a dependency of stylelint-config-recommended-scss.

For example, stylelint-config-standard-scss depends on stylelint-config-recommended-scss, but don't list stylelint-scss as direct dependency.

If this can be removed, I can open a Pull Request for this.

Actually, what about things that are not in that repo? I mean like background-visibility? But mainly, css grid.

https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-15.md

See https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/map-keys-quotes/README.md

This way we can avoid issues with Lib Sass converting color keys to hexadecimal numbers (See twbs/bootstrap#29702)

If we apply this rule, we 'll have to change all keys in scss/_utilities.scss, and this would also change other maps like the $grid-breakpoints.

$grid-breakpoints: (
  "xs": 0,
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px
) !default;

We also have to check where we use these maps in our docs.

Hi there,

I've just stumbled across this project, and wanted to give it a spin.
In my postcss.config.js I've replaced stylelint-config-standard with stylelint-config-twbs-bootstrap/scss but am receiving a lot of linting warnings

// stylelint-config-twbs-bootstrap/scss
/src/style.scss 597 KiB {0} [built] [3624 warnings]

vs.

// stylelint-config-standard
./src/style.scss 597 KiB {0} [built] [4457 warnings]

For reference, my postcss.config.js

module.exports = () => ({
  plugins: {
    'stylelint': {
      "extends": "stylelint-config-twbs-bootstrap/scss",
    },
    'precss': {},
    'postcss-preset-env': {
      sourceMap: true,
    },
    'cssnano': {
      'autoprefixer': true
    }
  }
});

For reference, my style.scss

@import "~bootstrap/scss/bootstrap.scss";

So, it seems there already was a stylelint-config-bootstrap npm package. My guess is it was passed over at some point to @mdo.

Now, we can't remove old npm releases, so v0.1.0 that exists there is not the same as ours. We could rename everything to stylelint-config-twbs-bootstrap maybe.

Let me know how you guys want to proceed.

/CC @mdo @MartijnCuppens

I'm hitting this since upgrading from 2.1.0 to 2.2.0: stylelint/stylelint#5322
Rather than just blindly disabling it in your stylelint config, I believe it should be fixed upstream.

I don't think https://github.com/kristerkari/stylelint-config-recommended-scss suffers from it (yet) because they have yet to update to stylelint-config-recommended 5.0 (which enables this rule). So perhaps the problem is in this repo and related to how you extend the scss config as well as your own css config? Not sure how the priorities work there.

@jeddy3: if you have any free time, I'd appreciate if you could help us here move forward :)

This might be a good chance to fix #123 too, but not strictly necessary.

@MartijnCuppens @ffoodd perhaps it makes sense to enable ignoreDefaults for no-duplicate-dollar-variables?

Originally posted by @XhmikosR in #101 (comment)

...and stop inheriting from css/index.js.

• The "at-rule-semicolon-space-before" rule is deprecated.
• The "at-rule-name-space-after" rule is deprecated.
• The "block-closing-brace-empty-line-before" rule is deprecated.
• The "block-closing-brace-newline-after" rule is deprecated.
• The "block-opening-brace-space-before" rule is deprecated.
• The "declaration-block-semicolon-newline-before" rule is deprecated.
• The "max-empty-lines" rule is deprecated.
• The "max-line-length" rule is deprecated.
• The "number-leading-zero" rule is deprecated.
• The "selector-list-comma-newline-before" rule is deprecated.
• The "selector-list-comma-space-after" rule is deprecated.
• The "selector-list-comma-space-before" rule is deprecated.
• The "unicode-bom" rule is deprecated.
• The "value-list-comma-newline-after" rule is deprecated.
• The "value-list-comma-newline-before" rule is deprecated.
• The "value-list-comma-space-after" rule is deprecated.

It gives false-positives for regular SCSS functions like lighten or map-get.

Hi,

I think we can make this config more strict by adding these rules:

• function-calc-no-invalid
• scss/at-each-key-value-single-line
• scss/at-if-no-null
• scss/at-rule-conditional-no-parentheses (Autofixable)
• scss/double-slash-comment-whitespace-inside
• scss/function-color-relative
• scss/function-quote-no-quoted-strings-inside (Autofixable)
• scss/function-unquote-no-unquoted-strings-inside (Autofixable)

Applying them to Bootstrap requires some manual fixes, but it's a simple task. The errors that will occur are:

$ npx stylelint "**/*.{css,scss}" --formatter verbose --fix

...

31 problems found
 severity level "error": 31
  scss/at-if-no-null: 11
  scss/function-color-relative: 18
  scss/dollar-variable-default: 1
  scss/double-slash-comment-whitespace-inside: 1

Note: scss/dollar-variable-default is irrelevant to this change.

I would be happy to send a PR if it's fine.