Postcss-media-query-importer NPM

postcss-media-query-importer

A PostCSS plugin to easily manage media queries in your project. Define media queries and corresponding filenames in the plugin options. Then use @import-mq '[path-to-folder]' anywhere in your css.

To-Do

Status	Task	Priority
❌	Example project files	HIGH
❌	Option to merge queries when no file present	LOW
❌	Fix Tests	HIGH
❌	Add parsing for media queries ranges	LOW
❌	Hot Reload when importing with svelte style tag	MEDIUM
❌	Overhaul Error/Warn Handling	LOW
✅	Hot Reload Added	HIGH
✅	Update Docs	HIGH
✅	Indexing option for imports	HIGH
✅	Parse aliases from urls	HIGH
✅	Import aliases from config	HIGH

Simple Example

Input	Output

Example PostCSS Config

Postcss-media-query-importer can also include an "index" file when importing. See configuration for more details.

Usage & Installation

Step 1: Install the plugin:

npm install --save-dev postcss postcss-media-query-importer

Step 2: Add the plugin to plugins list and define your project media queries:

+ const postcssMediaQueryImporter = require('postcss-media-query-importer')

module.exports = {
  plugins: [
    require('autoprefixer'),
+    postcssMediaQueryImporter(
+       ...options  
+    ),
  ]
}

Step 3: In any postcss file or postcss <style> tag, use @import-mq 'path/to/folder'. The path can either be relative to the current file, or relative to the project root directory.