A build error on Vite

[masanori-iwata]

Summary

CSS syntax errors cause the build to fail on Vite.

Error logs

x Build failed in 413ms
[@tailwindcss/vite:generate:build] Unexpected semicolon
file: /Users/masanoriiwata/Desktop/momentify/node_modules/@shopify/polaris/build/esm/styles.css?transform-only
    at X (file:///Users/masanoriiwata/Desktop/momentify/node_modules/tailwindcss/dist/lib.mjs:3:1770)
    at tl (file:///Users/masanoriiwata/Desktop/momentify/node_modules/tailwindcss/dist/lib.mjs:33:1566)
    at tt (file:///Users/masanoriiwata/Desktop/momentify/node_modules/@tailwindcss/node/dist/index.mjs:10:3328)
    at _.generate (file:///Users/masanoriiwata/Desktop/momentify/node_modules/@tailwindcss/vite/dist/index.mjs:1:5387)
    at Object.transform (file:///Users/masanoriiwata/Desktop/momentify/node_modules/@tailwindcss/vite/dist/index.mjs:1:3735)
    at file:///Users/masanoriiwata/Desktop/momentify/node_modules/rollup/dist/es/shared/node-entry.js:21805:40 {
  code: 'PLUGIN_ERROR',
  plugin: '@tailwindcss/vite:generate:build',
  hook: 'transform',
  id: '/Users/masanoriiwata/Desktop/momentify/node_modules/@shopify/polaris/build/esm/styles.css?transform-only',

Code making error

.Polaris-VideoThumbnail__ProgressBar,
.Polaris-VideoThumbnail__Label{
  position: absolute !important;
  top: 0;
  width: 0.0625rem !important;;  <--- **Unexpected semicolon**
  height: 0.0625rem !important;; <--- **Unexpected semicolon**
  margin: 0 !important;; <--- **Unexpected semicolon**
  padding: 0 !important;; <--- **Unexpected semicolon**
  overflow: hidden !important;; <--- **Unexpected semicolon**
  clip-path: inset(50%) !important;; <--- **Unexpected semicolon**
  border: 0 !important;; <--- **Unexpected semicolon**
  white-space: nowrap !important;; <--- **Unexpected semicolon**
}

Packages

"@shopify/admin-api-client": "^1.0.5",
"@shopify/app-bridge-react": "^4.1.6",
"@shopify/polaris": "^13.9.2",
"@shopify/shopify-api": "^11.8.1",
"@shopify/shopify-app-remix": "^3.7.1",
"@shopify/storefront-api-client": "^1.0.4",

[anhdd-kuro]

Same here , look like lightning css using in tailwind css 4 dose not allow that
there are 123 locations using double semicolon;;
I had to copy the CSS file and remove all unnecessary semicolons and use like this @import './polaris@13.9.2.css' layer(polaris); as a temporary fix

[masanori-iwata]

@anhdd-kuro
Thank you for your advice and support.
As you mentioned, I can fix it by creating a separate file and resolving the syntax errors myself, but unfortunately, this is not a permanent solution.
I believe this is a simple issue that should be fixed on the package’s side.

[bliveinhack]

+1 need a package update.

[LostArrows27]

+1 need package update. This give me error when using with tailwind V4 and V3

[tutNichts]

+1