postcss-travix

PostCSS plugin for Travix

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-travix
040.3.05 years ago5 years agoMinified + gzip package size for postcss-travix in KB

Readme

postcss-travix
npm Build Status
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