postcss-light-levels

PostCSS plugin for polyfilling the light-level CSS media feature.

Usage no npm install needed!

<script type="module">
  import postcssLightLevels from 'https://cdn.skypack.dev/postcss-light-levels';
</script>

README

PostCSS Light Levels PostCSS

Travis npm package Coveralls

A PostCSS plugin for polyfilling the light-level CSS @media feature.

This media feature can be used to adjust styles based on the ambient light level - however since it's from a relatively recent Working Draft, it currently has zero browser support.

This polyfill allows you to write the upcoming syntax but uses it to generate class names which you can apply to the <html> element in your HTML in order to achieve the same behaviour today.

It is recommended to combine this plugin with the client side JS library light-levels which detects ambient light levels and applies the corresponding class name to the <html> element.

It is worth nothing that both the JS library and post-css plugin can be used independently if you wish.

Write your CSS rules in the upcoming syntax:

@media (light-level: washed) {
  .foo {
    background: white;
    color: black;
    font-size: 2em;
  }
}

Light Levels will convert it into syntax the browser understands

.light-level-washed .foo {
  background: white;
  color: black;
  font-size: 2em;
}

Table of Contents

Demo

A working demo can be found here: https://daveordead.github.io/light-levels-demo/

Installation

npm install postcss-light-levels --save-dev

Usage

Check your project for existing PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-light-levels'),
    require('autoprefixer')
  ]
}

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

Options

Option name Usage Default
prefix if the prefix .light-level- doesn't suit your code base, you can change it to something more appropriate with this option. Note: The postfix names of ['dim' \ 'normal' \ 'washed'] can not be modified. If you are using this in combination with the PostCSS plugin you should also update the prefix option there. '.light-level-'

License

Copyright (c) 2020 David Berner

Licensed under the MIT license (see LICENSE.md for more details)