CssSyntaxError

CssSyntaxError

The CSS parser throws this error for broken CSS.

Custom parsers can throw this error for broken custom syntax using the Node#error method.

PostCSS will use the input source map to detect the original error location. If you wrote a Sass file, compiled it to CSS and then parsed it with PostCSS, PostCSS will show the original position in the Sass file.

If you need the position in the PostCSS input (e.g., to debug the previous compiler), use error.input.file.

Constructor

new CssSyntaxError(message, lineopt, columnopt, sourceopt, fileopt, pluginopt)

Source:
Examples
// Catching and checking syntax error
try {
  postcss.parse('a{')
} catch (error) {
  if (error.name === 'CssSyntaxError') {
    error //=> CssSyntaxError
  }
}
// Raising error from plugin
throw node.error('Unknown variable', { plugin: 'postcss-vars' })
Parameters:
Name Type Attributes Description
message string

Error message.
line number <optional>

Source line of the error.
column number <optional>

Source column of the error.
source string <optional>

Source code of the broken file.
file string <optional>

Absolute path to the broken file.
plugin string <optional>

PostCSS plugin name, if error came from plugin.

Members

column :number

Source:

Source column of the error.

Type:
  • number
Example
error.column       //=> 1
error.input.column //=> 4

file :string

Source:

Absolute path to the broken file.

Type:
  • string
Example
error.file       //=> 'a.sass'
error.input.file //=> 'a.css'

line :number

Source:

Source line of the error.

Type:
  • number
Example
error.line       //=> 2
error.input.line //=> 4

message :string

Source:

Full error text in the GNU error format with plugin, file, line and column.

Type:
  • string
Example
error.message //=> 'a.css:1:1: Unclosed block'

name :string

Source:

Always equal to 'CssSyntaxError'. You should always check error type by error.name === 'CssSyntaxError' instead of error instanceof CssSyntaxError, because npm could have several PostCSS versions.

Type:
  • string
Example
if (error.name === 'CssSyntaxError') {
  error //=> CssSyntaxError
}

plugin :string

Source:

Plugin name, if error came from plugin.

Type:
  • string
Example
error.plugin //=> 'postcss-vars'

reason :string

Source:

Error message.

Type:
  • string
Example
error.message //=> 'Unclosed block'

source :string

Source:

Source code of the broken file.

Type:
  • string
Example
error.source       //=> 'a { b {} }'
error.input.column //=> 'a b { }'

Methods

showSourceCode(coloropt) → {string}

Source:

Returns a few lines of CSS source that caused the error.

If the CSS has an input source map without sourceContent, this method will return an empty string.

Example
error.showSourceCode() //=> "  4 | }
                       //      5 | a {
                       //    > 6 |   bad
                       //        |   ^
                       //      7 | }
                       //      8 | b {"
Parameters:
Name Type Attributes Description
color boolean <optional>

Whether arrow will be colored red by terminal color codes. By default, PostCSS will detect color support by process.stdout.isTTY and process.env.NODE_DISABLE_COLORS.
Returns:

Few lines of CSS source that caused the error.

Type
string

toString() → {string}

Source:

Returns error position, message and source code of the broken part.

Example
error.toString() //=> "CssSyntaxError: app.css:1:1: Unclosed block
                 //    > 1 | a {
                 //        | ^"
Returns:

Error position, message and source code.

Type
string