build: Vite 8 & Lightning CSS#5090
Conversation
|
Preview (prod) → https://5090-prod.traq-preview.trapti.tech/ |
📝 WalkthroughWalkthroughCSSミニフィケーションパイプラインをesbuildからlightningcssに置き換え、viteを^7.3.1から^8.0.1にアップグレード、autoprefixerとesbuildプラグインを削除してlightningcssを追加。複数のVueコンポーネントでスタイルをモジュールスコープのグローバルブロックから専用の非モジュールスタイルブロックへリファクタリング。Vite設定からESBuildターゲットとPostCSS autoprefixerを削除し、SCSS compilerをモダンAPIに切り替え。 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/UI/FormRangeWithValue.vue (1)
3-12:⚠️ Potential issue | 🟠 Major
form-range-sliderクラスが DOM に到達しません。
ASliderコンポーネントはclass属性をルート要素にフォワードしません。関連コードスニペット（ASlider.vue）を確認すると、VueSliderを直接レンダリングしており、:classバインディングがありません。そのため、form-range-sliderクラスは実際の DOM 要素に適用されず、テーマスタイルが機能しません。他のファイル（
AudioPlayerTimeSlider.vue、AudioPlayerVolumeSlider.vue）では、クラスをラッパー<div>に適用しています。同様のパターンを使用してください。🐛 修正案: ASlider をラッパー div で囲む
<template> <div :class="$style.container"> - <ASlider - v-model="modelValue" - :class="[$style.range, 'form-range-slider']" - :min="min" - :max="max" - :disabled="disabled" - :tooltip="'none'" - :interval="interval" - :style="{ padding: '24px 0' }" - /> + <div :class="[$style.range, 'form-range-slider']"> + <ASlider + v-model="modelValue" + :min="min" + :max="max" + :disabled="disabled" + :tooltip="'none'" + :interval="interval" + :style="{ padding: '24px 0' }" + /> + </div> <SemiFixedSizeText
.rangeの CSS も確認し、flex: 1 1が新しいラッパー div に正しく適用されることを確認してください。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UI/FormRangeWithValue.vue` around lines 3 - 12, ASlider's :class binding (including 'form-range-slider') isn't forwarded to the rendered DOM because ASlider.vue renders VueSlider directly; wrap the ASlider usage in FormRangeWithValue.vue with a wrapper element (e.g., a <div>) and move the :class="[$style.range, 'form-range-slider']" and the inline style/padding onto that wrapper so the class reaches the DOM (mimic AudioPlayerTimeSlider.vue/AudioPlayerVolumeSlider.vue pattern), and verify the .range CSS (flex: 1 1) still applies to the new wrapper.
🧹 Nitpick comments (4)
src/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vue (1)
57-103: 未使用の@use 'sass:meta'が残っています。
:global()は CSS Modules の構文であり、Sass のmetaモジュールとは関係ありません。meta.load-cssが非モジュールスタイルに移動したため、このインポートは削除できます。♻️ 修正案
<style lang="scss" module> -@use 'sass:meta'; - $afterVolumeSliderWidth: 48px;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vue` around lines 57 - 103, Remove the unused Sass module import by deleting the line "@use 'sass:meta';" at the top of the stylesheet; ensure the rest of the rules (e.g., $afterVolumeSliderWidth, .volume, .volumeSlider, :global(.vue-slider-dot-handle)) remain unchanged since :global() is a CSS Modules construct and not dependent on the meta module.src/components/UI/FormRangeWithValue.vue (1)
47-59: 未使用の@use 'sass:meta'が残っています。
meta.load-cssが非モジュールスタイルブロックに移動したため、このインポートは不要です。♻️ 修正案
<style lang="scss" module> -@use 'sass:meta'; - .container {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UI/FormRangeWithValue.vue` around lines 47 - 59, Remove the unused Sass module import by deleting the line "@use 'sass:meta';" from the <style lang="scss" module> block in FormRangeWithValue.vue; the rest of the .container and .range rules can remain unchanged since meta.load-css was moved to non-module styles, so simply drop the `@use` declaration to eliminate the dead import.src/components/UI/AudioPlayer/AudioPlayerTimeSlider.vue (1)
48-67: 未使用の@use 'sass:meta'が残っています。
meta.load-cssが非モジュールの<style>ブロックに移動したため、モジュールスタイル内の@use 'sass:meta'は不要になりました。♻️ 修正案
<style lang="scss" module> -@use 'sass:meta'; - .timeSlider {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/UI/AudioPlayer/AudioPlayerTimeSlider.vue` around lines 48 - 67, Remove the unused Sass module import: delete the line "@use 'sass:meta';" from the <style lang="scss" module> block in AudioPlayerTimeSlider.vue (the block that defines .timeSlider and :global(.vue-slider-dot-handle)); confirm there are no remaining references to meta.* in that file (e.g., meta.load-css) and run the build/lint to ensure no other stylesheet usages remain.vite.config.ts (1)
80-92: Lightning CSS の明示的な設定が不足している可能性があります。PR の説明によると、ビルドターゲットが従来の Browserslist デフォルトから Vite のデフォルト (
baseline-widely-available) に変わります。もしカスタムターゲットが必要な場合は、css.lightningcssの設定を追加することを検討してください。Vite 8 のデフォルト動作で問題なければ、現状の設定で十分です。
css: { // Lightning CSS のターゲットを明示的に設定する場合: // lightningcss: { // targets: browserslistToTargets(browserslist('your query here')) // }, preprocessorOptions: { // ... } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@vite.config.ts` around lines 80 - 92, PR notes warn that Vite’s default build target changed, so update the css configuration by adding a lightningcss entry (under the existing css / preprocessorOptions block) when you need a custom target: add css.lightningcss with a targets value produced via browserslistToTargets(browserslist('...')) so Lightning CSS compiles to your desired browsers; if you intentionally rely on Vite 8 defaults, no change is required.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@build/gen-mplus.js`:
- Line 162: There is a typo: the identifier `ligtningcss` used when calling
`browserslistToTargets` is undefined; rename it to the correct `lightningcss`
everywhere it's used (e.g., the call that assigns `targets`) and ensure the
module import/require that provides `lightningcss` matches that identifier so
`lightningcss.browserslistToTargets(...)` resolves correctly.
In `@package.json`:
- Line 93: Update the Vite version constraint in package.json: change the "vite"
dependency from "^8.0.1" to the available release "^8.0.0" so the project
references the actual npm-published version (leave "lightningcss": "^1.32.0"
unchanged).
In `@vite.config.ts`:
- Around line 7-8: Remove the unused imports by deleting the import statements
for browserslist and browserslistToTargets (the symbols "browserslist" and
"browserslistToTargets") from vite.config.ts; ensure no other code in the file
references these symbols and run typecheck/linters to confirm no remaining
references before committing.
---
Outside diff comments:
In `@src/components/UI/FormRangeWithValue.vue`:
- Around line 3-12: ASlider's :class binding (including 'form-range-slider')
isn't forwarded to the rendered DOM because ASlider.vue renders VueSlider
directly; wrap the ASlider usage in FormRangeWithValue.vue with a wrapper
element (e.g., a <div>) and move the :class="[$style.range,
'form-range-slider']" and the inline style/padding onto that wrapper so the
class reaches the DOM (mimic
AudioPlayerTimeSlider.vue/AudioPlayerVolumeSlider.vue pattern), and verify the
.range CSS (flex: 1 1) still applies to the new wrapper.
---
Nitpick comments:
In `@src/components/UI/AudioPlayer/AudioPlayerTimeSlider.vue`:
- Around line 48-67: Remove the unused Sass module import: delete the line "@use
'sass:meta';" from the <style lang="scss" module> block in
AudioPlayerTimeSlider.vue (the block that defines .timeSlider and
:global(.vue-slider-dot-handle)); confirm there are no remaining references to
meta.* in that file (e.g., meta.load-css) and run the build/lint to ensure no
other stylesheet usages remain.
In `@src/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vue`:
- Around line 57-103: Remove the unused Sass module import by deleting the line
"@use 'sass:meta';" at the top of the stylesheet; ensure the rest of the rules
(e.g., $afterVolumeSliderWidth, .volume, .volumeSlider,
:global(.vue-slider-dot-handle)) remain unchanged since :global() is a CSS
Modules construct and not dependent on the meta module.
In `@src/components/UI/FormRangeWithValue.vue`:
- Around line 47-59: Remove the unused Sass module import by deleting the line
"@use 'sass:meta';" from the <style lang="scss" module> block in
FormRangeWithValue.vue; the rest of the .container and .range rules can remain
unchanged since meta.load-css was moved to non-module styles, so simply drop the
`@use` declaration to eliminate the dead import.
In `@vite.config.ts`:
- Around line 80-92: PR notes warn that Vite’s default build target changed, so
update the css configuration by adding a lightningcss entry (under the existing
css / preprocessorOptions block) when you need a custom target: add
css.lightningcss with a targets value produced via
browserslistToTargets(browserslist('...')) so Lightning CSS compiles to your
desired browsers; if you intentionally rely on Vite 8 defaults, no change is
required.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 01873e07-2af8-4154-9647-627eda928a7e
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
build/gen-mplus.jspackage.jsonsrc/components/UI/AudioPlayer/AudioPlayerTimeSlider.vuesrc/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vuesrc/components/UI/FormRangeWithValue.vuevite.config.ts
| const { code: minifiedCssText, warnings } = await esbuild.transform(cssText, { | ||
| loader: 'css', | ||
|
|
||
| const targets = ligtningcss.browserslistToTargets( |
There was a problem hiding this comment.
重大なタイポ: ligtningcss は lightningcss であるべきです。
ligtningcss は未定義のため、このスクリプト実行時に ReferenceError が発生します。
🐛 修正案
- const targets = ligtningcss.browserslistToTargets(
+ const targets = lightningcss.browserslistToTargets(📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const targets = ligtningcss.browserslistToTargets( | |
| const targets = lightningcss.browserslistToTargets( |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@build/gen-mplus.js` at line 162, There is a typo: the identifier
`ligtningcss` used when calling `browserslistToTargets` is undefined; rename it
to the correct `lightningcss` everywhere it's used (e.g., the call that assigns
`targets`) and ensure the module import/require that provides `lightningcss`
matches that identifier so `lightningcss.browserslistToTargets(...)` resolves
correctly.
| "fake-indexeddb": "^6.2.5", | ||
| "fonteditor-core": "^2.6.3", | ||
| "jsdom": "^27.4.0", | ||
| "lightningcss": "^1.32.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Vite 8.0 release date and changelog
💡 Result:
Vite 8.0.0 was released on March 12, 2026. Key highlights from the official announcement and changelog: - Replaces esbuild (dev) and Rollup (prod) with a single unified Rust-based bundler called Rolldown, providing up to 10-30x faster production builds while maintaining full Rollup/Vite plugin compatibility. - Uses Oxc for parsing, transforming, and minification, unifying the toolchain. - Updated default browser target (build.target): Chrome/Edge 107->111, Firefox 104->114, Safari 16.0->16.4 (aligns with baseline widely-available features as of 2026). - Built-in support for tsconfig paths (resolve.tsconfigPaths: true), warns if vite-tsconfig-paths plugin is used. - New Vite Devtools for debugging. - Node.js requirement unchanged: 20.19+ or 22.12+. - Install size increased by ~15MB (lightningcss now core dep, Rolldown binary). Breaking changes: - Removed import.meta.hot.accept resolution fallback. - build.rollupOptions renamed to build.rolldownOptions (deprecated, will be removed). - Dependency optimizer now uses Rolldown instead of esbuild. - Some plugin hooks changed (e.g., shouldTransformCachedModule, resolveImportMeta). Migration: Most projects upgrade directly with npm i vite@latest. For complex setups, use gradual path via rolldown-vite first. See official migration guide: https://vite.dev/guide/migration#migration-from-v7. Full changelog: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md (8.0.0 section lists features like Rolldown updates to 1.0.0-rc.9, v2 native plugins enabled by default, etc.). Announcement blog: https://vite.dev/blog/announcing-vite8 GitHub release: https://github.com/vitejs/vite/releases/tag/v8.0.0
Citations:
- 1: https://github.com/vitejs/vite/releases/tag/v8.0.0
- 2: https://vite.dev/blog/announcing-vite8
- 3: https://github.com/vitejs/vite/releases
- 4: https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md
- 5: https://raw.githubusercontent.com/vitejs/vite/main/packages/vite/CHANGELOG.md
- 6: https://main.vitejs.dev/guide/migration
- 7: https://vite.dev/guide/migration
🌐 Web query:
lightningcss 1.32.0 release date npm package
💡 Result:
The npm package lightningcss version 1.32.0 was published on March 9, 2026.
Citations:
- 1: https://newreleases.io/project/npm/lightningcss/release/1.32.0
- 2: https://www.npmjs.com/package/lightningcss
- 3: https://npmx.dev/package/lightningcss/v/%5E1.32.0
- 4: https://registry.npmjs.org/lightningcss
🏁 Script executed:
# Check npm registry for Vite versions to confirm 8.0.1 exists
curl -s "https://registry.npmjs.org/vite" | jq '.versions | keys[] | select(startswith("8.0"))' 2>/dev/null | head -20Repository: traPtitech/traQ_S-UI
Length of output: 365
🏁 Script executed:
# Check npm registry for lightningcss versions around 1.32.0
curl -s "https://registry.npmjs.org/lightningcss" | jq '.versions | keys[] | select(startswith("1.32"))' 2>/dev/nullRepository: traPtitech/traQ_S-UI
Length of output: 72
Vite のバージョン制約を修正してください。
package.json の Vite バージョンが ^8.0.1 となっていますが、npm レジストリに 8.0.1 リリースは存在しません。利用可能なバージョンは 8.0.0 です（2026年3月12日リリース）。^8.0.0 に修正してください。lightningcss ^1.32.0 は正しく、2026年3月9日にリリースされています。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@package.json` at line 93, Update the Vite version constraint in package.json:
change the "vite" dependency from "^8.0.1" to the available release "^8.0.0" so
the project references the actual npm-published version (leave "lightningcss":
"^1.32.0" unchanged).
| import browserslist from 'browserslist' | ||
| import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist' | ||
| import { browserslistToTargets } from 'lightningcss' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# vite.config.ts 内で browserslist と browserslistToTargets の使用箇所を検索
rg -n 'browserslist|browserslistToTargets' vite.config.ts | grep -v 'import'Repository: traPtitech/traQ_S-UI
Length of output: 46
🏁 Script executed:
head -20 vite.config.tsRepository: traPtitech/traQ_S-UI
Length of output: 749
未使用のインポートを削除してください
browserslist と browserslistToTargets はインポートされていますが、ファイル内で使用されていません。
削除対象のインポート
-import browserslist from 'browserslist'
-import { browserslistToTargets } from 'lightningcss'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import browserslist from 'browserslist' | |
| import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist' | |
| import { browserslistToTargets } from 'lightningcss' |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vite.config.ts` around lines 7 - 8, Remove the unused imports by deleting the
import statements for browserslist and browserslistToTargets (the symbols
"browserslist" and "browserslistToTargets") from vite.config.ts; ensure no other
code in the file references these symbols and run typecheck/linters to confirm
no remaining references before committing.
uni-kakurenbo
added
dependencies
uni-kakurenbo
changed the title
1 participant
概要
vite-plugin-pwaの Vite 8 対応を待つ必要があるbaseline-widely-available) になっていることに注意Summary by CodeRabbit
リリースノート
Chores
Refactor