Skip to content

fix: resolve CSS descending specificity returned by Biome #548

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

Merged
ghiscoding merged 1 commit into from
Oct 24, 2026
Merged

fix: resolve CSS descending specificity returned by Biome #548

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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"pnpm": "11.x"
},
"devDependencies": {
"@biomejs/biome": "^2.5.15",
"@biomejs/biome": "^2.6.2",
"@lerna-lite/cli": "^5.6.3",
"@lerna-lite/publish": "^5.6.3",
"@lerna-lite/watch": "^5.6.3",
Expand Down
346 changes: 174 additions & 172 deletions packages/multiple-select-vanilla/CHANGELOG.md
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions packages/multiple-select-vanilla/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Multiple-Select-Vanilla

## Live Demo

Available [**Live demo**](https://ghiscoding.github.io/multiple-select-vanilla/) to see all available options/methods (there's a lot).

## Installation
Expand Down Expand Up @@ -36,7 +37,7 @@ const ms = multipleSelect('.multiple-select');
import { multipleSelect } from 'multiple-select-vanilla';

const ms = multipleSelect('.multiple-select', {
data: ['First', 'Second'] // native string/number/boolean
data: ['First', 'Second'], // native string/number/boolean
});

const ms = multipleSelect('.multiple-select', {
Expand All @@ -46,7 +47,7 @@ const ms = multipleSelect('.multiple-select', {
{ text: 'Second', value: 2 },
{ text: 'Third', value: 3 },
{ text: 'Fourth', value: 4 },
]
],
});
```

Expand All @@ -61,10 +62,12 @@ const ms = multipleSelect('.multiple-select', {
## Major Changes

### version 3.0

- remove deprecated options
- new Modern Look by using SVG icons

### version 4.0

- build ESM-Only and drop CJS (CommonJS) build (aka `require()`)

### version 5.0
Expand Down
4 changes: 3 additions & 1 deletion packages/multiple-select-vanilla/src/styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
// we will also use the name to create a CSS variable so that user could override any of the icon
// by providing the full url string without needing else since it was already created
@mixin createSvgStyle($cssVarName, $svgPath) {
--#{$cssVarName}: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="#{$svgPath}"/%3E%3C/svg%3E');
--#{$cssVarName}: url(
'data:image/svg+xml;utf8,%3Csvg viewBox="0 0 24 24" display="inline-block" height="1em" width="1em" vertical-align="text-bottom" xmlns="http://www.w3.org/2000/svg" %3E%3Cpath fill="currentColor" d="#{$svgPath}"/%3E%3C/svg%3E'
);
-webkit-mask: var(--#{$cssVarName}) no-repeat;
mask: var(--#{$cssVarName}) no-repeat;
mask-size: 100% 100%;
Expand Down
15 changes: 8 additions & 7 deletions packages/multiple-select-vanilla/src/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,16 +124,17 @@ $ms-select-all-text-font-weight: normal !default;
$ms-select-all-text-color: color.adjust($ms-primary-color, $lightness: -5%) !default;
$ms-select-all-text-hover-color: transparent !default;

// Interpolate mixed digit/letter hex colors that Biome otherwise misreads as units in custom properties.
.ms-dark-mode {
--ms-checkbox-color: #{color.adjust($ms-primary-color, $lightness: 10%)};
--ms-checkbox-hover-color: #{color.adjust($ms-primary-color, $lightness: 13%)};
--ms-checkbox-icon-container-border: 1px solid #797979;
--ms-choice-border: 1px solid #757575;
--ms-choice-bgcolor: #262b2f;
--ms-choice-bgcolor: #{#262b2f};
--ms-choice-color: #d4d4d4;
--ms-choice-focus-border-color: #{color.adjust($ms-primary-color, $lightness: 5%)};
--ms-choice-focus-box-shadow: 0 0 0 2px #{rgba($ms-primary-color, 0.2)};
--ms-drop-background: #2a2f34;
--ms-drop-background: #{#2a2f34};
--ms-drop-border: 1px solid #585858;
--ms-drop-color: #cccccc;
--ms-drop-hide-radio-hover-bgcolor: #{color.adjust($ms-primary-color, $lightness: -5%)};
Expand All @@ -142,16 +143,16 @@ $ms-select-all-text-hover-color: transparent !default;
--ms-icon-color: #bcbcbc;
--ms-icon-color-hover: #d0d0d0;
--ms-option-highlight-bg-color: #{color.adjust($ms-primary-color, $lightness: -10%)};
--ms-ok-button-bg-color: #262b2f;
--ms-ok-button-bg-hover-color: #24282c;
--ms-ok-button-border-color: #4a4a4a;
--ms-ok-button-bg-color: #{#262b2f};
--ms-ok-button-bg-hover-color: #{#24282c};
--ms-ok-button-border-color: #{#4a4a4a};
--ms-ok-button-text-color: #{color.adjust($ms-primary-color, $lightness: 5%)};
--ms-ok-button-text-hover-color: #{color.adjust($ms-primary-color, $lightness: 5%)};
--ms-optgroup-color: #fff;
--ms-search-input-bg-color: #2f353a;
--ms-search-input-bg-color: #{#2f353a};
--ms-search-input-color: #d4d4d4;
--ms-search-input-border: 1px solid #757575;
--ms-select-all-border-bottom: 1px solid #5d5d5d;
--ms-select-all-border-bottom: 1px solid #{#5d5d5d};
--ms-select-all-text-color: #fff;
--ms-select-all-text-font-weight: bold;
}
Loading
Loading