npm run build 時のDeplicate error を修正 #6248

ci-wataru-kashii · 2024-07-09T05:30:27Z

npm run build 実行したところ、calc()以外での除算のための/の使用は非推奨であり、Dart Sass 2.0.0で削除される予定です。とのこと
非推奨エラーを検出したため、修正しました。

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

追記：2024/07/09 14:40　エラー検出した下記についてもfixしました。

autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:930:3: start value has mixed support, consider using flex-start instead
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:1008:3: start value has mixed support, consider using flex-start instead
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:1064:3: start value has mixed support, consider using flex-start instead

自身のMac情報

$ sw_vers
ProductName:	macOS
ProductVersion:	12.6.3
BuildVersion:	21G419

$ npm -v
10.8.1

$ node -v
v18.20.3

エラー内容

$ npm run build

> [email protected] build
> gulp

[14:02:59] Using gulpfile ~/xxx/xxx/ec/gulpfile.js
[14:02:59] Starting 'default'...
[14:02:59] Starting '<anonymous>'...
[14:03:00] gulp-postcss: admin/assets/scss/app.css
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:930:3: start value has mixed support, consider using flex-start instead
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:1008:3: start value has mixed support, consider using flex-start instead
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:1064:3: start value has mixed support, consider using flex-start instead
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($columns, 12) or calc($columns / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
17 │     width: percentage(($columns/ 12));
   │                        ^^^^^^^^^^^^
   ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 17:24  makeSmColumn()
    html/template/default/assets/scss/component/_5.1.grid.scss 58:5   @import
    html/template/default/assets/scss/style.scss 34:9                 root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, 12) or calc(1 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
172 │       margin-left: percentage((1 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 172:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 170:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(2, 12) or calc(2 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
196 │       margin-left: percentage((2 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 196:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 194:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3, 12) or calc(3 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
218 │       margin-left: percentage((3 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 218:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 216:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4, 12) or calc(4 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
241 │       margin-left: percentage((4 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 241:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 239:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

[14:03:07] Finished '<anonymous>' after 8.39 s
[14:03:07] Starting '<anonymous>'...
[14:03:08] gulp-postcss: admin/assets/scss/app.css
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:930:3: start value has mixed support, consider using flex-start instead
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:1008:3: start value has mixed support, consider using flex-start instead
autoprefixer: /xxx/xxx/ec/html/template/admin/assets/scss/app.css:1064:3: start value has mixed support, consider using flex-start instead
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($columns, 12) or calc($columns / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
17 │     width: percentage(($columns/ 12));
   │                        ^^^^^^^^^^^^
   ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 17:24  makeSmColumn()
    html/template/default/assets/scss/component/_5.1.grid.scss 58:5   @import
    html/template/default/assets/scss/style.scss 34:9                 root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, 12) or calc(1 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
172 │       margin-left: percentage((1 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 172:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 170:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(2, 12) or calc(2 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
196 │       margin-left: percentage((2 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 196:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 194:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3, 12) or calc(3 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
218 │       margin-left: percentage((3 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 218:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 216:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4, 12) or calc(4 / 12)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
241 │       margin-left: percentage((4 / 12));
    │                                ^^^^^^
    ╵
    html/template/default/assets/scss/component/_5.1.grid.scss 241:32  @content
    html/template/default/assets/scss/mixins/_media.scss 20:5          media-desktop()
    html/template/default/assets/scss/component/_5.1.grid.scss 239:5   @import
    html/template/default/assets/scss/style.scss 34:9                  root stylesheet

[14:03:17] Finished '<anonymous>' after 9.9 s
[14:03:17] Starting '<anonymous>'...
[14:03:59] assets by path *.js 11.3 MiB
  assets by info 8.67 MiB [immutable] 463 assets
  asset admin.bundle.js 1.27 MiB [emitted] [minimized] [big] (name: admin) 2 related assets
  asset install.bundle.js 1.17 MiB [emitted] [minimized] [big] (name: install) 2 related assets
  asset front.bundle.js 225 KiB [emitted] [minimized] (name: front) 2 related assets
assets by path *.png 25.8 KiB
  asset ab03a9ee6913b4febe4e.png 4.3 KiB [emitted] [immutable] [from: node_modules/jquery-ui/themes/base/images/ui-icons_555555_256x240.png] (auxiliary name: admin)
  asset 0ac06c1fa804bba86ba6.png 4.29 KiB [emitted] [immutable] [from: node_modules/jquery-ui/themes/base/images/ui-icons_777777_256x240.png] (auxiliary name: admin)
  asset 64e92ec7a4c35cd86769.png 4.29 KiB [emitted] [immutable] [from: node_modules/jquery-ui/themes/base/images/ui-icons_444444_256x240.png] (auxiliary name: admin)
  + 3 assets
assets by chunk 15.4 KiB (auxiliary name: front)
  asset 3d3eb30384470a0a5f6d.gif 5.48 KiB [emitted] [immutable] [from: node_modules/slick-carousel/slick/ajax-loader.gif] (auxiliary name: front)
  asset 650c6c71d75bb6fca50d.svg 2.85 KiB [emitted] [immutable] [from: node_modules/slick-carousel/slick/fonts/slick.svg] (auxiliary name: front)
  asset 253ac843d9cff70a5ac5.eot 2.73 KiB [emitted] [immutable] [from: node_modules/slick-carousel/slick/fonts/slick.eot] (auxiliary name: front)
  + 2 assets


WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  757ef1b870d065a77ce3c182a03d93ad.js (491 KiB)
  c93947dfac92c92c3999d1d51fc5b516.js (495 KiB)
  9ebb9ac2c9c875649c72722bc585d445.js (313 KiB)
  6c6d192b6860b4508a14c2d04769a35e.js (498 KiB)
  5398e3b596fa15df4d84b2aa0464e5c4.js (1.51 MiB)
  admin.bundle.js (1.27 MiB)
  install.bundle.js (1.17 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  admin (1.27 MiB)
      admin.bundle.js
  install (1.17 MiB)
      install.bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.76.0 compiled with 3 warnings
[14:03:59] Finished '<anonymous>' after 42 s
[14:03:59] Finished 'default' after 1 min

概要(Overview・Refs Issue)

エラー出力された詳細の
More info and automated migrator: https://sass-lang.com/d/slash-div
よりSassの公式ドキュメント引用

Sassは、/を区切り文字としてのみ使用し、除算にはmath.div()関数を使用するよう変更しています。
この変更は新しいCSS機能に合わせたものです。
移行期間中は、除算に/を使用すると非推奨の警告が表示されます。
コードの更新を促進するための自動移行ツールも提供されています。
詳細は  https://sass-lang.com/documentation/breaking-changes/slash-div/
をご覧ください。

方針(Policy)

Sassの公式ドキュメントに従い、@use "sass:math"; の使用と、該当箇所を math.div(xxx, xxx) の形式に変更しました。
引用URL https://sass-lang.com/documentation/breaking-changes/slash-div/#transition-period
エラーメッセージより、他のgithub issue でも同様の事象があり。

実装に関する補足(Appendix)

テスト（Test)

実行結果

$ npm run build

> [email protected] build
> gulp

[14:35:58] Using gulpfile ~/xxx/xxx/ec/gulpfile.js
[14:35:58] Starting 'default'...
[14:35:58] Starting '<anonymous>'...
[14:36:07] Finished '<anonymous>' after 8.85 s
[14:36:07] Starting '<anonymous>'...
[14:36:16] Finished '<anonymous>' after 9.14 s
[14:36:16] Starting '<anonymous>'...
[14:36:59] assets by path *.js 11.3 MiB
  assets by info 8.67 MiB [immutable] 463 assets
  asset admin.bundle.js 1.27 MiB [emitted] [minimized] [big] (name: admin) 2 related assets
  asset install.bundle.js 1.17 MiB [emitted] [minimized] [big] (name: install) 2 related assets
  asset front.bundle.js 225 KiB [emitted] [minimized] (name: front) 2 related assets
assets by path *.png 25.8 KiB
  asset ab03a9ee6913b4febe4e.png 4.3 KiB [emitted] [immutable] [from: node_modules/jquery-ui/themes/base/images/ui-icons_555555_256x240.png] (auxiliary name: admin)
  asset 0ac06c1fa804bba86ba6.png 4.29 KiB [emitted] [immutable] [from: node_modules/jquery-ui/themes/base/images/ui-icons_777777_256x240.png] (auxiliary name: admin)
  asset 64e92ec7a4c35cd86769.png 4.29 KiB [emitted] [immutable] [from: node_modules/jquery-ui/themes/base/images/ui-icons_444444_256x240.png] (auxiliary name: admin)
  + 3 assets
assets by chunk 15.4 KiB (auxiliary name: front)
  asset 3d3eb30384470a0a5f6d.gif 5.48 KiB [emitted] [immutable] [from: node_modules/slick-carousel/slick/ajax-loader.gif] (auxiliary name: front)
  asset 650c6c71d75bb6fca50d.svg 2.85 KiB [emitted] [immutable] [from: node_modules/slick-carousel/slick/fonts/slick.svg] (auxiliary name: front)
  asset 253ac843d9cff70a5ac5.eot 2.73 KiB [emitted] [immutable] [from: node_modules/slick-carousel/slick/fonts/slick.eot] (auxiliary name: front)
  + 2 assets


WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  757ef1b870d065a77ce3c182a03d93ad.js (491 KiB)
  c93947dfac92c92c3999d1d51fc5b516.js (495 KiB)
  9ebb9ac2c9c875649c72722bc585d445.js (313 KiB)
  6c6d192b6860b4508a14c2d04769a35e.js (498 KiB)
  5398e3b596fa15df4d84b2aa0464e5c4.js (1.51 MiB)
  admin.bundle.js (1.27 MiB)
  install.bundle.js (1.17 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  admin (1.27 MiB)
      admin.bundle.js
  install (1.17 MiB)
      install.bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.76.0 compiled with 3 warnings
[14:36:59] Finished '<anonymous>' after 44 s
[14:36:59] Finished 'default' after 1.02 min

相談（Discussion）

マイナーバージョン互換性保持のための制限事項チェックリスト

既存機能の仕様変更はありません
フックポイントの呼び出しタイミングの変更はありません
フックポイントのパラメータの削除・データ型の変更はありません
twigファイルに渡しているパラメータの削除・データ型の変更はありません
Serviceクラスの公開関数の、引数の削除・データ型の変更はありません
入出力ファイル(CSVなど)のフォーマット変更はありません

レビュワー確認項目

動作確認
コードレビュー
E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
互換性が保持されているか
セキュリティ上の問題がないか
- 権限を超えた操作が可能にならないか
- 不要なファイルアップロードがないか
- 外部へ公開されるファイルや機能の追加ではないか
- テンプレートでのエスケープ漏れがないか

codecov · 2024-07-09T06:12:47Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.79%. Comparing base (4a4d556) to head (24671cf).
Report is 70 commits behind head on 4.3.

Additional details and impacted files

@@           Coverage Diff           @@
##              4.3    #6248   +/-   ##
=======================================
  Coverage   82.79%   82.79%           
=======================================
  Files         480      480           
  Lines       26425    26425           
=======================================
  Hits        21879    21879           
  Misses       4546     4546

Flag	Coverage Δ
E2E	`82.79% <ø> (ø)`
Unit	`82.79% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

dotani1111 · 2024-07-22T05:18:52Z

@ci-wataru-kashii
PRありがとうございます。
4.3リリース後にマージしたいと思います。

ci-wataru-kashii added 2 commits July 9, 2024 14:15

npm run build 時のDeplicate error を修正

934b29e

Use flex-start/flex-end

24671cf

dotani1111 added bug bug:Low labels Jul 22, 2024

dotani1111 added this to the 4.3.x milestone Jul 22, 2024

nanasess approved these changes Sep 11, 2024

View reviewed changes

dotani1111 approved these changes Sep 11, 2024

View reviewed changes

ji-eunsoo approved these changes Sep 11, 2024

View reviewed changes

dotani1111 merged commit 1a0f595 into EC-CUBE:4.3 Sep 11, 2024
96 checks passed

ci-wataru-kashii deleted the fix/Deprecate_division_Outside_Of_Calc branch September 27, 2024 01:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

npm run build 時のDeplicate error を修正 #6248

npm run build 時のDeplicate error を修正 #6248

ci-wataru-kashii commented Jul 9, 2024 •

edited

Loading

codecov bot commented Jul 9, 2024 •

edited

Loading

dotani1111 commented Jul 22, 2024

npm run build 時のDeplicate error を修正 #6248

npm run build 時のDeplicate error を修正 #6248

Conversation

ci-wataru-kashii commented Jul 9, 2024 • edited Loading

概要(Overview・Refs Issue)

方針(Policy)

実装に関する補足(Appendix)

テスト（Test)

相談（Discussion）

マイナーバージョン互換性保持のための制限事項チェックリスト

レビュワー確認項目

codecov bot commented Jul 9, 2024 • edited Loading

Codecov Report

dotani1111 commented Jul 22, 2024

ci-wataru-kashii commented Jul 9, 2024 •

edited

Loading

codecov bot commented Jul 9, 2024 •

edited

Loading