Usage no npm install needed!

<script type="module">
  import postcssLayoutSelector from 'https://cdn.skypack.dev/postcss-layout-selector';
</script>

README

PostCSS Layout Selector

PostCSS plugin for easy handling of different layouts without media queries but with conditional compilation.

header {
  background: #eee;

  @layout landscape {
    height: 75px;
  }

  @layout portrait {
    height: 150px;
  }
}

Generating "landscape" version:

header {
  background: #eee;
  height: 75px;
}

Generating "portrait" version:

header {
  background: #eee;
  height: 150px;
}

Should be installed locally in your project source code:

npm install postcss-layout-selector --save-dev

Integrate like this in your e.g. gulpfile.js:

postcss([
  require("postcss-layout-selector")({
    layout: "portrait"
  })
])

See PostCSS docs for examples for your environment.