Tailwind CSS v3: HookWebpackError: Missed semicolon

See original GitHub issue

What version of Tailwind CSS are you using?

Tailwind CSS v3.0.0

What build tool (or framework if it abstracts the build tool) are you using?

Next.js v12.0.7, autoprefixer v10.4.0, postcss v8.4.4

What version of Node.js are you using?

Node.js v 16.13.1

What browser are you using?

N/A

What operating system are you using?

GNU/Linux Ubuntu 21.10

Describe your issue

When doing npm run build to build my Next.js application, I’ve got a webpack error, saying :

HookWebpackError: /home/divlo/Documents/Divlo/static/css/c28bcdcab3eb5a01.css:747:56: Missed semicolon
    at makeWebpackError (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/webpack/bundle5.js:47168:9)
    at /home/divlo/Documents/Divlo/node_modules/next/dist/compiled/webpack/bundle5.js:31056:12
    at eval (eval at create (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/webpack/bundle5.js:141512:10), <anonymous>:48:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
CssSyntaxError: /home/divlo/Documents/Divlo/static/css/c28bcdcab3eb5a01.css:747:56: Missed semicolon
    at Input.error (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/input.js:123:16)
    at ScssParser.checkMissedSemicolon (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:555:22)
    at ScssParser.decl (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:253:12)
    at ScssParser.other (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:115:18)
    at ScssParser.parse (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
    at scssParse (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:335)
    at new LazyResult (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/lazy-result.js:122:16)
    at Processor.process (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (/home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
    at /home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /home/divlo/Documents/Divlo/static/css/c28bcdcab3eb5a01.css:747:56: Missed semicolon
    at Input.error (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/input.js:123:16)
    at ScssParser.checkMissedSemicolon (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:555:22)
    at ScssParser.decl (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:253:12)
    at ScssParser.other (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:115:18)
    at ScssParser.parse (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
    at scssParse (/home/divlo/Documents/Divlo/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:335)
    at new LazyResult (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/lazy-result.js:122:16)
    at Processor.process (/home/divlo/Documents/Divlo/node_modules/next/node_modules/postcss/lib/processor.js:33:12)
    at CssMinimizerPlugin.optimizeAsset (/home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
    at /home/divlo/Documents/Divlo/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55

It seems like the generated CSS file from Tailwind is broken.

See the CI run (and source code): https://github.com/Divlo/Divlo/runs/4480558963

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:9

Top GitHub Comments

1reaction

roelvancommented, Dec 21, 2021

I had some custom font sizes enabled like this:

fontSize: {
        xl: ['1.25rem', '1.666'],
        '2xl': ['1.5rem', '1.375'],
        '3xl': ['1.875rem', '1.375'],
        '4xl': ['2.25rem', '1.375'],
 }

Then in my typography settings I tried to do this:

'h1, h2': {
     fontSize: theme('fontSize.2xl'), // OOPS I am taking both font size and line height here, an array
},

Causing the “Missed semicolon error”. Because it is trying to get an array instead of a single item. This fixed it for me:

'h1, h2': {
     fontSize: theme('fontSize.2xl')[0], // ONLY take the font size property and not both size and line height
},

0reactions

rvlewerissacommented, Jan 4, 2022

~@Divlo Can you provide a minimal reproduction of this issue?~ I found the issue and merged a fix for the typography plugin which should go out whenever the next release is tagged.

Indeed that was the issue! Thanks for your investigation.

I changed fontFamily: ['Montserrat', 'Arial', 'sans-serif'], to fontFamily: "'Montserrat', 'Arial', 'sans-serif'", and it now works again. 😄

Closing, as it is now resolved, and is more of an issue with @tailwindcss/typography plugin.

This fixed my issue as well! Awesome 🤘

Top Results From Across the Web

vue.js - It keeps saying I am missing a semi colon in my css ...

However when I did npm production it says I have a CSS missed semicolon error. This can be resolve by NOT lazy loading...

Webpack HookWebpackError: Missed semicolon

Hi, I'm having an issue when deploying to Netlify although my project works locally. I'm getting the following error in the deploy log....

tailwindcss: - You.com | The AI Search Engine You Control

CssSyntaxError when importing tailwindcss/utilities #6502 - GitHub ... Missed semicolon error when running a gulp task with tailwind and bulma css.

Content Configuration

Configuring source paths. Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, ...

Advanced Features: Customizing PostCSS Config

Tailwind CSS Example. Default Behavior. Next.js compiles CSS for its built-in CSS support using PostCSS. Out of the box, with no configuration, Next.js ......