postcss-tape

    6.0.1 • Public • Published

    PostCSS Tape PostCSS

    NPM Version Build Status Support Chat

    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:

      export default {
        'basic': {
          message: 'supports basic usage'
        }
      };

    That’s it! Empty tests will be auto-generated.

    npm test

    Options

    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

    Test Options

    message

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

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

    options

    The options passed into the PostCSS plugin for the test.

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

    processOptions

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

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

    warnings

    Either the number of warnings expected to be generated by the test, or an object used to match warnings given by the test.

    {
      'some-test': {
        warnings: 3
      }
    }
    {
      'some-test': {
        warnings: {
          text: /should warn/
        }
      }
    }

    error

    An object used to match an error 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. So that an error 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.

    source

    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.

    expect

    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.

    result

    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.

    before

    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 */
        }
      }
    }

    after

    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 */
        }
      }
    }

    plugin

    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')
        )
      }
    }

    CLI Options

    Options can be passed into the postcss-tape function or defined in package.json using the postcssConfig property.

    plugin

    The path to the plugin being tested.

    postcss-tape --plugin path/to/plugin.js
    {
      "postcssConfig": {
        "plugin": "path/to/plugin.js"
      }
    }

    By default, plugin is the resolved file from the current working directory.

    config

    The path to the configuration file used to run tests.

    postcss-tape --config path/to/config.js
    {
      "postcssConfig": {
        "config": "path/to/config.js"
      }
    }

    By default, PostCSS Tape will try to use the file defined by config, or the config directory’s postcss-tape.config.js or .tape.js file. By default, config is the current working directory.

    fixtures

    The path to the fixtures used by tests.

    postcss-tape --fixtures path/to/tests
    {
      "postcssConfig": {
        "fixtures": "path/to/tests"
      }
    }

    Install

    npm i postcss-tape

    DownloadsWeekly Downloads

    12,833

    Version

    6.0.1

    License

    CC0-1.0

    Unpacked Size

    75.6 kB

    Total Files

    28

    Last publish

    Collaborators

    • jonathantneal