PostCSS Tape

PostCSS Tape lets you quickly test PostCSS plugins.

1. Install this dependency to your project:

   npm install postcss-tape --save-dev

2. Add the postcss-tape task to your package.json:

   {
      "scripts": {
        "test": "postcss-tape"
      }
   }

3. Add tests to your .tape.js file:

   module.exports = {
     'postcss-my-plugin': {
       'basic': {
         message: 'supports basic usage'
       }
     }
   };

That’s it! Empty tests will be auto-generated. Now you can use the tape task:

npm run tape

Options may be passed through package.json using postcssConfig:

{
  "postcssConfig": {
    "plugin": "path/to/plugin.js",
    "config": "path/to/.tape.js",
    "fixtures": "path/to/cssdir"
  }
}

Options may be passed through arguments:

postcss-tape --plugin=path/to/plugin.js --config=path/to/.tape.js

The message provided to the console to identify the test being run.

{
  'some-test': {
    message: 'supports some test usage'
  }
}

The options passed into the PostCSS plugin for the test.

{
  'some-test': {
    options: {
      someOption: true,
      anotherOption: 5,
      etc: 'etc'
    }
  }
}

The process options passed into PostCSS for the test. Read the PostCSS documentation for more details.

{
  'some-test': {
    processOptions: {
      map: {
        inline: true,
        sourcesContent: true
      }
    }
  }
}

The number of warnings expected to be generated by the test.

{
  'some-test': {
    warnings: 3
  }
}

An identifying feature of an error expected to be thrown by the test.

{
  'some-test': {
    error: {
      message: 'You should not have done that'
    }
  }
}

In that example, the error expects a field of message to be the string You should not have done that. In order that errors can be inspecific, regular expressions may also be used, so that something like message: /^You should not have done/ would also match You should not have done this.

The location of the source CSS file, relative to the fixtures directory. This file is passed through the PostCSS plugin.

{
  'some-test': {
    source: 'alterate-source.css'
  }
}

In that example, a some-test field would automatically populate the source as some-test.css unless it was overridden. In order that multiple tests may use the same source file, a some-test:modifier field would still populate the source as some-test.css.

The location of the expected CSS file, relative to the fixtures directory. This file is represents the expected CSS result of source after being passed through the PostCSS plugin.

{
  'some-test': {
    expect: 'alterate-expect.css'
  }
}

In that example, a some-test field would automatically populate the expect as some-test.expect.css unless it was overridden. In order that multiple tests may use the same source file, a some-test:modifier field would still populate the source as some-test.css, but alter the expect to be some-test.modifier.expect.css.

The location of the resulting CSS file, relative to the fixtures directory. This file is the CSS result of source after being passed through the PostCSS plugin.

{
  'some-test': {
    result: 'alterate-result.css'
  }
}

In that example, a some-test field would automatically populate the result as some-test.result.css unless it was overridden. In order that multiple tests may use the same source file, a some-test:modifier field would still populate the source as some-test.css, but alter the result to be some-test.modifier.result.css.

A function to be run before the particular test. This is helpful for generating variables, content, or files that will be used by the plugin.

{
  'some-test': {
    before: () => {
      /* do something before the plugin runs */
    }
  }
}

A function to be run after the particular test. This is helpful for cleaning up variables, content, or files that were used by the plugin.

{
  'some-test': {
    after: () => {
      /* do something after the plugin runs */
    }
  }
}

A plugin or array of plugins that will specifying alternative plugin

{
  'some-test': {
    plugin: () => require('postcss')(
      require('some-plugin-that-runs-before'),
      require('.'),
      require('some-plugin-that-runs-after')
    )
  }
}