postcss-travix

PostCSS plugin for Travix

Installation

With npm:

$ npm install --save postcss postcss-travix

Usage

PostCSS

const postcss = require('postcss');
 
postcss([
  require('postcss-travix')({ /* plugin options */ })
])
  .process(YOUR_CSS, { /* process options */ })
  .then(function (result) {
    // console.log(result.css);
  });

Options

Options can be passed for individual processors:

postcss([
  require('postcss-travix')({
    autoprefixer: {
      browsers: ['last 2 versions']
    }
  })
]);

You can also disable some plugins:

postcss([
  require('postcss-travix')({
    autoprefixer: {
      disabled: true
    }
  })
]);

You can find the list of processors with their names and default options in processors.js file.

Features

Nesting

Input:

.nested {
  .selector {
    .here {
      padding: 0;
    }
  }
}

Output:

.nested .selector .here {
  padding: 0;
}

Custom Properties (Variables)

Input:

:root {
  --my-var: blue;
}
 
div {
  border-color: var(--variable-defined-elsewhere);
  background: var(--my-var);
}

Output:

div {
  border-color: var(--variable-defined-elsewhere);
  background: blue;
}

For additional reference, visit the plugin's documentation

Autoprefixing

We support compatibility with older versions of browsers, and the current list of browsers consists of:

• last 2 versions
• Explorer >= 10
• Safari >= 5

The naming convention of the browsers follow Browserslist.

Input:

.myClass {
  flex: 1;
}

Output:

.myClass {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

License

MIT © Travix International