postcss-media-queries-to-class v0.1.0

postcss-media-queries-to-class

PostCSS plugin to convert media queries to class selectors.

@media (prefers-color-scheme: dark) {
body { background: blue; }
}
@media (max-width: 100px) {
body { background: red; }
}

@media (prefers-color-scheme: dark) {
body { background: blue; }
}
:root.darkmode body, #root.darkmode body { background: blue; }
@media (max-width: 100px) {
body { background: red; }
}
:root.small body, #root.small body { background: red; }

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-media-queries-to-class

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-media-queries-to-class')({
+      rootSelectors: [':root', '#root'],
+      conversion: [{
+        queryRegex: /\(\s*prefers-color-scheme\s*:\s*dark\s*\)/,
+        targetSelector: '.darkmode',
+      }, {
+        queryRegex: /\(\s*max-width\s*:\s*100px\s*\)/,
+        targetSelector: '.small',
+      }],
+   }),
    require('autoprefixer')
  ]
}

Options

rootSelectors

Selectors treated as root element, which will be attached with customed classnames configured.

conversion

Array of options to convert media queries to class selectors. Refer to example above for more informantion.

Tips

• Can be used in conjunction with postcss-css-variables.