postcss-custom-media - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

CHANGELOG.md

@@ -1,6 +0,16 @@
-# 6.0.0 - 2017-05-12
+# Changes to PostCSS Custom Media
 
+### 7.0.0 (September 12, 2018)
+
+- Added: New `preserve` option to preserve custom media and atrules using them
+- Added: New `exportTo` function to specify where to export custom media
+- Added: New `importFrom` option to specify where to import custom media
+- Added: Support for PostCSS v7
+- Added: Support for Node v6+
+
+# 6.0.0 (May 12, 2017)
+
 - Added: compatibility with postcss v6.x
 
-# 5.0.1 - 2016-02-03
+# 5.0.1 (February 3, 2016)
 
@@ -10,3 +20,3 @@ - Fixed: circular dependencies are properly detected
 
-# 5.0.0 - 2015-08-25
+# 5.0.0 (August 25, 2015)
 
@@ -16,3 +26,3 @@ - Removed: compatibility with postcss v4.x
 
-# 4.1.0 - 2015-06-30
+# 4.1.0 (06 30, 2015)
 
@@ -22,3 +32,3 @@ - Added: Allow custom media to reference each other
 
-# 4.0.0 - 2015-05-17
+# 4.0.0 (May 17, 2015)
 
@@ -31,3 +41,3 @@ - Changed: warning messages are now sent via postcss messages api (^4.1.0)
 
-# 3.0.0 - 2015-01-29
+# 3.0.0 (January 29, 2015)
 
@@ -41,24 +51,24 @@ - Added: compatibility with postcss v4.x
 
-# 1.3.0 - 2014-11-25
+# 1.3.0 (November 25, 2014)
 
 - Changed: better gnu message
 
-# 1.2.1 - 2014-10-09
+# 1.2.1 (October 9, 2014)
 
 - Fixed: npm description
 
