[PR #1356] [MERGED] Migrate SASS imports to @use-based code #1363

New issue

Closed

opened 2026-03-03 14:43:20 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 14:43:20 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/lipis/flag-icons/pull/1356
Author: @edwin-shdw
Created: 4/24/2025
Status: ✅ Merged
Merged: 5/29/2025
Merged by: @lipis

Base: main ← Head: main

📝 Commits (7)

8f35331 refactor: switch to @use-based sass imports
31ffd56 docs: update README to include SASS usage examples
604b56e style: update double quotes for consistency
9898262 refactor: move flag icons into $flag-icons-included-countries variable
3bc768e docs: extend sass docs with additional example and path to all variables
697f2ac style: add commas on list
2b6e1dd style: satisfy format test

📊 Changes

5 files changed (+305 additions, -285 deletions)

View changed files

📝 README.md (+17 -0)
📝 sass/_flag-icons-base.scss (+5 -3)
📝 sass/_flag-icons-list.scss (+4 -279)
📝 sass/_variables.scss (+276 -0)
📝 sass/flag-icons.scss (+3 -3)

📄 Description

This PR switches from SASS's @import-based code to the new @use-based code, since SASS deprecated the @import rule. It does not change anything in the styles itself (new build is identical to previous) but introduces the opportunity to use the new @use import:

@use "node_modules/flag-icons/sass/flag-icons";

// or with a specific set of flags
@use "node_modules/flag-icons/sass/flag-icons" with (
    $flag-icons-included-countries: ("gr", "de", "gb"),
);

Also previous workarounds where you first define the variable and import the package afterwards are still working, so no breaking change is introduced. e.g:

$flag-icons-included-countries: ("gr", "de", "gb");
@import 'node_modules/flag-icons/sass/flag-icons';

Related Issues:

Closes #1231
Closes #1324
Closes #1335

Addition:

I suggest to move all countries from the whole @includes inside _flag-icons-list.scss into the $flag-icons-included-countries variable.

This would make the check at _flag-icons-list.scss#L5 obsolete as imports that define a custom $flag-icons-included-countries variable would simply overwrite the default.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/lipis/flag-icons/pull/1356 **Author:** [@edwin-shdw](https://github.com/edwin-shdw) **Created:** 4/24/2025 **Status:** ✅ Merged **Merged:** 5/29/2025 **Merged by:** [@lipis](https://github.com/lipis) **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (7) - [`8f35331`](https://github.com/lipis/flag-icons/commit/8f353312b90e5707c7ca3171c5e2e0a43b4a60e2) refactor: switch to @use-based sass imports - [`31ffd56`](https://github.com/lipis/flag-icons/commit/31ffd569884a7b6ab35763985205c388acf1aa0b) docs: update README to include SASS usage examples - [`604b56e`](https://github.com/lipis/flag-icons/commit/604b56ea78e3b3b42905e8e4fa0fa965f6df6607) style: update double quotes for consistency - [`9898262`](https://github.com/lipis/flag-icons/commit/9898262c283efb89e5f9327dbc0c8a83063ffa38) refactor: move flag icons into $flag-icons-included-countries variable - [`3bc768e`](https://github.com/lipis/flag-icons/commit/3bc768e522a994ffe31a347cae73cd683de22272) docs: extend sass docs with additional example and path to all variables - [`697f2ac`](https://github.com/lipis/flag-icons/commit/697f2ac67b59cdc8f6fe0b96be29bacd22823108) style: add commas on list - [`2b6e1dd`](https://github.com/lipis/flag-icons/commit/2b6e1ddec3ff965c0bde0f7f94159751801b1ff9) style: satisfy format test ### 📊 Changes **5 files changed** (+305 additions, -285 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+17 -0) 📝 `sass/_flag-icons-base.scss` (+5 -3) 📝 `sass/_flag-icons-list.scss` (+4 -279) 📝 `sass/_variables.scss` (+276 -0) 📝 `sass/flag-icons.scss` (+3 -3) </details> ### 📄 Description This PR switches from SASS's `@import`-based code to the new `@use`-based code, since [SASS deprecated the `@import` rule](https://sass-lang.com/documentation/at-rules/import/). It does not change anything in the styles itself (new build is identical to previous) but introduces the opportunity to use the new `@use` import: ```scss @use "node_modules/flag-icons/sass/flag-icons"; // or with a specific set of flags @use "node_modules/flag-icons/sass/flag-icons" with ( $flag-icons-included-countries: ("gr", "de", "gb"), ); ``` Also previous workarounds where you first define the variable and import the package afterwards are still working, so no breaking change is introduced. e.g: ```scss $flag-icons-included-countries: ("gr", "de", "gb"); @import 'node_modules/flag-icons/sass/flag-icons'; ``` Related Issues: - Closes #1231 - Closes #1324 - Closes #1335 --- #### Addition: I suggest to move all countries from the whole `@include`s inside [_flag-icons-list.scss](https://github.com/edwin-shdw/flag-icons/blob/31ffd569884a7b6ab35763985205c388acf1aa0b/sass/_flag-icons-list.scss#L11-L284) into the `$flag-icons-included-countries` variable. This would make the check at [_flag-icons-list.scss#L5](https://github.com/edwin-shdw/flag-icons/blob/31ffd569884a7b6ab35763985205c388acf1aa0b/sass/_flag-icons-list.scss#L5) obsolete as imports that define a custom `$flag-icons-included-countries` variable would simply overwrite the default. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>