Class 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.

// Raising error from plugin
throw node.error('Unknown variable', { plugin: 'postcss-vars' })

// Catching and checking syntax error
try {
  postcss.parse('a{')
} catch (error) {
  if (error.name === 'CssSyntaxError') {
    error //=> CssSyntaxError
  }
}

Constructors

constructor

Properties

column? endColumn? endLine? file? input? line? message name plugin? reason source? stack

Methods

showSourceCode toString

Constructors

constructor

  • new CssSyntaxError_(message, lineOrStartPos?, columnOrEndPos?, source?, file?, plugin?): CssSyntaxError_

  • Instantiates a CSS syntax error. Can be instantiated for a single position or for a range.

    Parameters

    • message: string

      Error message.

    • Optional lineOrStartPos: number | RangePosition

      If for a single position, the line number, or if for a range, the inclusive start position of the error.

    • Optional columnOrEndPos: number | RangePosition

      If for a single position, the column number, or if for a range, the exclusive end position of the error.

    • Optional source: string

      Source code of the broken file.

    • Optional file: string

      Absolute path to the broken file.

    • Optional plugin: string

      PostCSS plugin name, if error came from plugin.

    Returns CssSyntaxError_

Properties

Optional column

column?: number

Source column of the error.

error.column       //=> 1
error.input.column //=> 4

PostCSS will use the input source map to detect the original location. If you need the position in the PostCSS input, use error.input.column.

Optional endColumn

endColumn?: number

Source column of the error's end, exclusive. Provided if the error pertains to a range.

error.endColumn       //=> 1
error.input.endColumn //=> 4

PostCSS will use the input source map to detect the original location. If you need the position in the PostCSS input, use error.input.endColumn.

Optional endLine

endLine?: number

Source line of the error's end, exclusive. Provided if the error pertains to a range.

error.endLine       //=> 3
error.input.endLine //=> 4

PostCSS will use the input source map to detect the original location. If you need the position in the PostCSS input, use error.input.endLine.

Optional file

file?: string

Absolute path to the broken file.

error.file       //=> 'a.sass'
error.input.file //=> 'a.css'

PostCSS will use the input source map to detect the original location. If you need the position in the PostCSS input, use error.input.file.

Optional input

input?: FilePosition

Input object with PostCSS internal information about input file. If input has source map from previous tool, PostCSS will use origin (for example, Sass) source. You can use this object to get PostCSS input source.

error.input.file //=> 'a.css'
error.file       //=> 'a.sass'

Optional line

line?: number

Source line of the error.

error.line       //=> 2
error.input.line //=> 4

PostCSS will use the input source map to detect the original location. If you need the position in the PostCSS input, use error.input.line.

message

message: string

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

error.message //=> 'a.css:1:1: Unclosed block'

name

name: "CssSyntaxError"

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.

if (error.name === 'CssSyntaxError') {
  error //=> CssSyntaxError
}

Optional plugin

plugin?: string

Plugin name, if error came from plugin.

error.plugin //=> 'postcss-vars'

reason

reason: string

Error message.

error.message //=> 'Unclosed block'

Optional source

source?: string

Source code of the broken file.

error.source       //=> 'a { b {} }'
error.input.source //=> 'a b { }'

stack

stack: string

Methods

showSourceCode

  • showSourceCode(color?): string

  • 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.

    error.showSourceCode() //=> "  4 | }
                           //      5 | a {
                           //    > 6 |   bad
                           //        |   ^
                           //      7 | }
                           //      8 | b {"

    Parameters

    • Optional color: boolean

      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 string

    Few lines of CSS source that caused the error.

toString

  • toString(): string

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

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

    Returns string

    Error position, message and source code.

Settings

Member Visibility

Theme

On This Page

constructorcolumnendColumnendLinefileinputlinemessagenamepluginreasonsourcestackshowSourceCodetoString