csstoolsPostCSS Tape 
PostCSS Tape lets you quickly test PostCSS plugins.
Install this dependency to your project:
npm install postcss-tape --save-devAdd the
postcss-tapetask to yourpackage.json:{ "scripts": { "test": "postcss-tape" } }Add tests to your
.tape.jsfile:export default { 'basic': { message: 'supports basic usage' } };
That’s it! Empty tests will be auto-generated.
npm testOptions
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.jsTest 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"
}
}