postcss-custom-media - npm Package Compare versions

Comparing version 8.0.2 to 9.0.0

CHANGELOG.md

 # Changes to PostCSS Custom Media
 
+### 9.0.0 (November 14, 2022)
+
+- Updated: Support for Node v14+ (major).
+- Removed: `importFrom` feature (breaking).
+- Removed: `exportTo` feature (breaking).
+- Fixed: implement logical evaluation of custom media queries.
+- Added: Support for `true` and `false` keywords in `@custom-media`.
+
 ### 8.0.2 (June 4, 2022)
@@ -4,0 +12,0 @@

package.json

 {
 	"name": "postcss-custom-media",
 	"description": "Use Custom Media Queries in CSS",
-	"version": "8.0.2",
+	"version": "9.0.0",
 	"contributors": [
@@ -29,3 +29,3 @@ {
 	"engines": {
-		"node": "^12 || ^14 || >=16"
+		"node": "^14 || ^16 || >=18"
 	},
@@ -49,9 +49,11 @@ "main": "dist/index.cjs",
 	"dependencies": {
-		"postcss-value-parser": "^4.2.0"
+		"@csstools/css-parser-algorithms": "^1.0.0",
+		"@csstools/css-tokenizer": "^1.0.0",
+		"@csstools/media-query-list-parser": "^1.0.0"
 	},
 	"peerDependencies": {
-		"postcss": "^8.3"
+		"postcss": "^8.4"
 	},
 	"scripts": {
-		"build": "rollup -c ../../rollup/default.js",
+		"build": "rollup -c ../../rollup/default.mjs",
 		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
@@ -63,5 +65,5 @@ "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
 		"prepublishOnly": "npm run clean && npm run build && npm run test",
-		"test": "node .tape.cjs && npm run test:exports",
+		"test": "node .tape.mjs && npm run test:exports",
 		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
-		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.cjs"
+		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
 	},
@@ -68,0 +70,0 @@ "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media#readme",

README.md

@@ -21,2 +21,77 @@ # PostCSS Custom Media [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
+## `true` and `false`
+
+With `@custom-media` you can use the constants `true` and `false`.
+These are especially handy when debugging.
+
+If you are unsure how your page is affected when a certain media query matches or not you can use these, to quickly toggle the results.
+This plugin downgrades these queries to something that works in all browsers.
+
+Quickly check the result as if the query matches:
+
+```pcss
+@custom-media --small-viewport true;
+
+@media (--small-viewport) {
+	/* styles for small viewport */
+}
+
+/* becomes */
+
+@media (max-color:2147477350) {
+	/* styles for small viewport */
+}
+```
+
+Quickly check the result as if the query does not match:
+
+```pcss
+@custom-media --small-viewport false;
+
+@media (--small-viewport) {
+	/* styles for small viewport */
+}
+
+/* becomes */
+
+@media (color:2147477350) {
+	/* styles for small viewport */
+}
+```
+
+## logical evaluation of complex media queries
+
+It is impossible to accurately and correctly resolve complex `@custom-media` queries
+as these depend on the browser the queries will eventually run in.
+
+_Some of these queries will have only one possible outcome but we have to account for all possible queries in this plugin._
+
+⚠️ When handling complex media queries you will see that your CSS is doubled for each level of complexity.<br>
+GZIP works great to de-dupe this but having a lot of complex media queries will have a performance impact.
+
+An example of a very complex (and artificial) use-case :
+
+```pcss
+
+@custom-media --a-complex-query tty and (min-width: 300px);
+
+@media not screen and ((not (--a-complex-query)) or (color)) {
+	/* Your CSS */
+}
+
+/* becomes */
+
+
+@media tty and (min-width: 300px) {
+@media not screen and ((not (max-color:2147477350)) or (color)) {
+	/* Your CSS */
+}
+}
+@media not  tty and (min-width: 300px) {
+@media not screen and ((not (color:2147477350)) or (color)) {
+	/* Your CSS */
+}
+}
+```
+
 ## Usage
@@ -78,86 +153,2 @@
 
-
-### importFrom
-
-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.
-
-```js
-postcssCustomMedia({
-	importFrom: 'path/to/file.css' // => @custom-selector --small-viewport (max-width: 30em);
-});
-```
-
-```pcss
-@media (max-width: 30em) {
-	/* styles for small viewport */
-}
-
-@media (--small-viewport) {
-	/* styles for small viewport */
-}
-```
-
-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 `customMedia` or
-`custom-media` key.
-
-```js
-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)' };
-
-			return { customMedia };
-		}
-	]
-});
-```
-
-### exportTo
-
-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.
-
-```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 `customMedia` or
-`custom-media` key.
-
-```js
-const cachedObject = { customMedia: {} };
-
-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)' }
-		}
-	]
-});
-```
-
-See example exports written to [CSS](test/export-media.css),
-[JS](test/export-media.js), [MJS](test/export-media.mjs), and
-[JSON](test/export-media.json).
-
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -164,0 +155,0 @@ [css-url]: https://cssdb.org/#custom-media-queries

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

Improved metrics

Total package byte prevSize

28833

increased by16.07%

Number of package files

15

increased by150%

Lines of code

109

increased by118%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by100%

Number of lines in readme file

163

decreased by-5.23%

Dependency changes

• + Added@csstools/css-parser-algorithms@^1.0.0

• + Added@csstools/css-tokenizer@^1.0.0

• + Added@csstools/media-query-list-parser@^1.0.0

• + Added@csstools/css-parser-algorithms@1.0.0(transitive)

• + Added@csstools/css-tokenizer@1.0.0(transitive)

• + Added@csstools/media-query-list-parser@1.0.0(transitive)

• - Removedpostcss-value-parser@^4.2.0

• - Removedpostcss-value-parser@4.2.0(transitive)