New flag build system for consistent flag images

[bgb10]

(Made new PR due to merge conflict, existing one is #1729) PR for Issue #1668

Run npm run build:img and npm run build:css for checking differences.

• Important: There's a discrepancy in the country code for Ascension Island between flag-icons and intl-tel-input. flag-icons uses 'sh-ac' as the country code for Ascension Island. However, intl-tel-input uses 'ac' for the same. A conversion process is implemented to bridge this difference.

• Library Change for Uniform Flag Images:

  • Switched from the region-flags library to flag-icons. This change was made because region-flags provided inconsistent flag images. flag-icons offers uniform 4:3 ratio flag images, improving overall consistency.

• New Flag Sprite Generation Logic:

  • Developed new sprite generation logic to work with the updated flag library. Maintained support for both retina (2x) and standard (1x) resolutions.

• Streamlined Build Process:

  • Simplified the build workflow by consolidating tasks. Now, only a single task (generate-metadata-scss) is required for flag processing. Removed all other redundant tasks, significantly streamlining the build process.

• Improved Performance with Reduced File Size:

  • Achieved a reduction in sprite file size for 2x resolution. The file size decreased from 138KB to 101KB, a reduction of approximately 27%.

[jackocnr]

Thank you so much! This is incredible work 🎉

The new build task works perfectly, as well as the new images/CSS. Amazing.

Some feedback:

• Gruntfile.js: It's amazing to see this simplification! I see we no longer need several grunt tasks e.g. responsive_images, evenizer, imagemin - can we delete this stale code in the root grunt/ directory, and uninstall the related dependencies from package.json? e.g. grunt-responsive-images, grunt-exec, grunt-imagemin, grunt-spritesmith
• Package.json: we can also remove the old region-flags dependency now. Also, can we move the 2 new dependencies into the devDependencies section as they are not required during runtime, so most users of this plugin will not need to install these.

Also some non-blocking feedback (could be done in a follow-up PR if need be):

• PNG files: Recently, when I switched the flag sprite images from PNG to WEBP, I got a complaint that some (legacy) systems can't handle WEBP, so ideally we would still provide PNGs as well - would that be possible?
• metadata.scss: I see the @2x flag sprite width has grown by about 350px - do you know why that has happened? Are we including flags we don't need? Looking further, I see in the intlTelInput.css build file, we've got several new classes like .iti__arab, .iti__cefta, .iti__eac, as well as several hyphenated ones like .iti__gb-eng. This is not a blocker, since, as you say, this filesize has already gone down from what it was (amazing!), but would it be possible to remove these unused flags/CSS classes? I think we basically want to just ignore any country code that is more than 2 characters. What do you think? UPDATE: actually, in an ideal world, we would filter out only the exact countries we need, like we do in the translations grunt task - we pull in the array of supported countries from src/js/intl-tel-input/data.ts, then later map them to just an array of iso2 country codes, and use that to decide which countries to include.
• Update CONTRIBUTING.md section "Updating the flag images".
• Experiment with removing the gaps between the flags in the sprite - these were added a long time ago due to an issue with some flags bleeding into others, but I wonder if that was just old browser bugs which are no longer a problem?
• Simplify the CSS - e.g. in metadata.scss we shouldn't need to repeat the width and height for every flag if they are the same. And in src/css/intlTelInput.scss, in the flag display code at the end of the file, we no longer need all that logic around width and height e.g. --iti-flag-width: #{$most-common-flag-width}; and the loop for $unique-flag-widths and $flag-width: map-get($values, width); etc.

Thanks again for your excellent contribution!

[bgb10]

Hi John, nice to see you! It seems like we meet often.

Done necessary tasks:

• Remove unused dependencies/files
• Move new libraries (sharp, flag-icons) to devDependencies

  Done non-blocking but related about ‘compatibility’:

  

• Support PNG flag sprite

  Q. I think there's no fallback logic for browsers that don't support .webp. If that's the case, I think it would be appropriate to create a separate issue for this. (using image-set in .scss)

  Put off non-blocking but related about ‘docs’ and ‘refactor’:

• Simplify the CSS
• Update CONTRIBUTING.md section "Updating the flag images".
• Experiment with removing the gaps between the flags in the sprite.

  I think it would be better to quickly provide users with consistent flag sizes, and documentation or refactoring can be done later.

[jackocnr]

Amazing work, thanks again @bgb10 !!!

Q. I think there's no fallback logic for browsers that don't support .webp. If that's the case, I think it would be appropriate to create a separate issue for this. (using image-set in .scss)

I don't think it's worth us doing anything here - this only applies to a tiny subset of users who have to use legacy systems. I would just say in those cases they can manually update the CSS to point to the PNG files.

I think it would be better to quickly provide users with consistent flag sizes, and documentation or refactoring can be done later.

Completely agree. I've manually rebased and merged your commits (just to remove the need for that merge commit). I'll update the docs myself today.

So I think the 3 remaining tasks, for a follow-up PR, are:

• Filter the included flags based on the country data in src/js/intl-tel-input/data.ts (like we do in the translations grunt file)
• Simplify the CSS in metadata.scss and intlTelInput.scss now that we have fixed width/height
• Experiment with removing the gaps between the flags in the sprite

Thanks again Gwanbin, it's amazing to finally have consistent flag images! 💐

[jackocnr]

Released in v24.0.0 🎉

[jackocnr]

I've now implemented all 3 of those TODOs listed above (see v24.0.2)