Fix: CSS Syntax Error in Astro

What Causes This Error?

This error occurs when your CSS contains syntax errors. This can happen in .css files, <style> blocks in Astro components, or when using CSS preprocessors like Sass or Less.

The Problem

<style>
  .container {
    width: 100%    /* ❌ Missing semicolon */
    padding: 1rem;
  }

  .header
    font-size: 2rem;  /* ❌ Missing opening brace */
  }
</style>

The Fix

Correct CSS Syntax

<style>
  .container {
    width: 100%;     /* ✅ Semicolon added */
    padding: 1rem;
  }

  .header {          /* ✅ Opening brace added */
    font-size: 2rem;
  }
</style>

Common Scenarios

Missing Semicolons

/* ❌ Missing semicolons */
.card {
  background: white
  border-radius: 8px
  padding: 1rem
}

/* ✅ With semicolons */
.card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
}

Missing Braces

/* ❌ Missing braces */
.header
  font-size: 2rem;
}

.footer {
  padding: 1rem;


/* ✅ Matching braces */
.header {
  font-size: 2rem;
}

.footer {
  padding: 1rem;
}

Invalid Property Values

/* ❌ Invalid values */
.box {
  width: 100 px;        /* Space in unit */
  color: #GGG;          /* Invalid hex */
  display: flex box;    /* Invalid display */
}

/* ✅ Valid values */
.box {
  width: 100px;
  color: #FFF;
  display: flex;
}

Invalid Selectors

/* ❌ Invalid selectors */
.my class {             /* Space in class name */
  color: red;
}

#my id {               /* Space in ID */
  color: blue;
}

/* ✅ Valid selectors */
.my-class {
  color: red;
}

#my-id {
  color: blue;
}

Unclosed Strings

/* ❌ Unclosed string */
.quote::before {
  content: "Hello;
}

/* ✅ Properly closed */
.quote::before {
  content: "Hello";
}

Invalid Media Queries

/* ❌ Invalid media query */
@media screen and max-width: 768px {
  .container { width: 100%; }
}

/* ✅ Valid media query */
@media screen and (max-width: 768px) {
  .container { width: 100%; }
}

Sass/SCSS Syntax

// ❌ Missing $ for variable
$primary: #007bff;

.button {
  background: primary;  // Missing $
}

// ✅ Correct Sass
$primary: #007bff;

.button {
  background: $primary;
}

CSS Nesting Issues

/* ❌ Invalid nesting (without preprocessor) */
.card {
  .title {
    font-size: 1.5rem;
  }
}

/* ✅ With CSS nesting (requires support) */
.card {
  & .title {
    font-size: 1.5rem;
  }
}

/* Or use separate rules */
.card .title {
  font-size: 1.5rem;
}

Comments in Wrong Format

/* ❌ JavaScript-style comments */
.container {
  // This won't work in CSS
  width: 100%;
}

/* ✅ CSS comments */
.container {
  /* This is a CSS comment */
  width: 100%;
}

Scoped Styles in Astro

<!-- Styles are automatically scoped -->
<style>
  /* ✅ Valid scoped CSS */
  .title {
    color: blue;
  }
</style>

<!-- Global styles -->
<style is:global>
  /* ✅ Global CSS */
  body {
    margin: 0;
  }
</style>

Debug CSS Errors

# Check build output for specific error location
npm run build

# Error message usually shows line number:
# CSSError: /src/styles/main.css:15:3
# This means line 15, column 3

Use CSS Linter

# Install stylelint
npm install -D stylelint stylelint-config-standard

# Create config
echo '{ "extends": "stylelint-config-standard" }' > .stylelintrc.json

# Run linter
npx stylelint "src/**/*.css"

Validate External CSS

---
// Check imported CSS files
import '../styles/main.css';
---

<!-- Or linked stylesheets -->
<link rel="stylesheet" href="/styles/main.css" />

Quick Checklist

• End declarations with semicolons
• Match opening and closing braces
• Use valid property values
• Close all string quotes
• Use correct media query parentheses
• Check for typos in property names
• Use /* */ for CSS comments