* GDGT-3128: Pin browserslist to the versions we actually support
The documented floor (Chrome 70, Firefox 68, Edge 17, Safari 11) had drifted
far from reality. Auditing the shipped bundles turned up features that break
well above it:
- subgrid (Chrome 117), unguarded in two CSS modules
- :has() (Firefox 121), 248 occurrences; the postcss polyfill is disabled
- color-mix() (Chrome 111), including the ui/colors base palette
- toSorted/findLast (Safari 16.4) and URL.canParse (Chrome 120, Safari 17)
There are no polyfills to fall back on: core-js is not a dependency, so
preset-env injects nothing.
browserslist said "defaults", which resolves to Chrome 109 among others --
below our own floor -- so the build was targeting browsers the code breaks
on. Pin it to the audited versions instead.
The rspack swc-loaders hardcoded env.targets: ["defaults"], bypassing
package.json entirely. Dropping targets lets swc fall back to the
browserslist config, matching babel-loader and postcss.
Verified against the real postcss pipeline over all 826 CSS files. Prefix
output only improves: -webkit-backdrop-filter is now emitted (Safari needs it
through 17.6, and it was previously missing), and -webkit-background-clip is
dropped, which is safe because Chrome 120 is exactly where the unprefixed
form lands. The -moz-column-*/-o-* prefixes that go away were for Firefox
versions far below 121.
* GDGT-3128: Use the :global() function form in CSS modules
Pinning browserslist dropped `op_mini all` from the targets, and Opera Mini
was the only thing keeping postcss-preset-env on its expanded nesting
desugaring. With it gone, preset-env emits the spec-correct `:is()` form:
.editor :global .cm-panels -> :is(.editor :global) .cm-panels
That pulls `:global` inside `:is()`, where its positional "everything after
this is global" semantics no longer apply. css-loader then scoped the classes
it was meant to leave alone:
:local(.editor) .cm-panels -> :is(:local(.editor)) :local(.cm-panels)
CodeMirror renders real `.cm-editor`/`.cm-panels`/`.cm-content` elements, so
every rule in those blocks silently stopped applying -- 20 scoped selectors and
0 global in CodeMirror.module.css alone. That took out three e2e specs:
cc-typing-suggestion, native-reproductions and transforms.
The `:global()` function form binds global-ness to a selector node instead of a
position, so no amount of selector rearrangement can separate it from the class.
Verified to hold three levels deep, including under `:is()` wrapping.
Selector output is otherwise unchanged: compiling each file under the old and
new configs and comparing the post-CSS-modules selector sets gives an exact
match, except for a `::-moz-placeholder` that the browserslist pin drops on its
own (Firefox 121 has it unprefixed).
The stylelint rule catches the bare form. It also flags a top-level `:global {}`
block, which happens to work today only because a lone `:global` is a single
compound and escapes the `:is()` wrap -- one more nesting level and it breaks
the same way.
* GDGT-3128: Raise the Safari floor to 18.2 for auxclick
`auxclick` lands in Safari and iOS Safari 18.2 -- every version through 18.1
reports `n` in caniuse. There are 12 unguarded `onAuxClick` handlers in app
source (19 counting tests), so 17 was never a floor we actually met.
Chrome (55), Firefox (53) and Edge (79) are all far below their current floors,
so only Safari moves.
Side effect: `-webkit-backdrop-filter` is no longer emitted. Safari needed it
only through 17.6, so past 18.2 autoprefixer correctly drops it. The same bump
also covers scrollbar-gutter/width/color, which all wanted exactly Safari 18.2.
* add base color rule to stylelint
* allow in colors file
* lint in CI
* better highlighting
* css fixes
* fix all improper color use
* Update frontend/lint/stylelint-rules/no-base-colors.js
Co-authored-by: Phoomparin Mano <poom@metabase.com>
* Update Loki Snapshots
* fix color name
* Update Loki Snapshots
---------
Co-authored-by: Phoomparin Mano <poom@metabase.com>
Co-authored-by: Metabase Automation <github-automation@metabase.com>
* Mantine v7-1 squash
update deps
update UI configs
easy fixes
happy little typescript
updates after rebase
test fixes
fix rebase issues
admin-2, collections, custom-columns, dashbaord and dashboard-cards suites
fix clause popovers
fixing rebase issue
more rebase sadness:
more e2e
autocomplete adjustment
fixing nested popovers
adjusting a couple more pickers
more e2e fixes
fix mantine provider, searchbox errors
unit test adjustments
theme colors, filter labels
Relative Date Picker
more unit test fixes
* e2e adjustments
* [MANTINE] ci: find css variables that are used but never defined (#52947)
* ci: find css variables that are used but never defined
* only search in frontend and enterprise/frontend
* whitelist mantine css variables
* temporarily allow some css variables
* read mantine variables directly from mantine css file
* UI Regressions
* lint and type fixes. green unit test
* Cherry pick updates to the never defined variables script (#53049)
* Update bin/find-never-defined-css-variables/find-never-defined-css-variables.ts
Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>
* test: checks that it doesn't confuse definitions with usages
---------
Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>
* more adjustments for e2e tests
* adjustments
* embedding sdk green, maybe unit tests?
* loki regressions
* test(sdk): migrate theme provider test to e2e to work with mantine v7 (#53290)
* test: migrate theme provider test to e2e to work with mantine v7
* re-put there things i removed by mistake
* preview and type fixes
* I think I'm making this better?
* fixing colors, unit tests
* scoping css vars and static classes, other things
* class prefix, scoping input css
* small adjustments
* shamelessly poach Nicolo's commit
* small fixes, should make Kamil happy :)
* finally green!
* type check
* chartsettingsinput fixes
* silly number types
* Adjustments for loki tests
* type fix
* undo Question View Download changes
* adjusting smart scalar
* updating loki reference
---------
Co-authored-by: Nick Fitzpatrick <nickfitz.582@gmail.com>
Co-authored-by: Nicolò Pretto <info@npretto.com>
Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>
* add base color palette
* add some more comments
* fix formatting and color copy-pasta errors
* ignore existing bad base color usage
---------
Co-authored-by: Oisin Coveney <oisin@metabase.com>
* lint: add stylelint support for emotion components
* drop comment
* fix pattern order
* Use one version of typescript
* use :focus not :outline
* Use the logical CSS property "inset-inline-start:" (not "inline-start:" which doesn't exist) as replacement for the physical css property "left:"
* Use mb-color-focus for focus color
* Drop dead code
---------
Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com>
