postcss-handy-imports

PostCSS plugin for ordering imports

Usage no npm install needed!

<script type="module">
  import postcssHandyImports from 'https://cdn.skypack.dev/postcss-handy-imports';
</script>

README

postcss-handy-import

Build Status

  1. Places imports at the top of a file.
  2. Removes duplicates

Example

// input.css
@import 'util/variables';

.header {
    color: red;
}

@import 'layout/header', 
        "layout/footer", 
        «util/variables»;

.footer {
    color: green;
}

@import 'util/mixins' util/variables;
// output.css
@import 'util/variables';

@import 'layout/header';

@import 'layout/footer';

@import 'util/mixins';

.header {
    color: red;
}

.footer {
    color: green;
}

Installation

$ npm install postcss-handy-imports

Usage

postcss([ require('postcss-handy-imports')(options) ])