-# 1.2.0 - 2014-10-01
+# 1.2.0 (October 1, 2014)
 
 - Added: support for multiples media in query list (ref [#rework-custom-media/5](https://github.com/reworkcss/rework-custom-media/pull/5))
 
-# 1.1.0 - 2014-09-30
+# 1.1.0 (September 30, 2014)
 
 - Added: support for js-defined media queries (fix [#3](https://github.com/postcss/postcss-custom-media/issues/3))
 
-# 1.0.1 - 2014-09-16
+# 1.0.1 (September 16, 2014)
 
 - Added: Allow whitespace around custom media name (fix [#2](https://github.com/postcss/postcss-custom-media/issues/2))
 
-# 1.0.0 - 2014-08-12
+# 1.0.0 (August 12, 2014)
 
 ✨ First release based on [rework-custom-media](https://github.com/reworkcss/rework-custom-media) v0.1.1

package.json

 {
   "name": "postcss-custom-media",
-  "version": "6.0.0",
-  "description": "PostCSS plugin to transform W3C CSS Custom Media Queries to more compatible CSS",
-  "keywords": [
-    "css",
-    "postcss",
-    "postcss-plugin",
-    "media queries",
-    "custom-media"
+  "version": "7.0.0",
+  "description": "Use Custom Media Queries in CSS",
+  "author": "Jonathan Neal <[e-mail]>",
+  "contributors": [
+    "Maxime Thirouin"
   ],
-  "author": "Maxime Thirouin",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/postcss/postcss-custom-media.git"
-  },
+  "repository": "postcss/postcss-custom-media",
+  "homepage": "https://github.com/postcss/postcss-custom-media#readme",
+  "bugs": "https://github.com/postcss/postcss-custom-media/issues",
+  "main": "index.cjs.js",
+  "module": "index.es.mjs",
   "files": [
-    "index.js"
+    "index.cjs.js",
+    "index.es.mjs"
   ],
+  "scripts": {
+    "prepublishOnly": "npm test",
+    "pretest": "rollup -c .rollup.js --silent",
+    "test": "echo 'Running tests...'; npm run test:js && npm run test:tape",
+    "test:js": "eslint *.js lib/*.js --cache --ignore-path .gitignore --quiet",
+    "test:tape": "postcss-tape"
+  },
+  "engines": {
+    "node": ">=6.0.0"
+  },
   "dependencies": {
-    "postcss": "^6.0.1"
+    "postcss": "^7.0.2"
   },
   "devDependencies": {
-    "eslint": "^3.19.0",
-    "eslint-config-i-am-meticulous": "^6.0.1",
-    "eslint-plugin-import": "^1.7.0",
-    "npmpub": "^3.1.0",
-    "tape": "^4.6.3"
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.5.0",
+    "eslint-config-dev": "^2.0.0",
+    "postcss-tape": "^2.2.0",
+    "pre-commit": "^1.2.2",
+    "rollup": "^0.65.2",
+    "rollup-plugin-babel": "^4.0.3"
   },
-  "scripts": {
-    "lint": "eslint --fix .",
-    "tests": "tape test",
-    "test": "npm run lint && npm run tests",
-    "release": "npmpub"
+  "eslintConfig": {
+    "extends": "dev",
+    "parser": "babel-eslint"
   },
-  "eslintConfig": {
-    "extends": "eslint-config-i-am-meticulous/es5"
-  }
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "custom",
+    "media",
+    "query",
+    "queries",
+    "w3c",
+    "csswg",
+    "atrule",
+    "at-rule",
+    "specification"
+  ]
 }

README.md

@@ -1,9 +0,23 @@
-# postcss-custom-media [![Build Status](https://travis-ci.org/postcss/postcss-custom-media.png)](https://travis-ci.org/postcss/postcss-custom-media)
+# PostCSS Custom Media [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
 
-> [PostCSS](https://github.com/postcss/postcss) plugin to transform [W3C CSS Custom Media Queries](https://www.w3.org/TR/2016/WD-mediaqueries-4-20160126/#custom-mq) syntax to more compatible CSS.
+[![NPM Version][npm-img]][npm-url]
+[![CSS Standard Status][css-img]][css-url]
+[![Build Status][cli-img]][cli-url]
+[![Support Chat][git-img]][git-url]
 
-## Installation
+[PostCSS Custom Media] lets you use Custom Media Queries in CSS, following the
+[CSS Media Queries] specification.
 
-```console
-$ npm install postcss-custom-media
+```pcss
+@custom-media --small-viewport (max-width: 30em);
+
+@media (--small-viewport) {
+  /* styles for small viewport */
+}
+
+/* becomes */
+
+@media (max-width: 30em) {
+  /* styles for small viewport */
+}
 ```
@@ -13,20 +27,40 @@
 
+Add [PostCSS Custom Media] to your project:
+
+```bash
+npm install postcss-custom-media --save-dev
+```
+
+Use [PostCSS Custom Media] to process your CSS:
+
 ```js
-// dependencies
-var postcss = require("postcss")
-var customMedia = require("postcss-custom-media")
+const postcssCustomMedia = require('postcss-custom-media');
 
-// css to be processed
-var css = fs.readFileSync("input.css", "utf8")
+postcssCustomMedia.process(YOUR_CSS /*, processOptions, pluginOptions */);
+```
 
-// process css using postcss-custom-media
-var out = postcss()
-  .use(customMedia())
-  .process(css)
-  .css
+Or use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssCustomMedia = require('postcss-custom-media');
+
+postcss([
+  postcssCustomMedia(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
 ```
 
-Using this `input.css`:
+[PostCSS Custom Media] runs in all Node environments, with special instructions for:
 
-```css
+| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- | --- | --- |
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether custom media and atrules using custom
+media should be preserved in their original form.
+
+```pcss
 @custom-media --small-viewport (max-width: 30em);
@@ -37,49 +71,106 @@
 }
-```
 
-you will get:
+/* becomes */
 
-```css
+@custom-media --small-viewport (max-width: 30em);
+
 @media (max-width: 30em) {
   /* styles for small viewport */
 }
+
+@media (--small-viewport) {
+  /* styles for small viewport */
+}
 ```
 
-Checkout [tests](test) for more examples.
+### importFrom
 
-### Options
+The `importFrom` option specifies sources where custom media can be imported
+from, which might be CSS, JS, and JSON files, functions, and directly passed
+objects.
 
-#### `extensions`
+```js
+postcssCustomMedia({
+  importFrom: 'path/to/file.css' // => @custom-selector --small-viewport (max-width: 30em);
+});
+```
 
-(default: `{}`)
+```pcss
+@media (max-width: 30em) {
+  /* styles for small viewport */
+}
 
-Allows you to pass an object to define the `<media-query-list>` for each
-`<extension-name>`. These definitions will override any that exist in the CSS.
-
-```javascript
-{
-  '--phone': '(min-width: 544px)',
-  '--tablet': '(min-width: 768px)',
-  '--desktop': '(min-width: 992px)',
-  '--large-desktop': '(min-width: 1200px)',
+@media (--small-viewport) {
+  /* styles for small viewport */
 }
 ```
 
-#### `preserve`
+Multiple sources can be passed into this option, and they will be parsed in the
+order they are received. JavaScript files, JSON files, functions, and objects
+will need to namespace custom media using the `customProperties` or
+`custom-properties` key.
 
-(default: `false`)
+```js
+postcssCustomMedia({
+  importFrom: [
+    'path/to/file.css',
+    'and/then/this.js',
+    'and/then/that.json',
+    {
+      customMedia: { '--small-viewport': '(max-width: 30em)' }
+    },
+    () => {
+      const customProperties = { '--small-viewport': '(max-width: 30em)' };
 
-Allows you to preserve custom media query definitions in output.
+      return { customProperties };
+    }
+  ]
+});
+```
 
-#### `appendExtensions`
+### exportTo
 
-(default: `false`)
+The `exportTo` option specifies destinations where custom media can be exported
+to, which might be CSS, JS, and JSON files, functions, and directly passed
+objects.
 
-**This option only works if `preserve` is truthy**.
-Allows you to append your extensions at end of your CSS.
+```js
+postcssCustomMedia({
+  exportTo: 'path/to/file.css' // @custom-media --small-viewport (max-width: 30em);
+});
+```
 
----
+Multiple destinations can be passed into this option, and they will be parsed
+in the order they are received. JavaScript files, JSON files, and objects will
+need to namespace custom media using the `customProperties` or
+`custom-properties` key.
 
-## [Changelog](CHANGELOG.md)
+```js
+const cachedObject = { customMedia: {} };
 
-## [License](LICENSE)
+postcssCustomMedia({
+  exportTo: [
+    'path/to/file.css',   // @custom-media --small-viewport (max-width: 30em);
+    'and/then/this.js',   // module.exports = { customMedia: { '--small-viewport': '(max-width: 30em)' } }
+    'and/then/this.mjs',  // export const customMedia = { '--small-viewport': '(max-width: 30em)' } }
+    'and/then/that.json', // { "custom-media": { "--small-viewport": "(max-width: 30em)" } }
+    cachedObject,
+    customProperties => {
+      customProperties    // { '--small-viewport': '(max-width: 30em)' }
+    }
+  ]
+});
+```
+
+[cli-img]: https://img.shields.io/travis/postcss/postcss-custom-media.svg
+[cli-url]: https://travis-ci.org/postcss/postcss-custom-media
+[css-img]: https://cssdb.org/badge/custom-media-queries.svg
+[css-url]: https://cssdb.org/#custom-media-queries
+[git-img]: https://img.shields.io/badge/support-chat-blue.svg
+[git-url]: https://gitter.im/postcss/postcss
+[npm-img]: https://img.shields.io/npm/v/postcss-custom-media.svg
+[npm-url]: https://www.npmjs.com/package/postcss-custom-media
+
+[CSS Media Queries]: https://drafts.csswg.org/mediaqueries-5/#custom-mq
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Custom Media]: https://github.com/postcss/postcss-custom-media

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53665

increased by478.35%

Number of package files

6

increased by20%

Lines of code

1234

increased by841.98%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

175

increased by108.33%

Worsened metrics

Dev dependency count

10

increased by100%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedpicocolors@0.2.1(transitive)

• + Addedpostcss@7.0.39(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedpostcss@6.0.23(transitive)

• - Removedsupports-color@5.5.0(transitive)

• Updatedpostcss@^7.0.2