postcss-custom-media - npm Package Compare versions

Comparing version 8.0.0 to 8.0.1

CHANGELOG.md

 # Changes to PostCSS Custom Media
 
+### 8.0.1 (June 3, 2022)
+
+- Updated: use specific AtRule visitor
+- Fixed: allow any valid ident in custom media (`@custom-media --🧑🏾‍🎤 (min-width: 320px);`)
+- Fixed: allow white space around custom media (`@media ( --mq-1   );`) (https://github.com/csstools/postcss-custom-media/pull/59) (https://github.com/csstools/postcss-custom-media/pull/71)
+
 ### 8.0.0 (January 12, 2021)
@@ -57,3 +63,3 @@
 - Fixed: circular dependencies are properly detected
-([#17](https://github.com/postcss/postcss-custom-media/pull/17))
+(https://github.com/postcss/postcss-custom-media/pull/17)
 
@@ -68,3 +74,3 @@ # 5.0.0 (August 25, 2015)
 - Added: Allow custom media to reference each other
-([#10](https://github.com/postcss/postcss-custom-media/pull/10))
+(https://github.com/postcss/postcss-custom-media/pull/10)
 
@@ -75,3 +81,3 @@ # 4.0.0 (May 17, 2015)
 - Added: automatic custom media `--` prefixing
-([#11](https://github.com/postcss/postcss-custom-media/issues/11))
+(https://github.com/postcss/postcss-custom-media/issues/11)
 - Added: `preserve` allows you to preserve custom media query defintions
@@ -99,14 +105,14 @@ - Added: `appendExtensions` allows you (when `preserve` is truthy) to append your extensions as media queries
 
-- Added: support for multiples media in query list (ref [#rework-custom-media/5](https://github.com/reworkcss/rework-custom-media/pull/5))
+- Added: support for multiples media in query list (ref https://github.com/reworkcss/rework-custom-media/pull/5)
 
 # 1.1.0 (September 30, 2014)
 
-- Added: support for js-defined media queries (fix [#3](https://github.com/postcss/postcss-custom-media/issues/3))
+- Added: support for js-defined media queries (fix https://github.com/postcss/postcss-custom-media/issues/3)
 
 # 1.0.1 (September 16, 2014)
 
-- Added: Allow whitespace around custom media name (fix [#2](https://github.com/postcss/postcss-custom-media/issues/2))
+- Added: Allow whitespace around custom media name (fix https://github.com/postcss/postcss-custom-media/issues/2)
 
 # 1.0.0 (August 12, 2014)
 
-✨ First release based on [rework-custom-media](https://github.com/reworkcss/rework-custom-media) v0.1.1
+✨ First release based on https://github.com/reworkcss/rework-custom-media v0.1.1

package.json

 {
-  "name": "postcss-custom-media",
-  "version": "8.0.0",
-  "description": "Use Custom Media Queries in CSS",
-  "author": "Jonathan Neal <[e-mail]>",
-  "contributors": [
-    "Maxime Thirouin"
-  ],
-  "license": "MIT",
-  "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.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": ">=10.0.0"
-  },
-  "peerDependencies": {
-    "postcss": "^8.1.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.11.5",
-    "@rollup/plugin-babel": "^5.2.1",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.10.0",
-    "postcss": "^8.1.0",
-    "postcss-tape": "^6.0.0",
-    "pre-commit": "^1.2.2",
-    "rollup": "^2.28.2"
-  },
-  "eslintConfig": {
-    "env": {
-      "browser": true,
-      "es6": true,
-      "node": true
-    },
-    "extends": "eslint:recommended",
-    "parser": "babel-eslint",
-    "parserOptions": {
-      "ecmaVersion": 2018,
-      "impliedStrict": true,
-      "sourceType": "module"
-    }
-  },
-  "keywords": [
-    "postcss",
-    "css",
-    "postcss-plugin",
-    "custom",
-    "media",
-    "query",
-    "queries",
-    "w3c",
-    "csswg",
-    "atrule",
-    "at-rule",
-    "specification"
-  ]
+	"name": "postcss-custom-media",
+	"description": "Use Custom Media Queries in CSS",
+	"version": "8.0.1",
+	"contributors": [
+		{
+			"name": "Antonio Laguna",
+			"email": "[e-mail]",
+			"url": "https://antonio.laguna.es"
+		},
+		{
+			"name": "Romain Menke",
+			"email": "[e-mail]"
+		},
+		{
+			"name": "Jonathan Neal",
+			"email": "[e-mail]"
+		},
+		{
+			"name": "Maxime Thirouin"
+		}
+	],
+	"license": "MIT",
+	"funding": {
+		"type": "opencollective",
+		"url": "https://opencollective.com/csstools"
+	},
+	"engines": {
+		"node": "^12 || ^14 || >=16"
+	},
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs",
+			"default": "./dist/index.mjs"
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"peerDependencies": {
+		"postcss": "^8.3"
+	},
+	"devDependencies": {
+		"postcss-value-parser": "^4.2.0"
+	},
+	"scripts": {
+		"build": "rollup -c ../../rollup/default.js",
+		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
+		"lint": "npm run lint:eslint && npm run lint:package-json",
+		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run clean && npm run build && npm run test",
+		"test": "node .tape.cjs && npm run test:exports",
+		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.cjs"
+	},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-custom-media"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"at-rule",
+		"atrule",
+		"css",
+		"csswg",
+		"custom",
+		"media",
+		"postcss",
+		"postcss-plugin",
+		"queries",
+		"query",
+		"specification",
+		"w3c"
+	],
+	"csstools": {
+		"cssdbId": "custom-media-queries",
+		"exportName": "postcssCustomMedia",
+		"humanReadableName": "PostCSS Custom Media",
+		"specUrl": "https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
 }

README.md

@@ -1,10 +0,6 @@
-# PostCSS Custom Media [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][postcss]
+# PostCSS Custom Media [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[![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]
+[<img alt="npm version" src="https://img.shields.io/npm/v/postcss-custom-media.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/custom-media-queries.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
-[PostCSS Custom Media] lets you use Custom Media Queries in CSS, following the
-[CSS Media Queries] specification.
+[PostCSS Custom Media] lets you define `@custom-media` in CSS following the [Custom Media Specification].
 
@@ -15,3 +11,3 @@ ```pcss
 @media (--small-viewport) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
@@ -22,3 +18,3 @@
 @media (max-width: 30em) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
@@ -32,16 +28,8 @@ ```
 ```bash
-npm install postcss-custom-media --save-dev
+npm install postcss postcss-custom-media --save-dev
 ```
 
-Use [PostCSS Custom Media] to process your CSS:
+Use it as a [PostCSS] plugin:
 
 ```js
-const postcssCustomMedia = require('postcss-custom-media');
-
-postcssCustomMedia.process(YOUR_CSS /*, processOptions, pluginOptions */);
-```
-
-Or use it as a [PostCSS] plugin:
-
-```js
 const postcss = require('postcss');
@@ -51,7 +39,8 @@ const postcssCustomMedia = require('postcss-custom-media');
 postcss([
-  postcssCustomMedia(/* pluginOptions */)
+	postcssCustomMedia(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
-[PostCSS Custom Media] runs in all Node environments, with special instructions for:
+[PostCSS Custom Media] runs in all Node environments, with special
+instructions for:
 
@@ -65,5 +54,9 @@ | [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) |
 
-The `preserve` option determines whether custom media and atrules using custom
-media should be preserved in their original form.
+The `preserve` option determines whether the original notation
+is preserved. By default, it is not preserved.
 
+```js
+postcssCustomMedia({ preserve: true })
+```
+
 ```pcss
@@ -73,3 +66,3 @@ @custom-media --small-viewport (max-width: 30em);
 @media (--small-viewport) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
@@ -82,10 +75,11 @@
 @media (max-width: 30em) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
 
 @media (--small-viewport) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
 ```
 
+
 ### importFrom
@@ -99,3 +93,3 @@
 postcssCustomMedia({
-  importFrom: 'path/to/file.css' // => @custom-selector --small-viewport (max-width: 30em);
+	importFrom: 'path/to/file.css' // => @custom-selector --small-viewport (max-width: 30em);
 });
@@ -106,7 +100,7 @@ ```
 @media (max-width: 30em) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
 
 @media (--small-viewport) {
-  /* styles for small viewport */
+	/* styles for small viewport */
 }
@@ -122,15 +116,15 @@ ```
 postcssCustomMedia({
-  importFrom: [
-    'path/to/file.css',
-    'and/then/this.js',
-    'and/then/that.json',
-    {
-      customMedia: { '--small-viewport': '(max-width: 30em)' }
-    },
-    () => {
-      const customMedia = { '--small-viewport': '(max-width: 30em)' };
+	importFrom: [
+		'path/to/file.css',
+		'and/then/this.js',
+		'and/then/that.json',
+		{
+			customMedia: { '--small-viewport': '(max-width: 30em)' }
+		},
+		() => {
+			const customMedia = { '--small-viewport': '(max-width: 30em)' };
 
-      return { customMedia };
-    }
-  ]
+			return { customMedia };
+		}
+	]
 });
@@ -147,3 +141,3 @@ ```
 postcssCustomMedia({
-  exportTo: 'path/to/file.css' // @custom-media --small-viewport (max-width: 30em);
+	exportTo: 'path/to/file.css' // @custom-media --small-viewport (max-width: 30em);
 });
@@ -161,12 +155,12 @@ ```
 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,
-    customMedia => {
-      customMedia    // { '--small-viewport': '(max-width: 30em)' }
-    }
-  ]
+	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,
+		customMedia => {
+			customMedia    // { '--small-viewport': '(max-width: 30em)' }
+		}
+	]
 });
@@ -179,13 +173,12 @@ ```
 
-[cli-img]: https://img.shields.io/travis/postcss/postcss-custom-media/master.svg
-[cli-url]: https://travis-ci.org/postcss/postcss-custom-media
-[css-img]: https://cssdb.org/badge/custom-media-queries.svg
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [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
+[discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/postcss-custom-media
 
-[CSS Media Queries]: https://drafts.csswg.org/mediaqueries-5/#custom-mq
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Custom Media]: https://github.com/postcss/postcss-custom-media
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Custom Media]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media
+[Custom Media Specification]: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media

New alerts

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Fixed alerts

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 bug tracker

Maintenance

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

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

Improved metrics

Dev dependency count

1

decreased by-90%

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

24767

decreased by-42.83%

Lines of code

50

decreased by-94.36%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

172

decreased by-3.91%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes