ec-cube
ec-cube copied to clipboard
EC-CUBE
npm run build 時のDeplicate error を修正
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 Report
All modified and coverable lines are covered by tests :white_check_mark:
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.
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
