css-prefers-color-scheme - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

CHANGELOG.md

 # Changes to Prefers Color Scheme
 
+### 2.0.0 (November 3, 2018)
+
+- The client library now returns an object with various features, including:
+  - `scheme` to get or set the preferred color scheme
+  - `hasNativeSupport` to report whether `prefers-color-scheme` is supported
+  - `onChange` to listen for when the preferred color scheme changes
+  - `removeListener` to destroy the native `prefers-color-scheme` listener
+
 ### 1.0.0 (September 24, 2018)
 
 - Initial version

package.json

 {
   "name": "css-prefers-color-scheme",
-  "version": "1.0.0",
-  "description": "Use a light or dark color theme in CSS CSS",
+  "version": "2.0.0",
+  "description": "Use light and dark color schemes in all browsers",
   "author": "Jonathan Neal <[e-mail]>",
@@ -10,7 +10,10 @@ "license": "CC0-1.0",
   "bugs": "https://github.com/csstools/css-prefers-color-scheme/issues",
-  "main": "client.js",
-  "module": "client.mjs",
+  "main": "index.js",
+  "module": "index.mjs",
   "files": [
-    "client.js",
-    "client.mjs",
+    "browser.js",
+    "browser.js.map",
+    "browser.min.js",
+    "index.mjs",
+    "index.js",
     "postcss.js",
@@ -20,8 +23,11 @@ "postcss.mjs"
   "scripts": {
-    "build": "npm run build:client && npm run build:postcss",
-    "build:client": "rollup -c .rollup.client.js --silent",
-    "build:postcss": "rollup -c .rollup.postcss.js --silent",
+    "build": "npm run build:browser && npm run build:node && npm run build:postcss",
+    "build:browser": "npm run build:browser:dist && npm run build:browser:min",
+    "build:browser:dist": "cross-env NODE_ENV=browser rollup -c .rollup.js --silent",
+    "build:browser:min": "cross-env NODE_ENV=browser:min rollup -c .rollup.js --silent",
+    "build:node": "rollup -c .rollup.js --silent",
+    "build:postcss": "cross-env NODE_ENV=postcss rollup -c .rollup.js --silent",
     "prepublishOnly": "npm test",
     "pretest": "npm run build",
-    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
+    "test": "npm run test:js && npm run test:tape",
     "test:js": "eslint src/*.js --cache --ignore-path .gitignore --quiet",
@@ -34,14 +40,16 @@ "test:tape": "postcss-tape --plugin=postcss.js"
   "dependencies": {
-    "postcss": "^7.0.2"
+    "postcss": "^7.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.0",
-    "@babel/preset-env": "^7.0.0",
-    "babel-eslint": "^9.0.0",
-    "eslint": "^5.6.0",
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
+    "babel-eslint": "^10.0.1",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.8.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.66.2",
-    "rollup-plugin-babel": "^4.0.1",
+    "rollup": "^0.66.6",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-terser": "^3.0.0",
     "uglify-js": "^3.4.9"
@@ -48,0 +56,0 @@ },

postcss.js

@@ -17,13 +17,22 @@ 'use strict';
 
-var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', () => root => {
-  root.walkAtRules(mediaRegExp, atRule => {
-    const params = atRule.params;
-    const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
+var postcss$1 = postcss.plugin('postcss-prefers-color-scheme', opts => {
+  const preserve = 'preserve' in Object(opts) ? opts.preserve : false;
+  return root => {
+    root.walkAtRules(mediaRegExp, atRule => {
+      const params = atRule.params;
+      const altParams = params.replace(prefersInterfaceRegExp, prefersInterfaceReplacer);
 
-    if (params !== altParams) {
-      atRule.params = altParams;
-    }
-  });
+      if (params !== altParams) {
+        if (preserve) {
+          atRule.cloneBefore({
+            params: altParams
+          });
+        } else {
+          atRule.params = altParams;
+        }
+      }
+    });
+  };
 });
 
 module.exports = postcss$1;

README.md

@@ -7,4 +7,4 @@ # Prefers Color Scheme [<img src="https://jonathantneal.github.io/dom-logo.svg" alt="PostCSS" width="90" height="90" align="right">][Prefers Color Scheme]
 
-[Prefers Color Scheme] lets you use light or dark color themes in CSS,
-following the [Media Queries] specification.
+[Prefers Color Scheme] lets you use light and dark color schemes in all
+browsers, following the [Media Queries] specification.
 
@@ -15,2 +15,12 @@ ```bash
 
+There are 2 steps required to get color schemes working:
+
+- Transform your queries using the included [PostCSS plugin](#PostCSS-Plugin).
+- Apply your queries using the included [browser library](#Browser-Library).
+
+## PostCSS Plugin
+
+[Prefers Color Scheme] transforms `prefers-color-scheme` media queries into
+something all browsers understand.
+
 ```css
@@ -29,7 +39,5 @@ @media (prefers-color-scheme: dark) {
 }
-```
 
-[PostCSS] transforms these into cross-browser compatible `color-index` queries:
+/* becomes */
 
-```css
 @media (color-index: 48) {
@@ -49,27 +57,98 @@ :root {
 
-`CSS._prefersColorScheme()` applies these “light mode” and “dark mode” queries
-to documents on the fly. The entire frontend script is less than 300 bytes.
+## Browser Library
 
-[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
-Internet Explorer 9+.
-[See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed)
+[Prefers Color Scheme] applies color schemes previously transformed by the
+[PostCSS plugin](#PostCSS-Plugin).
 
 ```js
-const prefersColorScheme = require('css-prefers-color-scheme');
+// initialize prefersColorScheme (applies the system color scheme, if available)
+const prefersColorScheme = require('css-prefers-color-scheme')();
 
 // apply "dark" queries
-prefersColorScheme('dark');
+prefersColorScheme.scheme = 'dark';
 
 // apply "light" queries (also disabling "dark" queries)
-prefersColorScheme('light');
+prefersColorScheme.scheme = 'light';
 ```
 
-## PostCSS Usage
+The script is also available from the [unpkg.com](https://unpkg.com/) CDN:
 
-Add [Prefers Color Scheme] to your project:
+```html
+<script src="https://unpkg.com/css-prefers-color-scheme/browser.js"></script>
+<script>
+// initialize prefersColorScheme (applies the system color scheme, if available)
+initPrefersColorScheme()
+</script>
+```
 
-```bash
-npm install css-prefers-color-scheme --save-dev
+A minified version is also available:
+
+```html
+<script src="https://unpkg.com/css-prefers-color-scheme/browser.js"></script>
+<script>
+// initialize prefersColorScheme (applies the system color scheme, if available)
+initPrefersColorScheme()
+</script>
 ```
 
+[Prefers Color Scheme] works in all major browsers, including Safari 6+ and
+Internet Explorer 9+ without any polyfills.
+[See it for yourself.](https://app.crossbrowsertesting.com/public/i76b092cd2b52b86/screenshots/z25c0ccdfcc9c9b8956f?size=medium&type=windowed)
+
+---
+
+## Browser Usage
+
+Use [Prefers Color Scheme] to activate your `prefers-color-scheme` queries:
+
+```js
+const prefersColorScheme = require('css-prefers-color-scheme')();
+```
+
+By default, the system color scheme is applied, if your browser supports it.
+Otherwise, the light color scheme is applied. You may override this by passing
+in a color scheme.
+
+```js
+const prefersColorScheme = require('css-prefers-color-scheme')('dark');
+```
+
+The `prefersColorScheme` object returns the following properties:
+
+### value
+
+The `value` property returns the currently preferred color scheme, and can be
+set to change it.
+
+```js
+const prefersColorScheme = require('css-prefers-color-scheme')();
+
+// log the preferred color scheme
+console.log(prefersColorScheme.scheme);
+
+// apply "dark" queries
+prefersColorScheme.scheme = 'dark';
+```
+
+### hasNativeSupport
+
+The `hasNativeSupport` boolean represents whether `prefers-color-scheme` is
+supported by the current browser.
+
+### onChange
+
+The `onChange` function can be added in order to listen for changes to the
+preferred color scheme, whether they are triggered by the system or manually by
+the `change` function.
+
+### removeListener
+
+The `removeListener` function removes the native `prefers-color-scheme`
+listener, which may or may not be applied, depending on your browser support.
+This is provided to give you complete control over plugin cleanup.
+
+---
+
+## PostCSS Usage
+
 Use [Prefers Color Scheme] to process your CSS:
@@ -102,9 +181,15 @@
 
-## How does the frontend work?
+## How does it work?
 
-The `color-index` media query is understood in all major browsers going back to
-Internet Explorer 9, but all implementations only seem to allow a `color-index`
-of `0`.
+The [Prefers Color Scheme] [PostCSS plugin](#PostCSS-Plugin) transforms
+`prefers-color-scheme` queries into `color-index` queries, changing
+`prefers-color-scheme: dark` into `(color-index: 48)`,
+`prefers-color-scheme: light` into `(color-index: 70)`, and
+`prefers-color-scheme: no-preference` into `(color-index: 22)`.
 
-This script changes `(color-index: 48)` queries into
+The frontend receives these `color-index` queries, which are understood in all
+major browsers going back to Internet Explorer 9. However, all browsers only
+apply a `color-index` of `0`, so all other values are otherwise ignored.
+
+[Prefers Color Scheme] changes `(color-index: 48)` queries into
 `not all and (color-index: 48)` to activate “dark mode” specific CSS, and then
@@ -115,3 +200,3 @@ it inverts `(color-index: 70)` queries into `not all and (color-index: 48)`
 ```css
-@media (color-index: 70) { /* "light" query */
+@media (color-index: 70) { /* prefers-color-scheme: light */
   body {
@@ -125,3 +210,3 @@ background-color: white;
 These valid queries are accessible to `document.styleSheet`, so no css parsing
-is required to use this library, which is how the script is less than 300 bytes.
+is required to use this library, which is how the script is only 482 bytes.
 
@@ -128,0 +213,0 @@ ## Why does the fallback work this way?

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29337

increased by88.61%

Number of package files

11

increased by37.5%

Lines of code

203

increased by212.31%

Number of lines in readme file

222

increased by62.04%

Worsened metrics

Dev dependency count

12

increased by20%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedpostcss@^7.0.5