PostCSS Light Levels [][postcss]

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][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 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 element.

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

[light-levels]: https://github.com/DaveOrDead/light-levels
[postcss]: https://github.com/postcss/postcss
[light-level css @media feature]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/light-level
[build-badge]: https://travis-ci.com/DaveOrDead/postcss-light-levels.svg?branch=master
[build]: https://travis-ci.com/DaveOrDead/postcss-light-levels
[npm-badge]: https://raster.shields.io/npm/v/postcss-light-levels.png
[npm]: https://www.npmjs.com/package/postcss-light-levels
[coveralls-badge]: https://coveralls.io/repos/github/DaveOrDead/postcss-light-levels/badge.svg?branch=master
[coveralls]: https://coveralls.io/github/DaveOrDead/postcss-light-levels?branch=master

Write your CSS rules in the upcoming syntax:
``css
@media (light-level: washed) {
.foo {
background: white;
color: black;
font-size: 2em;
}
}
`

Light Levels will convert it into syntax the browser understands
`css
.light-level-washed .foo {
background: white;
color: black;
font-size: 2em;
}
`

Table of Contents

- Demo
- Installation
- Usage
- Options
- License

Demo

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

Installation

`sh
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:

`diff
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.

[official docs]: https://github.com/postcss/postcss#usage

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)_