twbs / stylelint-config-twbs-bootstrap Goto Github PK
View Code? Open in Web Editor NEWStylelint config for Bootstrap
Home Page: https://getbootstrap.com
License: MIT License
Stylelint config for Bootstrap
Home Page: https://getbootstrap.com
License: MIT License
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.
Just moving this issue from twbs/bootstrap#24519 to this repo
Actually, what about things that are not in that repo? I mean like background-visibility? But mainly, css grid.
Maybe we should add https://github.com/kristerkari/stylelint-high-performance-animation?
Or do something like stylelint/stylelint@072c164?
/CC @MartijnCuppens
See #3 (review)
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.
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
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
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
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.
It gives false-positives for regular SCSS functions like lighten
or map-get
.
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
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
Ref: twbs/bootstrap#27490
Edit: npm setup will be continued when everything works
Hi,
I think we can make this config more strict by adding these rules:
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.
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,
@MartijnCuppens @ffoodd perhaps it makes sense to enable ignoreDefaults
for no-duplicate-dollar-variables
?
Originally posted by @XhmikosR in #101 (comment)
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.
...and stop inheriting from css/index.js.
Deprecation warnings:
- The "scss/at-import-no-partial-leading-underscore" rule is deprecated.
- 'at-import-no-partial-leading-underscore' has been deprecated, and will be removed in '6.0'. Use 'load-no-partial-leading-underscore' instead. See: https://github.com/stylelint-scss/stylelint-scss/blob/v5.2.1/src/rules/at-import-no-partial-leading-underscore/README.md
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.