Flag images not loading when importing into application.scss with postcss

[msuliq]

Hi there, thanks for the awesome gem,
I have found an issue when the flags do not render in production but render in development mode on Rails 6 app.
The assets were loaded as comment in application.scss file:

/*
 *= require flag-icon
 */

And node processing css differently for development and production environments was the reason for flag icons not rendering in production.
During asset compilation I saw the message
$ NODE_ENV=${RAILS_ENV:-development} postcss ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css
That explained it.

To resolve the issue with icons not showing up in production, I decided to change application.scss to import as:

// rails-flag-icon
@import "flag-icon";

However, asset compilation failed with error:

Error: Failed to find 'flag-icon'
  in [
    /Users/.../.../.../app/assets/stylesheets
  ]
    at /Users/.../.../.../node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/Users/.../.../.../node_modules/postcss/lib/lazy-result.js:396:11)
    at async Promise.all (index 0)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
rake aborted!
cssbundling-rails: Command css:build failed, ensure yarn is installed and `yarn build:css` runs without errors

Tasks: TOP => assets:precompile => css:build
(See full trace by running task with --trace)

So I tried manually adding the flag-icon.scss file and flag-icon-sass directory to app/assets/stylesheets. And ended up with error message:

yarn install v1.22.4
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.54s.
yarn run v1.22.4
$ NODE_ENV=${RAILS_ENV:-development} postcss ./app/assets/stylesheets/application.scss  -o ./app/assets/builds/application.css
CssSyntaxError: postcss-advanced-variables: /Users/.../.../.../app/assets/stylesheets/flag-icon-sass/flag-icon-list.scss:2:22: Could not resolve the variable "$include" within "$include"

  1 | @if variable-exists(include) {
> 2 |   @each $country in $include {
    |                      ^
  3 |     @include flag-icon($country);
  4 |   }

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
rake aborted!
cssbundling-rails: Command css:build failed, ensure yarn is installed and `yarn build:css` runs without errors

Tasks: TOP => assets:precompile => css:build
(See full trace by running task with --trace)

Is there any way to workaround different css compilation for development and production?