I have a Vite+React+Typescript project where I wast trying to follow the instructions on how to install sidebar.
It automatically added some styles to my index.css file. Now, the content pretty much looks like this:
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
body {
font-family: 'Nunito', sans-serif;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
.firebase-emulator-warning {
@apply hidden;
}
The problem is, when I run Vite in dev mode, it gives me an error saying:
11:33:52 PM [vite] Internal server error: [postcss] Unexpected token, expected "," (9:31)
Plugin: vite:css
File: /src/index.css:undefined:NaN
9 | @tailwind utilities;
10 |
11 | @layer base {
| ^
12 | :root {
13 | --background: 0 0% 100%;
at unexpected (/node_modules/sucrase/dist/parser/traverser/util.js:99:15)
at expect (/node_modules/sucrase/dist/parser/traverser/util.js:86:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:759:20)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseObjectProperty (/node_modules/sucrase/dist/parser/traverser/expression.js:851:7)
at parseObjPropValue (/node_modules/sucrase/dist/parser/traverser/expression.js:892:5)
at parseObj (/node_modules/sucrase/dist/parser/traverser/expression.js:808:5)
at parseExprAtom (/node_modules/sucrase/dist/parser/traverser/expression.js:553:7)
at parseExprSubscripts (/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
at parseMaybeUnary (/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
at parseExprOps (/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
at parseMaybeConditional (/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
at baseParseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
at tsParseMaybeAssign (/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
at parseMaybeAssign (/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)
at parseExportDefaultExpression (/node_modules/sucrase/dist/parser/traverser/statement.js:1024:34)
at parseExport (/node_modules/sucrase/dist/parser/traverser/statement.js:988:5)
11:33:52 PM [vite] Pre-transform error: [postcss] Unexpected token, expected "," (9:31)
It says there is a syntax error but I don't see anything wrong with it. Why does it give this error?
I have got the same error couples of days back for postcss file. But the real error was in my tailwind.config.ts, there was a syntax error for font-family array. It previously looked like below:
font-family: [sans-serif\n ,inter\n, ......]
i have made it to:
font-family: [sans-serif, inter.....]
An then i ran 'convert indentation to spaces' in vscode command pallete(cntrl+shift+p). And then it solved my error.