[vite:css] [postcss] Unexpected token (3:1)

[fpolli]

I am getting the above error when running npm run build. What I hope is all the info needed is below.

npm 9.2.0
vite 5.4.11
tailwind 3.4.15 (I think)
Server is nginx on ubuntu 24.04

Stack trace:

error during build:
[vite:css] [postcss] Unexpected token (3:1)
file: /home/fred/Sites/sobb/resources/css/moms/site.css:undefined:NaN
    at unexpected (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/util.js:99:15)
    at parseExprAtom (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:594:24)
    at parseExprSubscripts (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:276:20)
    at parseMaybeUnary (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:257:20)
    at parseExprOps (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:185:20)
    at parseMaybeConditional (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:157:20)
    at baseParseMaybeAssign (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:142:20)
    at tsParseMaybeAssignWithoutJSX (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/plugins/typescript.js:1580:45)
    at tsParseMaybeAssign (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/plugins/typescript.js:1548:12)
    at parseMaybeAssign (/home/fred/Sites/sobb/node_modules/sucrase/dist/parser/traverser/expression.js:121:43)

The site.css file:

@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

The tailwind.site.config.js file is in the same folder as the site.css file.

My vite.config.js (project root folder):

import laravel from "laravel-vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [
      laravel([
        "resources/css/moms/site.css", 
        "resources/js/moms/site.js"
      ])
    ],
});

postcss.config.js:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

And, finally, the tailwind.site.config.js:

import { createRequire } from 'module';
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import aspectRatio from '@tailwindcss/aspect-ratio'
import colors from 'tailwindcss/colors'
import linkColor from '../../js/link-color'

const require = createRequire(import.meta.url);

/** @type {import('tailwindcss').Config} */
export default {
//module.exports = {
  content: [
      "./resources/**/*.antlers.html",
      "./resources/**/*.blade.php",
      "./content/**/*.md",
  ],
  theme: {
      container: {
          center: true,
          padding: "1rem",
      },
      fontSize: {
          xs: ["12px", "20px"],
          sm: ["14px", "22px"],
      },
      extend: {
          fontFamily: {
              sans: "Manrope",
          },
          colors: {
            backgroundColor: {
              page: colors.black,
              topbar: colors.indigo[900],

            },
            borderColor: {
              header: colors.blue[900],
            },
            textColor: {
              topbar: colors.slate[400],
              header: colors.white,
            },
            accentColor: {
              header: colors.violet[950],
              main: colors.violet[950],
            },
            linkColor: {
              topbar: colors.blue[400],
              header: colors.violet[400],
            }
          },
          boxShadow: {
            header: '0 1px 3px 0 '+colors.slate[400],
            main: '0 1px 3px 0 '+colors.slate[400],
          },
          typography: (theme) => ({
              lg: {
                  css: {
                      color: theme("colors.gray.900"),
                  },
              },
          }),
      },
  },
  corePlugins: {
    linkColor: linkColor
  },
  plugins: [
    forms,
    typography,
    aspectRatio,
  ],
};

Thanks

[wongjn]

Please consider providing a remotely-hosted git repository that reproduces the unexpected behavior.

[fpolli]

Thank you but I don't have any experience or knowledge with doing that. I would not know where to start.

[wongjn]

Since you're already on GitHub, here's documentation about adding locally hosted code to GitHub.