https://github.com/postcss/postcss-parser-tests

Base tests for every PostCSS CSS parser
https://github.com/postcss/postcss-parser-tests

Last synced: 4 months ago
JSON representation

Base tests for every PostCSS CSS parser

• Host: GitHub
• URL: https://github.com/postcss/postcss-parser-tests
• Owner: postcss
• License: mit
• Created: 2015-08-02T13:30:41.000Z (over 10 years ago)
• Default Branch: main
• Last Pushed: 2025-02-10T20:48:38.000Z (11 months ago)
• Last Synced: 2025-08-28T06:44:30.595Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.08 MB
• Stars: 22
• Watchers: 6
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# PostCSS Parser Tests



This project contains base tests for every [PostCSS] CSS parser, including:

* 24 CSS files to test extreme cases of the CSS specification.

* Integration tests by popular website styles to test CSS from the wild.

These tests are useful for any CSS parser, not just parsers within the PostCSS ecosystem.

[PostCSS]: https://github.com/postcss/postcss

## Cases

You can iterate through all test cases using the `cases.each` method:

```js

const cases = require('postcss-parser-tests')

cases.each((name, css, ideal) => {

  it('parses ' + name, () => {

    const root = parse(css, { from: name })

    const json = cases.jsonify(root)

    expect(json).toEquql(ideal)

  })

})

```

This returns the case name, CSS string, and PostCSS AST JSON.

If you create a non-PostCSS parser, just compare if the input CSS is equal to the output CSS after parsing.

You can also get the path to some specific test cases using the `cases.path(name)` method.

## Integration

Integration tests are packed into a Gulp task:

```js

const cases = require('postcss-parser-tests')

cases.real(css => {

  return parser(css).toResult({ map: { annotation: false } })

})

```

Your callback must parse CSS and stringify it back. The plugin will then compare the input

and output CSS.

You can add extra sites using an optional third argument:

```js

cases.real(css => {

  return parser(css).toResult({ map: { annotation: false } })

}, [

  'http://browserhacks.com/'

])

```