[Bug]: Warnings when building with Vite

[Baicheng-MiQ]

Package

@carbon/icons-vue

Browser

No response

Package version

11.7.0

React version

No response

Description

When building, these warnings show up: node_modules/@carbon/icons-vue/es/align-box--top-right/16.jswarnings when minifying css: ▲ [WARNING] Expected "," but found "to"

<stdin>:4706:14:
  4706 │   from, 11.1% to {
       │               ~~
       ╵               ,

▲ [WARNING] Expected "," but found "to"

<stdin>:4740:14:
  4740 │   from, 11.1% to {
       │               ~~
       ╵               ,

✓ 7896 modules transformed. warnings when minifying css: ▲ [WARNING] Expected "," but found "to"

<stdin>:4796:14:
  4796 │   from, 11.1% to {
       │               ~~
       ╵               ,

▲ [WARNING] Expected "," but found "to"

<stdin>:4830:14:
  4830 │   from, 11.1% to {
       │               ~~
       ╵               ,

Reproduction/example

npm run build

Steps to reproduce

import any icons then build with Vite: npm run build

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [ ] I checked the current issues for duplicate problems

[dakahn]

Hey @Baicheng-MiQ I'm unable to recreate in my Vue testing sandbox. Can you tell us what your version numbers are for a few packages so I can help you debug:

1. vite (mine is v3.0.1)
2. @carbon/icons-vue (mine is v10.49.1)
3. Node version you're building with (mine is v16.15.1)

[Baicheng-MiQ]

Hi @dakahn

1. vite v2.9.14
2. @carbon/icons-vue 10.49.1
3. Node v16.15.1

[dakahn]

Ok, fired up an environment running v2.9.14 and I still can't recreate. Imported our icons and they run and build as expected

Sort of at a loss here on my end for where to look next. Can you copy/paste your terminal's output exactly and we can reach out to our Carbon Vue community to try and figure out what's happening and go from there

[Baicheng-MiQ]

Sure!

[email protected] build vite build

vite v2.9.14 building for production... transforming (87) node_modules/@carbon/icons-vue/es/accessibility--color/24.js 🌼 daisyUI components 2.19.0 https://github.com/saadeghi/daisyui ✔︎ Including: base, components, themes[29], utilities

🌼 daisyUI components 2.19.0 https://github.com/saadeghi/daisyui ✔︎ Including: base, components, themes[29], utilities

✓ 7896 modules transformed. warnings when minifying css: ▲ [WARNING] Expected "," but found "to" [css-syntax-error]

<stdin>:4921:14:
  4921 │   from, 11.1% to {
       │               ~~
       ╵               ,

▲ [WARNING] Expected "," but found "to" [css-syntax-error]

<stdin>:4955:14:
  4955 │   from, 11.1% to {
       │               ~~
       ╵               ,

dist/assets/psai_logo.87127fc4.png 85.08 KiB dist/assets/loading.61159dbe.gif 89.01 KiB dist/assets/entry.2316cd54.png 5.70 KiB dist/assets/grid-n-glass.cc83ace5.png 127.71 KiB dist/index.html 0.42 KiB dist/assets/index.2414c281.css 132.21 KiB / gzip: 18.76 KiB dist/assets/index.08cc24de.js 863.69 KiB / gzip: 248.66 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. npm notice npm notice New minor version of npm available! 8.14.0 -> 8.15.1 npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.15.1 npm notice Run npm install -g [email protected] to update! npm notice

[tay1orjones]

@Baicheng-MiQ Are you using Vue 2 or 3? We've got a fix coming for @carbon/icons-vue for Vue 2 in #11855. Might be related