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;
}A working demo can be found here: https://daveordead.github.io/light-levels-demo/
npm install postcss-light-levels --save-devCheck 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.
| 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-' |
Copyright (c) 2020 David Berner
Licensed under the MIT license (see LICENSE.md for more details)