Skip to content

Simplify eslint configs, modernize eslint config for docsJS #42270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mdo wants to merge 1 commit into
base: v6-dev
Choose a base branch
from
Open

Simplify eslint configs, modernize eslint config for docsJS #42270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
254 changes: 0 additions & 254 deletions .eslintrc.json
View file
Open in desktop

This file was deleted.

21 changes: 6 additions & 15 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,12 @@ const localRules = {
'unicorn/no-unused-properties': 'error',
'unicorn/numeric-separators-style': 'off',
'unicorn/prefer-array-flat': 'off',
'unicorn/prefer-at': 'off',
'unicorn/prefer-at': 'error',
'unicorn/prefer-dom-node-dataset': 'off',
'unicorn/prefer-global-this': 'off',
'unicorn/prefer-module': 'off',
'unicorn/prefer-query-selector': 'off',
'unicorn/prefer-spread': 'off',
'unicorn/prefer-spread': 'error',
'unicorn/prefer-string-raw': 'off',
'unicorn/prefer-string-replace-all': 'off',
'unicorn/prefer-structured-clone': 'off',
Expand Down Expand Up @@ -266,17 +266,14 @@ const eslintConfig = [
}
},

// site/** — browser, script mode, older ecmaVersion
// site/** — browser, script mode
{
files: ['site/**'],
languageOptions: {
globals: {
...globals.browser
},
sourceType: 'script',
parserOptions: {
ecmaVersion: 2019
Copy link
Copy Markdown
Member

@XhmikosR XhmikosR Apr 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't just use latest. What is latest now, won't be the same latest later and so on... IMHO we should just stop having hardcoded browser versions in .browserslistrc and just support latest. Then, this change would be OK too and we could drop babel and co altogether.

Copy link
Copy Markdown
Contributor

@alpadev alpadev Apr 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be fair our browserslist is outdated anyway or should I say incompatible with the CSS features we use in v6 (and maybe even v5 to some extent).

While Babel handles transpiling/polyfilling our JS, not sure about the CSS. I know we have autoprefixer in place but that handles only vendor prefixes not any sort of workarounds or polyfills. (Maybe postcss does?)

I wanted to open a discussion about this already, but due lack of time (as usual 😔) I wasn't able to, yet. I meant to propose to maybe use some baseline definition e.g. baseline widely available (see https://github.com/browserslist/browserslist?tab=readme-ov-file#queries). To read more about baseline in general you may want to check out https://web-platform-dx.github.io/web-features/. Besides that MDN or CanIUse shows the baseline support too, so I'd say it's already something that is well adopted.

Image Image

Also I already locally tested some stylelint plugins to check if we use CSS that matches the browsers we wanted to support.

Those three I tried been stylelint-no-unsupported-browser-features, stylelint-browser-compat and stylelint-plugin-use-baseline.

There are pros and cons to all of them - stylelint-no-unsupported-browser-features and stylelint-browser-compat are more verbose about browser incompatibility like showing versions that don't support a certain feature, on the other hand stylelint-plugin-use-baseline doesn't. It just tell you that a feature isn't available.

On the positive side stylelint-plugin-use-baseline is very configurable compared to the other two and it looks like it's the most consistent in finding unsupported properties/values.

Image

Eslint has support for baseline too: https://baselinejs.vercel.app/ or eslint-plugin-compat

Last but not least with our current browserslist we support 87.5% of global users (according to https://browsersl.ist/)

Image

While baseline widely available with downstream covers 89.3%

Image

Important

I have to mention that we use some CSS in v6 that isn't "widely available" yet because it's too new.

@mdo @XhmikosR thoughts?

}
sourceType: 'script'
},
rules: {
'no-new': 'off',
Expand All @@ -296,10 +293,7 @@ const eslintConfig = [
'site/src/plugins/*.js'
],
languageOptions: {
sourceType: 'module',
parserOptions: {
ecmaVersion: 2020
}
sourceType: 'module'
},
// These files may have eslint-disable directives for the old import plugin
linterOptions: {
Expand All @@ -322,10 +316,7 @@ const eslintConfig = [
'site/src/assets/examples/sidebars/sidebars.js'
],
languageOptions: {
sourceType: 'module',
parserOptions: {
ecmaVersion: 2020
}
sourceType: 'module'
},
rules: {
'import/no-unresolved': 'off'
Expand Down
4 changes: 2 additions & 2 deletions js/src/combobox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ class Combobox extends BaseComponent {

const items = this._getVisibleItems()
if (items.length > 0) {
const target = key === ARROW_DOWN_KEY ? items[0] : items[items.length - 1]
const target = key === ARROW_DOWN_KEY ? items[0] : items.at(-1)
target.focus()
}

Expand Down Expand Up @@ -404,7 +404,7 @@ class Combobox extends BaseComponent {
event.preventDefault()
const items = this._getVisibleItems()
if (items.length > 0) {
const targetItem = key === HOME_KEY ? items[0] : items[items.length - 1]
const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
targetItem.focus()
}

Expand Down
2 changes: 1 addition & 1 deletion js/src/dom/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default {
// can be removed later when multiple key/instances are fine to be used
if (!instanceMap.has(key) && instanceMap.size !== 0) {
// eslint-disable-next-line no-console
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(instanceMap.keys())[0]}.`)
console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${[...instanceMap.keys()][0]}.`)
return
}

Expand Down
4 changes: 2 additions & 2 deletions js/src/dom/selector-engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ const getSelector = element => {

const SelectorEngine = {
find(selector, element = document.documentElement) {
return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
return [...Element.prototype.querySelectorAll.call(element, selector)]
},

findOne(selector, element = document.documentElement) {
return Element.prototype.querySelector.call(element, selector)
},

children(element, selector) {
return [].concat(...element.children).filter(child => child.matches(selector))
return [...element.children].filter(child => child.matches(selector))
},

parents(element, selector) {
Expand Down
6 changes: 3 additions & 3 deletions js/src/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ class Menu extends BaseComponent {
this._createFloating()

if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
for (const element of [].concat(...document.body.children)) {
for (const element of document.body.children) {
EventHandler.on(element, 'mouseover', noop)
}
}
Expand Down Expand Up @@ -249,7 +249,7 @@ class Menu extends BaseComponent {
this._closeAllSubmenus()

if ('ontouchstart' in document.documentElement) {
for (const element of [].concat(...document.body.children)) {
for (const element of document.body.children) {
EventHandler.off(element, 'mouseover', noop)
}
}
Expand Down Expand Up @@ -837,7 +837,7 @@ class Menu extends BaseComponent {
.filter(element => isVisible(element))

if (items.length) {
const targetItem = key === HOME_KEY ? items[0] : items[items.length - 1]
const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
targetItem.focus()
}

Expand Down
Loading
Loading