diff --git a/package-lock.json b/package-lock.json index 44a00266a..e6c885695 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,6 @@ } }, "cli/csstools-cli": { - "name": "@csstools/csstools-cli", "version": "2.0.1", "license": "CC0-1.0", "dependencies": { @@ -102,7 +101,6 @@ } }, "experimental/css-has-pseudo": { - "name": "@csstools/css-has-pseudo-experimental", "version": "0.6.0", "license": "CC0-1.0", "devDependencies": { @@ -120,7 +118,6 @@ } }, "experimental/postcss-gradient-stop-increments": { - "name": "@csstools/postcss-gradient-stop-increments-experimental", "version": "1.0.0", "license": "CC0-1.0", "dependencies": { @@ -143,7 +140,6 @@ } }, "experimental/postcss-nesting": { - "name": "@csstools/postcss-nesting-experimental", "version": "2.0.0", "license": "CC0-1.0", "dependencies": { @@ -2699,15 +2695,15 @@ } }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.56.0.tgz", - "integrity": "sha512-ZNW37Ccl3oMZkzxrYDUX4o7cnuPgU+YrcaYXzsRtLB16I1FR5SHMqga3zGsaSliZADCWo2v8qHWqAYIj8nWCCg==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.57.0.tgz", + "integrity": "sha512-itag0qpN6q2UMM6Xgk6xoHa0D0/P+M17THnr4SVgqn9Rgam5k/He33MA7/D7QoJcdMxHFyX7U9imaBonAX/6qA==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", - "@typescript-eslint/scope-manager": "5.56.0", - "@typescript-eslint/type-utils": "5.56.0", - "@typescript-eslint/utils": "5.56.0", + "@typescript-eslint/scope-manager": "5.57.0", + "@typescript-eslint/type-utils": "5.57.0", + "@typescript-eslint/utils": "5.57.0", "debug": "^4.3.4", "grapheme-splitter": "^1.0.4", "ignore": "^5.2.0", @@ -2766,15 +2762,15 @@ "dev": true }, "node_modules/@typescript-eslint/parser": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.56.0.tgz", - "integrity": "sha512-sn1OZmBxUsgxMmR8a8U5QM/Wl+tyqlH//jTqCg8daTAmhAk26L2PFhcqPLlYBhYUJMZJK276qLXlHN3a83o2cg==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.57.0.tgz", + "integrity": "sha512-orrduvpWYkgLCyAdNtR1QIWovcNZlEm6yL8nwH/eTxWLd8gsP+25pdLHYzL2QdkqrieaDwLpytHqycncv0woUQ==", "dev": true, "peer": true, "dependencies": { - "@typescript-eslint/scope-manager": "5.56.0", - "@typescript-eslint/types": "5.56.0", - "@typescript-eslint/typescript-estree": "5.56.0", + "@typescript-eslint/scope-manager": "5.57.0", + "@typescript-eslint/types": "5.57.0", + "@typescript-eslint/typescript-estree": "5.57.0", "debug": "^4.3.4" }, "engines": { @@ -2794,13 +2790,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.56.0.tgz", - "integrity": "sha512-jGYKyt+iBakD0SA5Ww8vFqGpoV2asSjwt60Gl6YcO8ksQ8s2HlUEyHBMSa38bdLopYqGf7EYQMUIGdT/Luw+sw==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.57.0.tgz", + "integrity": "sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.56.0", - "@typescript-eslint/visitor-keys": "5.56.0" + "@typescript-eslint/types": "5.57.0", + "@typescript-eslint/visitor-keys": "5.57.0" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -2811,13 +2807,13 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.56.0.tgz", - "integrity": "sha512-8WxgOgJjWRy6m4xg9KoSHPzBNZeQbGlQOH7l2QEhQID/+YseaFxg5J/DLwWSsi9Axj4e/cCiKx7PVzOq38tY4A==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.57.0.tgz", + "integrity": "sha512-kxXoq9zOTbvqzLbdNKy1yFrxLC6GDJFE2Yuo3KqSwTmDOFjUGeWSakgoXT864WcK5/NAJkkONCiKb1ddsqhLXQ==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "5.56.0", - "@typescript-eslint/utils": "5.56.0", + "@typescript-eslint/typescript-estree": "5.57.0", + "@typescript-eslint/utils": "5.57.0", "debug": "^4.3.4", "tsutils": "^3.21.0" }, @@ -2838,9 +2834,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.56.0.tgz", - "integrity": "sha512-JyAzbTJcIyhuUhogmiu+t79AkdnqgPUEsxMTMc/dCZczGMJQh1MK2wgrju++yMN6AWroVAy2jxyPcPr3SWCq5w==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.57.0.tgz", + "integrity": "sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -2851,13 +2847,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.56.0.tgz", - "integrity": "sha512-41CH/GncsLXOJi0jb74SnC7jVPWeVJ0pxQj8bOjH1h2O26jXN3YHKDT1ejkVz5YeTEQPeLCCRY0U2r68tfNOcg==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.57.0.tgz", + "integrity": "sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.56.0", - "@typescript-eslint/visitor-keys": "5.56.0", + "@typescript-eslint/types": "5.57.0", + "@typescript-eslint/visitor-keys": "5.57.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -2911,17 +2907,17 @@ "dev": true }, "node_modules/@typescript-eslint/utils": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.56.0.tgz", - "integrity": "sha512-XhZDVdLnUJNtbzaJeDSCIYaM+Tgr59gZGbFuELgF7m0IY03PlciidS7UQNKLE0+WpUTn1GlycEr6Ivb/afjbhA==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.57.0.tgz", + "integrity": "sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@types/json-schema": "^7.0.9", "@types/semver": "^7.3.12", - "@typescript-eslint/scope-manager": "5.56.0", - "@typescript-eslint/types": "5.56.0", - "@typescript-eslint/typescript-estree": "5.56.0", + "@typescript-eslint/scope-manager": "5.57.0", + "@typescript-eslint/types": "5.57.0", + "@typescript-eslint/typescript-estree": "5.57.0", "eslint-scope": "^5.1.1", "semver": "^7.3.7" }, @@ -2970,12 +2966,12 @@ "dev": true }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.56.0.tgz", - "integrity": "sha512-1mFdED7u5bZpX6Xxf5N9U2c18sb+8EvU3tyOIj6LQZ5OOvnmj8BVeNNP603OFPm5KkS1a7IvCIcwrdHXaEMG/Q==", + "version": "5.57.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.57.0.tgz", + "integrity": "sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.56.0", + "@typescript-eslint/types": "5.57.0", "eslint-visitor-keys": "^3.3.0" }, "engines": { @@ -3328,9 +3324,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001470", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001470.tgz", - "integrity": "sha512-065uNwY6QtHCBOExzbV6m236DDhYCCtPmQUCoQtwkVqzud8v5QPidoMr6CoMkC2nfp6nksjttqWQRRh75LqUmA==", + "version": "1.0.30001472", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001472.tgz", + "integrity": "sha512-xWC/0+hHHQgj3/vrKYY0AAzeIUgr7L9wlELIcAvZdDUHlhL/kNxMdnQLOSOQfP8R51ZzPhmHdyMkI0MMpmxCfg==", "funding": [ { "type": "opencollective", @@ -3339,6 +3335,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -3534,9 +3534,9 @@ "link": true }, "node_modules/cssdb": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.5.1.tgz", - "integrity": "sha512-YdmjGmoS9TT5wgoKjySaBqgbPYtyxbbegeK8WNqWbZRa7SJcX9V0qGfDjbI8oPQwmh/zuA6ZSnQBCKLj9bZufw==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.5.2.tgz", + "integrity": "sha512-Xpu7Bf5Vlw+G7ikA2Lg/lVCRTSY8D5M5qFUgGNFyS4pa8ufGLyCBxIX/3if3krHlF1SKSfVPI/YsAWLDVEbocw==", "funding": { "type": "opencollective", "url": "https://opencollective.com/csstools" @@ -3700,9 +3700,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.340", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.340.tgz", - "integrity": "sha512-zx8hqumOqltKsv/MF50yvdAlPF9S/4PXbyfzJS6ZGhbddGkRegdwImmfSVqCkEziYzrIGZ/TlrzBND4FysfkDg==" + "version": "1.4.341", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.341.tgz", + "integrity": "sha512-R4A8VfUBQY9WmAhuqY5tjHRf5fH2AAf6vqitBOE0y6u2PgHgqHSrhZmu78dIX3fVZtjqlwJNX1i2zwC3VpHtQQ==" }, "node_modules/emoji-regex": { "version": "10.2.1", @@ -3827,12 +3827,15 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz", - "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz", + "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" } }, "node_modules/eslint/node_modules/ajv": { @@ -7161,7 +7164,6 @@ } }, "packages/base-cli": { - "name": "@csstools/base-cli", "version": "0.1.0", "license": "CC0-1.0", "engines": { @@ -7176,7 +7178,6 @@ } }, "packages/cascade-layer-name-parser": { - "name": "@csstools/cascade-layer-name-parser", "version": "1.0.1", "license": "MIT", "engines": { @@ -7192,7 +7193,6 @@ } }, "packages/color-helpers": { - "name": "@csstools/color-helpers", "version": "2.0.0", "license": "CC0-1.0", "engines": { @@ -7204,7 +7204,6 @@ } }, "packages/css-calc": { - "name": "@csstools/css-calc", "version": "1.0.1", "license": "MIT", "engines": { @@ -7220,7 +7219,6 @@ } }, "packages/css-color-parser": { - "name": "@csstools/css-color-parser", "version": "1.0.0", "license": "MIT", "dependencies": { @@ -7240,7 +7238,6 @@ } }, "packages/css-parser-algorithms": { - "name": "@csstools/css-parser-algorithms", "version": "2.1.0", "license": "MIT", "engines": { @@ -7255,7 +7252,6 @@ } }, "packages/css-tokenizer": { - "name": "@csstools/css-tokenizer", "version": "2.1.0", "license": "MIT", "devDependencies": { @@ -7271,7 +7267,6 @@ } }, "packages/generate-test-cases": { - "name": "@csstools/generate-test-cases", "version": "1.0.0", "license": "CC0-1.0", "devDependencies": { @@ -7286,7 +7281,6 @@ } }, "packages/media-query-list-parser": { - "name": "@csstools/media-query-list-parser", "version": "2.0.2", "license": "MIT", "engines": { @@ -7302,7 +7296,6 @@ } }, "packages/postcss-tape": { - "name": "@csstools/postcss-tape", "version": "2.0.0", "license": "CC0-1.0", "dependencies": { @@ -7319,7 +7312,6 @@ } }, "packages/selector-specificity": { - "name": "@csstools/selector-specificity", "version": "2.2.0", "license": "CC0-1.0", "devDependencies": { @@ -7344,6 +7336,7 @@ "@csstools/postcss-color-function": "^2.1.0", "@csstools/postcss-color-mix-function": "^1.0.0", "@csstools/postcss-font-format-keywords": "^2.0.2", + "@csstools/postcss-gradients-interpolation-method": "^3.0.0", "@csstools/postcss-hwb-function": "^2.2.0", "@csstools/postcss-ic-unit": "^2.0.2", "@csstools/postcss-is-pseudo-class": "^3.1.1", @@ -7365,7 +7358,7 @@ "css-blank-pseudo": "^5.0.2", "css-has-pseudo": "^5.0.2", "css-prefers-color-scheme": "^8.0.2", - "cssdb": "^7.5.1", + "cssdb": "^7.5.2", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^5.0.2", @@ -7494,7 +7487,6 @@ } }, "plugins/postcss-base-plugin": { - "name": "@csstools/postcss-base-plugin", "version": "0.0.0", "license": "CC0-1.0", "devDependencies": { @@ -7512,7 +7504,6 @@ } }, "plugins/postcss-cascade-layers": { - "name": "@csstools/postcss-cascade-layers", "version": "3.0.1", "license": "CC0-1.0", "dependencies": { @@ -7536,7 +7527,6 @@ } }, "plugins/postcss-color-function": { - "name": "@csstools/postcss-color-function", "version": "2.2.0", "license": "CC0-1.0", "dependencies": { @@ -7601,7 +7591,6 @@ } }, "plugins/postcss-color-mix-function": { - "name": "@csstools/postcss-color-mix-function", "version": "1.0.0", "license": "CC0-1.0", "dependencies": { @@ -7645,7 +7634,6 @@ } }, "plugins/postcss-conditional-values": { - "name": "@csstools/postcss-conditional-values", "version": "2.0.1", "license": "CC0-1.0", "devDependencies": { @@ -7734,7 +7722,6 @@ } }, "plugins/postcss-design-tokens": { - "name": "@csstools/postcss-design-tokens", "version": "2.0.3", "license": "CC0-1.0", "dependencies": { @@ -7820,7 +7807,6 @@ } }, "plugins/postcss-extract": { - "name": "@csstools/postcss-extract", "version": "2.0.1", "license": "CC0-1.0", "dependencies": { @@ -7882,7 +7868,6 @@ } }, "plugins/postcss-font-format-keywords": { - "name": "@csstools/postcss-font-format-keywords", "version": "2.0.2", "license": "CC0-1.0", "dependencies": { @@ -7920,7 +7905,6 @@ } }, "plugins/postcss-global-data": { - "name": "@csstools/postcss-global-data", "version": "1.0.3", "license": "CC0-1.0", "devDependencies": { @@ -7939,7 +7923,6 @@ } }, "plugins/postcss-gradients-interpolation-method": { - "name": "@csstools/postcss-gradients-interpolation-method", "version": "3.0.0", "license": "CC0-1.0", "dependencies": { @@ -7963,7 +7946,6 @@ } }, "plugins/postcss-hwb-function": { - "name": "@csstools/postcss-hwb-function", "version": "2.2.0", "license": "CC0-1.0", "dependencies": { @@ -7986,7 +7968,6 @@ } }, "plugins/postcss-ic-unit": { - "name": "@csstools/postcss-ic-unit", "version": "2.0.2", "license": "CC0-1.0", "dependencies": { @@ -8028,7 +8009,6 @@ } }, "plugins/postcss-is-pseudo-class": { - "name": "@csstools/postcss-is-pseudo-class", "version": "3.1.1", "license": "CC0-1.0", "dependencies": { @@ -8094,7 +8074,6 @@ } }, "plugins/postcss-logical-float-and-clear": { - "name": "@csstools/postcss-logical-float-and-clear", "version": "1.0.1", "license": "CC0-1.0", "devDependencies": { @@ -8112,7 +8091,6 @@ } }, "plugins/postcss-logical-resize": { - "name": "@csstools/postcss-logical-resize", "version": "1.0.1", "license": "CC0-1.0", "dependencies": { @@ -8133,7 +8111,6 @@ } }, "plugins/postcss-logical-viewport-units": { - "name": "@csstools/postcss-logical-viewport-units", "version": "1.0.2", "license": "CC0-1.0", "dependencies": { @@ -8154,7 +8131,6 @@ } }, "plugins/postcss-media-queries-aspect-ratio-number-values": { - "name": "@csstools/postcss-media-queries-aspect-ratio-number-values", "version": "1.0.1", "license": "CC0-1.0", "dependencies": { @@ -8177,7 +8153,6 @@ } }, "plugins/postcss-nested-calc": { - "name": "@csstools/postcss-nested-calc", "version": "2.0.2", "license": "CC0-1.0", "dependencies": { @@ -8220,7 +8195,6 @@ } }, "plugins/postcss-normalize-display-values": { - "name": "@csstools/postcss-normalize-display-values", "version": "2.0.1", "license": "CC0-1.0", "dependencies": { @@ -8241,7 +8215,6 @@ } }, "plugins/postcss-oklab-function": { - "name": "@csstools/postcss-oklab-function", "version": "2.2.0", "license": "CC0-1.0", "dependencies": { @@ -8305,7 +8278,6 @@ } }, "plugins/postcss-progressive-custom-properties": { - "name": "@csstools/postcss-progressive-custom-properties", "version": "2.1.1", "license": "CC0-1.0", "dependencies": { @@ -8346,7 +8318,6 @@ } }, "plugins/postcss-scope-pseudo-class": { - "name": "@csstools/postcss-scope-pseudo-class", "version": "2.0.2", "license": "CC0-1.0", "dependencies": { @@ -8387,7 +8358,6 @@ } }, "plugins/postcss-stepped-value-functions": { - "name": "@csstools/postcss-stepped-value-functions", "version": "2.1.0", "license": "CC0-1.0", "dependencies": { @@ -8410,7 +8380,6 @@ } }, "plugins/postcss-text-decoration-shorthand": { - "name": "@csstools/postcss-text-decoration-shorthand", "version": "2.2.2", "license": "CC0-1.0", "dependencies": { @@ -8445,7 +8414,6 @@ } }, "plugins/postcss-todo-or-die": { - "name": "@csstools/postcss-todo-or-die", "version": "1.0.0", "license": "CC0-1.0", "dependencies": { @@ -8468,7 +8436,6 @@ } }, "plugins/postcss-trigonometric-functions": { - "name": "@csstools/postcss-trigonometric-functions", "version": "2.1.0", "license": "CC0-1.0", "dependencies": { @@ -8491,7 +8458,6 @@ } }, "plugins/postcss-unset-value": { - "name": "@csstools/postcss-unset-value", "version": "2.0.1", "license": "CC0-1.0", "devDependencies": { diff --git a/packages/css-color-parser/CHANGELOG.md b/packages/css-color-parser/CHANGELOG.md index d886dad0c..83e15e2de 100644 --- a/packages/css-color-parser/CHANGELOG.md +++ b/packages/css-color-parser/CHANGELOG.md @@ -1,6 +1,6 @@ # Changes to CSS Color Parser -### 1.1.0 (minor) +### Unreleased (minor) - Add a flag to `serializeP3` and `serializeRGB` to skip gamut mapping. diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs index 9c9156af0..254f49bf6 100644 --- a/plugin-packs/postcss-preset-env/.tape.mjs +++ b/plugin-packs/postcss-preset-env/.tape.mjs @@ -167,6 +167,14 @@ postcssTape(plugin)({ browsers: '> 0%' }, }, + 'basic:preserve:false': { + message: 'supports { preserve: false, stage: 0, browsers: "> 0%" } usage', + options: { + preserve: false, + stage: 0, + browsers: '> 0%' + }, + }, 'basic:hebrew': { message: 'supports { logical: { inlineDirection: "right-to-left" }, stage: 0, browsers: "> 0%" } usage', options: { diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 8d6742372..15216246d 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -1,5 +1,10 @@ # Changes to PostCSS Preset Env +### Unreleased (minor) + +- Added `@csstools/postcss-gradients-interpolation-method` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) for usage details. +- Updated `cssdb` to `7.5.2` (patch) + ### 8.1.0 (March 25, 2023) - Added `@csstools/postcss-color-mix-function` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function#readme) for usage details. diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md index bffd6291c..3f4d212c4 100644 --- a/plugin-packs/postcss-preset-env/FEATURES.md +++ b/plugin-packs/postcss-preset-env/FEATURES.md @@ -13,6 +13,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | `clamp` | `clamp` Function | [example](https://preset-env.cssdb.org/features/#clamp) | [docs](https://github.com/polemius/postcss-clamp#readme) | | `color-function` | `color()` Function | [example](https://preset-env.cssdb.org/features/#color-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function#readme) | | `color-functional-notation` | Color Functional Notation | [example](https://preset-env.cssdb.org/features/#color-functional-notation) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation#readme) | +| `color-mix` | `color-mix()` Function | [example](https://preset-env.cssdb.org/features/#color-mix) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function#readme) | | `custom-media-queries` | Custom Media Queries | [example](https://preset-env.cssdb.org/features/#custom-media-queries) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media#readme) | | `custom-properties` | Custom Properties | [example](https://preset-env.cssdb.org/features/#custom-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties#readme) | | `custom-selectors` | Custom Selectors | [example](https://preset-env.cssdb.org/features/#custom-selectors) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors#readme) | @@ -25,6 +26,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) | | `font-variant-property` | `font-variant` Property | [example](https://preset-env.cssdb.org/features/#font-variant-property) | [docs](https://github.com/postcss/postcss-font-variant#readme) | | `gap-properties` | Gap Properties | [example](https://preset-env.cssdb.org/features/#gap-properties) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties#readme) | +| `gradients-interpolation-method` | Gradients Interpolation Method | [example](https://preset-env.cssdb.org/features/#gradients-interpolation-method) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme) | | `has-pseudo-class` | `:has()` Relational Pseudo-Class | [example](https://preset-env.cssdb.org/features/#has-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme) | | `hexadecimal-alpha-notation` | Hexadecimal Alpha Notation | [example](https://preset-env.cssdb.org/features/#hexadecimal-alpha-notation) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha#readme) | | `hwb-function` | `hwb()` Function | [example](https://preset-env.cssdb.org/features/#hwb-function) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme) | diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs index ddadf620f..bda613fb7 100644 --- a/plugin-packs/postcss-preset-env/dist/index.cjs +++ b/plugin-packs/postcss-preset-env/dist/index.cjs @@ -1 +1 @@ -"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("postcss-initial"),r=require("postcss-pseudo-class-any-link"),a=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),k=require("@csstools/postcss-logical-float-and-clear"),y=require("postcss-focus-visible"),w=require("postcss-focus-within"),q=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),S=require("postcss-gap-properties"),x=require("css-has-pseudo"),O=require("postcss-color-hex-alpha"),$=require("@csstools/postcss-hwb-function"),P=require("@csstools/postcss-ic-unit"),C=require("postcss-image-set-function"),I=require("@csstools/postcss-is-pseudo-class"),E=require("postcss-lab-function"),B=require("postcss-logical"),U=require("@csstools/postcss-logical-resize"),_=require("@csstools/postcss-logical-viewport-units"),L=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),A=require("postcss-media-minmax"),R=require("@csstools/postcss-nested-calc"),j=require("postcss-nesting"),M=require("postcss-selector-not"),D=require("@csstools/postcss-oklab-function"),V=require("postcss-opacity-percentage"),W=require("postcss-overflow-shorthand"),z=require("postcss-replace-overflow-wrap"),T=require("postcss-place"),H=require("css-prefers-color-scheme"),G=require("postcss-color-rebeccapurple"),K=require("@csstools/postcss-scope-pseudo-class"),Z=require("@csstools/postcss-stepped-value-functions"),Q=require("@csstools/postcss-text-decoration-shorthand"),J=require("@csstools/postcss-trigonometric-functions"),X=require("@csstools/postcss-unset-value");const Y={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},ss=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==Y[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${Y[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const es=2,os=5;function stageFromOptions(s,e){let o=es;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=os;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,os)}return o===os?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const ts=Symbol("insertBefore"),is=Symbol("insertAfter"),rs=Symbol("insertOrder"),as=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?ts:is,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let r=e[o];Array.isArray(r)||(r=[r]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const gs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return gs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,r){const a=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),a))return r.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(a.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return r.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[ts]||s[is]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[as],id:o,stage:os+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:ds.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,r,a){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,r,a),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const r=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const u=stageFromOptions(e,i),m=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[ts]&&!s[is])||(l<=s.vendors_implementations||(r[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=u,o=a||!ss.includes(s.id),t=!1===r[s.id],c=r[s.id]?r[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,p,r,t,o,e,i))),d=t(p,{ignoreUnknownVersions:!0});return m.filter((s=>{if(s.id in r)return r[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var fs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return fs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=fs.map((s=>s.id)),i=fs.map((s=>s.packageName)),r=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(a.distance,c.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):a.distance{const i=new Logger,r=Object(t),a=Object.keys(Object(r.features)),c=r.browsers,n=initializeSharedOptions(r),p=listFeatures(e,r,n,i),l=p.map((s=>s.plugin));!1!==r.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},r.autoprefixer))),l.push(o()),logFeaturesList(p,r,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(a,s,e),r.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator; +"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("postcss-initial"),r=require("postcss-pseudo-class-any-link"),a=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("@csstools/postcss-color-mix-function"),g=require("postcss-custom-media"),f=require("postcss-custom-properties"),b=require("postcss-custom-selectors"),h=require("postcss-dir-pseudo-class"),N=require("@csstools/postcss-normalize-display-values"),v=require("postcss-double-position-gradients"),k=require("@csstools/postcss-logical-float-and-clear"),y=require("postcss-focus-visible"),w=require("postcss-focus-within"),q=require("@csstools/postcss-font-format-keywords"),F=require("postcss-font-variant"),S=require("postcss-gap-properties"),x=require("@csstools/postcss-gradients-interpolation-method"),O=require("css-has-pseudo"),$=require("postcss-color-hex-alpha"),P=require("@csstools/postcss-hwb-function"),C=require("@csstools/postcss-ic-unit"),I=require("postcss-image-set-function"),E=require("@csstools/postcss-is-pseudo-class"),B=require("postcss-lab-function"),U=require("postcss-logical"),_=require("@csstools/postcss-logical-resize"),L=require("@csstools/postcss-logical-viewport-units"),A=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),R=require("postcss-media-minmax"),j=require("@csstools/postcss-nested-calc"),M=require("postcss-nesting"),D=require("postcss-selector-not"),V=require("@csstools/postcss-oklab-function"),W=require("postcss-opacity-percentage"),z=require("postcss-overflow-shorthand"),T=require("postcss-replace-overflow-wrap"),H=require("postcss-place"),G=require("css-prefers-color-scheme"),K=require("postcss-color-rebeccapurple"),Z=require("@csstools/postcss-scope-pseudo-class"),Q=require("@csstools/postcss-stepped-value-functions"),J=require("@csstools/postcss-text-decoration-shorthand"),X=require("@csstools/postcss-trigonometric-functions"),Y=require("@csstools/postcss-unset-value");const ss={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},es=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ss[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${ss[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const os=2,ts=5;function stageFromOptions(s,e){let o=os;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=ts;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,ts)}return o===ts?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const is=Symbol("insertBefore"),rs=Symbol("insertAfter"),as=Symbol("insertOrder"),cs=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?is:rs,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let r=e[o];Array.isArray(r)||(r=[r]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const fs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return fs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,r){const a=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),a))return r.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(a.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return r.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[is]||s[rs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[cs],id:o,stage:ts+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:gs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,r,a){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,r,a),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const r=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const u=stageFromOptions(e,i),m=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[is]&&!s[rs])||(l<=s.vendors_implementations||(r[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=u,o=a||!es.includes(s.id),t=!1===r[s.id],c=r[s.id]?r[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,p,r,t,o,e,i))),d=t(p,{ignoreUnknownVersions:!0});return m.filter((s=>{if(s.id in r)return r[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var bs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return bs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=bs.map((s=>s.id)),i=bs.map((s=>s.packageName)),r=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(a.distance,c.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):a.distance{const i=new Logger,r=Object(t),a=Object.keys(Object(r.features)),c=r.browsers,n=initializeSharedOptions(r),p=listFeatures(e,r,n,i),l=p.map((s=>s.plugin));!1!==r.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},r.autoprefixer))),l.push(o()),logFeaturesList(p,r,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(a,s,e),r.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator; diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs index efa01fff7..b86352672 100644 --- a/plugin-packs/postcss-preset-env/dist/index.mjs +++ b/plugin-packs/postcss-preset-env/dist/index.mjs @@ -1 +1 @@ -import s from"autoprefixer";import e from"cssdb";import o from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import p from"postcss-page-break";import c from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import v from"postcss-double-position-gradients";import k from"@csstools/postcss-logical-float-and-clear";import y from"postcss-focus-visible";import w from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import S from"postcss-font-variant";import x from"postcss-gap-properties";import O from"css-has-pseudo";import $ from"postcss-color-hex-alpha";import P from"@csstools/postcss-hwb-function";import C from"@csstools/postcss-ic-unit";import I from"postcss-image-set-function";import E from"@csstools/postcss-is-pseudo-class";import B from"postcss-lab-function";import U from"postcss-logical";import _ from"@csstools/postcss-logical-resize";import L from"@csstools/postcss-logical-viewport-units";import q from"@csstools/postcss-media-queries-aspect-ratio-number-values";import A from"postcss-media-minmax";import R from"@csstools/postcss-nested-calc";import j from"postcss-nesting";import M from"postcss-selector-not";import D from"@csstools/postcss-oklab-function";import V from"postcss-opacity-percentage";import W from"postcss-overflow-shorthand";import z from"postcss-replace-overflow-wrap";import T from"postcss-place";import H from"css-prefers-color-scheme";import G from"postcss-color-rebeccapurple";import K from"@csstools/postcss-scope-pseudo-class";import Z from"@csstools/postcss-stepped-value-functions";import Q from"@csstools/postcss-text-decoration-shorthand";import J from"@csstools/postcss-trigonometric-functions";import X from"@csstools/postcss-unset-value";const Y={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},ss=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==Y[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${Y[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const es=2,os=5;function stageFromOptions(s,e){let o=es;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=os;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,os)}return o===os?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const ts=Symbol("insertBefore"),is=Symbol("insertAfter"),as=Symbol("insertOrder"),rs=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?ts:is,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const fs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return fs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[ts]||s[is]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[rs],id:o,stage:os+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:ds.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let p,c;return p=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,o[t.id]):Object.assign({},p,o[t.id]),p.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in p&&(p.replace=p.preserve),"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,p=Object(e.insertBefore),c=Object(e.insertAfter),n=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const m=stageFromOptions(e,i),u=prepareFeaturesList(s,p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[ts]&&!s[is])||(l<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=m,o=r||!ss.includes(s.id),t=!1===a[s.id],p=a[s.id]?a[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((t=>formatStagedFeature(s,n,a,t,o,e,i))),d=t(n,{ignoreUnknownVersions:!0});return u.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var gs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return gs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=gs.map((s=>s.id)),i=gs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),p=mostSimilar(s,i);Math.min(r.distance,p.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),p=a.browsers,c=initializeSharedOptions(a),n=listFeatures(e,a,c,i),l=n.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:p},a.autoprefixer))),l.push(o()),logFeaturesList(n,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default}; +import s from"autoprefixer";import e from"cssdb";import o from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import p from"postcss-page-break";import c from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"@csstools/postcss-color-mix-function";import f from"postcss-custom-media";import g from"postcss-custom-properties";import b from"postcss-custom-selectors";import h from"postcss-dir-pseudo-class";import N from"@csstools/postcss-normalize-display-values";import k from"postcss-double-position-gradients";import v from"@csstools/postcss-logical-float-and-clear";import y from"postcss-focus-visible";import w from"postcss-focus-within";import F from"@csstools/postcss-font-format-keywords";import S from"postcss-font-variant";import x from"postcss-gap-properties";import O from"@csstools/postcss-gradients-interpolation-method";import $ from"css-has-pseudo";import P from"postcss-color-hex-alpha";import C from"@csstools/postcss-hwb-function";import I from"@csstools/postcss-ic-unit";import E from"postcss-image-set-function";import B from"@csstools/postcss-is-pseudo-class";import U from"postcss-lab-function";import _ from"postcss-logical";import L from"@csstools/postcss-logical-resize";import q from"@csstools/postcss-logical-viewport-units";import A from"@csstools/postcss-media-queries-aspect-ratio-number-values";import R from"postcss-media-minmax";import j from"@csstools/postcss-nested-calc";import M from"postcss-nesting";import D from"postcss-selector-not";import V from"@csstools/postcss-oklab-function";import W from"postcss-opacity-percentage";import z from"postcss-overflow-shorthand";import T from"postcss-replace-overflow-wrap";import H from"postcss-place";import G from"css-prefers-color-scheme";import K from"postcss-color-rebeccapurple";import Z from"@csstools/postcss-scope-pseudo-class";import Q from"@csstools/postcss-stepped-value-functions";import J from"@csstools/postcss-text-decoration-shorthand";import X from"@csstools/postcss-trigonometric-functions";import Y from"@csstools/postcss-unset-value";const ss={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},es=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,e,o){if(e.debug){o.log("Enabling the following feature(s):");const t=[],i=[];!1!==e.autoprefixer&&i.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?i.push(` ${s.id} (injected via options)`):i.push(` ${s.id}`),void 0!==ss[s.id]&&t.push(s.id)})),i.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),i.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${ss[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return e.preserve=s.preserve,e}return!1}function clamp(s,e,o){return Math.max(s,Math.min(e,o))}const os=2,ts=5;function stageFromOptions(s,e){let o=os;if(void 0===s.stage)return e.log(`Using features from Stage ${o} (default)`),o;if(!1===s.stage)o=ts;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,ts)}return o===ts?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}`),o}const is=Symbol("insertBefore"),as=Symbol("insertAfter"),rs=Symbol("insertOrder"),ps=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?is:as,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const gs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return gs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[is]||s[as]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ps],id:o,stage:ts+1}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:fs.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let p,c;return p=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,o[t.id]):Object.assign({},p,o[t.id]),p.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in p&&(p.replace=p.preserve),"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,p=Object(e.insertBefore),c=Object(e.insertAfter),n=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const m=stageFromOptions(e,i),u=prepareFeaturesList(s,p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[is]&&!s[as])||(l<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=m,o=r||!es.includes(s.id),t=!1===a[s.id],p=a[s.id]?a[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((t=>formatStagedFeature(s,n,a,t,o,e,i))),d=t(n,{ignoreUnknownVersions:!0});return u.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var bs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-gradients-interpolation-method",id:"gradients-interpolation-method",importName:"postcssGradientsInterpolationMethod"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return bs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=bs.map((s=>s.id)),i=bs.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),p=mostSimilar(s,i);Math.min(r.distance,p.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),p=a.browsers,c=initializeSharedOptions(a),n=listFeatures(e,a,c,i),l=n.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:p},a.autoprefixer))),l.push(o()),logFeaturesList(n,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default}; diff --git a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts index 234ad7bf6..0d833d3e7 100644 --- a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts +++ b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts @@ -20,6 +20,7 @@ import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within'; import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords'; import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options'; import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties'; +import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method'; import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo'; import type { pluginOptions as postcssColorHexAlpha } from 'postcss-color-hex-alpha'; import type { pluginOptions as postcssHWBFunction } from '@csstools/postcss-hwb-function'; @@ -93,6 +94,8 @@ export type pluginsOptions = { 'font-variant-property'?: postcssFontVariant | boolean; /** plugin options for "postcss-gap-properties" */ 'gap-properties'?: postcssGapProperties | boolean; + /** plugin options for "@csstools/postcss-gradients-interpolation-method" */ + 'gradients-interpolation-method'?: postcssGradientsInterpolationMethod | boolean; /** plugin options for "css-has-pseudo" */ 'has-pseudo-class'?: postcssHasPseudo | boolean; /** plugin options for "postcss-color-hex-alpha" */ diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index 6cd8b593c..0dbb64311 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -47,6 +47,7 @@ "@csstools/postcss-color-function": "^2.1.0", "@csstools/postcss-color-mix-function": "^1.0.0", "@csstools/postcss-font-format-keywords": "^2.0.2", + "@csstools/postcss-gradients-interpolation-method": "^3.0.0", "@csstools/postcss-hwb-function": "^2.2.0", "@csstools/postcss-ic-unit": "^2.0.2", "@csstools/postcss-is-pseudo-class": "^3.1.1", @@ -68,7 +69,7 @@ "css-blank-pseudo": "^5.0.2", "css-has-pseudo": "^5.0.2", "css-prefers-color-scheme": "^8.0.2", - "cssdb": "^7.5.1", + "cssdb": "^7.5.2", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^5.0.2", diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index 27ee8cac8..3290ec24f 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -99,6 +99,11 @@ "id": "gap-properties", "importName": "postcssGapProperties" }, + { + "packageName": "@csstools/postcss-gradients-interpolation-method", + "id": "gradients-interpolation-method", + "importName": "postcssGradientsInterpolationMethod" + }, { "packageName": "@csstools/postcss-hwb-function", "id": "hwb-function", diff --git a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs index f47f0ed86..5ed1b980a 100644 --- a/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs @@ -17,6 +17,7 @@ export default [ 'logical-properties-and-values', // run logical-properties-and-values before dir-pseudo-class 'dir-pseudo-class', 'all-property', // run all-property before other property polyfills + 'gradients-interpolation-method', // run before all color functions 'color-mix', // run before any other color functions 'color-functional-notation', 'double-position-gradients', diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs index 030e2e1f6..3cd584287 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs @@ -20,6 +20,7 @@ import postcssFocusWithin from 'postcss-focus-within'; import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords'; import postcssFontVariant from 'postcss-font-variant'; import postcssGapProperties from 'postcss-gap-properties'; +import postcssGradientsInterpolationMethod from '@csstools/postcss-gradients-interpolation-method'; import postcssHasPseudo from 'css-has-pseudo'; import postcssColorHexAlpha from 'postcss-color-hex-alpha'; import postcssHWBFunction from '@csstools/postcss-hwb-function'; @@ -74,6 +75,7 @@ export const pluginsById = new Map( ['font-format-keywords', postcssFontFormatKeywords], ['font-variant-property', postcssFontVariant], ['gap-properties', postcssGapProperties], + ['gradients-interpolation-method', postcssGradientsInterpolationMethod], ['has-pseudo-class', postcssHasPseudo], ['hexadecimal-alpha-notation', postcssColorHexAlpha], ['hwb-function', postcssHWBFunction], diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs index 7beb37e07..e90b660af 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -99,6 +99,11 @@ export default [ 'id': 'gap-properties', 'importName': 'postcssGapProperties', }, + { + 'packageName': '@csstools/postcss-gradients-interpolation-method', + 'id': 'gradients-interpolation-method', + 'importName': 'postcssGradientsInterpolationMethod', + }, { 'packageName': '@csstools/postcss-hwb-function', 'id': 'hwb-function', diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts index 0388290d9..c5a0d21a1 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts @@ -20,6 +20,7 @@ import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within'; import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords'; import type { pluginOptions as postcssFontVariant } from '../types/postcss-font-variant/plugin-options'; import type { pluginOptions as postcssGapProperties } from 'postcss-gap-properties'; +import type { pluginOptions as postcssGradientsInterpolationMethod } from '@csstools/postcss-gradients-interpolation-method'; import type { pluginOptions as postcssHasPseudo } from 'css-has-pseudo'; import type { pluginOptions as postcssColorHexAlpha } from 'postcss-color-hex-alpha'; import type { pluginOptions as postcssHWBFunction } from '@csstools/postcss-hwb-function'; @@ -94,6 +95,8 @@ export type pluginsOptions = { 'font-variant-property'?: postcssFontVariant | boolean /** plugin options for "postcss-gap-properties" */ 'gap-properties'?: postcssGapProperties | boolean + /** plugin options for "@csstools/postcss-gradients-interpolation-method" */ + 'gradients-interpolation-method'?: postcssGradientsInterpolationMethod | boolean /** plugin options for "css-has-pseudo" */ 'has-pseudo-class'?: postcssHasPseudo | boolean /** plugin options for "postcss-color-hex-alpha" */ diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 478edc7df..be47d0757 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -576,3 +576,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index 478edc7df..be47d0757 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -576,3 +576,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index 075da4d5a..c86d690be 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -486,3 +486,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index 62e98cd51..a8a158535 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -482,3 +482,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index edbca4236..787cf0048 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -476,3 +476,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index edbca4236..787cf0048 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -476,3 +476,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 03d37c37c..86ba6c62a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -447,3 +447,7 @@ color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%); color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); } + +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 413bbbf2e..43fd4a770 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -596,3 +596,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index caa645b82..cb74e6a4c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -487,3 +487,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index 5d084684b..eb2fc66e5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -482,3 +482,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index 2fe09dfe5..e0a0b5595 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -590,3 +590,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index 1a8ab3b2d..cf614166c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -612,3 +612,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index fad96da87..8d49e524b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -592,3 +592,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index 85950ef42..5144ac7f2 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -453,3 +453,7 @@ color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%); color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); } + +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index 230aa911a..b86cb5bff 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -571,3 +571,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css new file mode 100644 index 000000000..20932687c --- /dev/null +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -0,0 +1,760 @@ +:root { + --order: 1; +} + +.test-custom-property-fallbacks { + --firebrick: rgb(179, 35, 35); +} + +.test-custom-properties { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -moz-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} + +.test-image-set-function { + background-image: url(img/test.png); + -webkit-box-ordinal-group: 3; + -webkit-order: 2; + -moz-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; +} + +@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 192dpi) { + +.test-image-set-function { + background-image: url(img/test-2x.png); +} +} + +.test-logical-properties-and-values { + margin-left: 1px; + margin-right: 2px; + -webkit-box-ordinal-group: 4; + -webkit-order: 3; + -moz-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: -webkit-calc(10vw + 5px); + width: -moz-calc(10vw + 5px); + width: calc(10vw + 5px); +} + +.test-nesting-rules { + -webkit-box-ordinal-group: 5; + -webkit-order: 4; + -moz-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + + -webkit-box-ordinal-group: 7; + + -webkit-order: 6; + + -moz-box-ordinal-group: 7; + + -ms-flex-order: 6; + + order: 6; +} + +.test-nesting-rules p { + -webkit-box-ordinal-group: 6; + -webkit-order: 5; + -moz-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + +.test-nesting-rules, +#test-is-pseudo { + -webkit-box-ordinal-group: 8; + -webkit-order: 7; + -moz-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + + -webkit-box-ordinal-group: 10; + + -webkit-order: 9; + + -moz-box-ordinal-group: 10; + + -ms-flex-order: 9; + + order: 9; +} + +.test-nesting-rules + p, #test-is-pseudo + p { + -webkit-box-ordinal-group: 9; + -webkit-order: 8; + -moz-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + +@media (max-width: 30em) { + .test-custom-media-queries { + -webkit-box-ordinal-group: 11; + -webkit-order: 10; + -moz-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } +} + +@media (min-width: 480px) and (max-width: 767px) { + .test-media-query-ranges { + -webkit-box-ordinal-group: 12; + -webkit-order: 11; + -moz-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } +} + +@media (prefers-color-scheme: dark) { + body { + background-color: black; + color: white; + } +} + +h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.does-not-exist), h3.test-custom-selectors:not(.does-not-exist), h4.test-custom-selectors:not(.does-not-exist), h5.test-custom-selectors:not(.does-not-exist), h6.test-custom-selectors:not(.does-not-exist), .test-custom-selectors.heading-7 { + -webkit-box-ordinal-group:13; + -webkit-order:12; + -moz-box-ordinal-group:13; + -ms-flex-order:12; + order:12; +} + +.test-case-insensitive-attributes[frame=hsides],.test-case-insensitive-attributes[frame=Hsides],.test-case-insensitive-attributes[frame=hSides],.test-case-insensitive-attributes[frame=HSides],.test-case-insensitive-attributes[frame=hsIdes],.test-case-insensitive-attributes[frame=HsIdes],.test-case-insensitive-attributes[frame=hSIdes],.test-case-insensitive-attributes[frame=HSIdes],.test-case-insensitive-attributes[frame=hsiDes],.test-case-insensitive-attributes[frame=HsiDes],.test-case-insensitive-attributes[frame=hSiDes],.test-case-insensitive-attributes[frame=HSiDes],.test-case-insensitive-attributes[frame=hsIDes],.test-case-insensitive-attributes[frame=HsIDes],.test-case-insensitive-attributes[frame=hSIDes],.test-case-insensitive-attributes[frame=HSIDes],.test-case-insensitive-attributes[frame=hsidEs],.test-case-insensitive-attributes[frame=HsidEs],.test-case-insensitive-attributes[frame=hSidEs],.test-case-insensitive-attributes[frame=HSidEs],.test-case-insensitive-attributes[frame=hsIdEs],.test-case-insensitive-attributes[frame=HsIdEs],.test-case-insensitive-attributes[frame=hSIdEs],.test-case-insensitive-attributes[frame=HSIdEs],.test-case-insensitive-attributes[frame=hsiDEs],.test-case-insensitive-attributes[frame=HsiDEs],.test-case-insensitive-attributes[frame=hSiDEs],.test-case-insensitive-attributes[frame=HSiDEs],.test-case-insensitive-attributes[frame=hsIDEs],.test-case-insensitive-attributes[frame=HsIDEs],.test-case-insensitive-attributes[frame=hSIDEs],.test-case-insensitive-attributes[frame=HSIDEs],.test-case-insensitive-attributes[frame=hsideS],.test-case-insensitive-attributes[frame=HsideS],.test-case-insensitive-attributes[frame=hSideS],.test-case-insensitive-attributes[frame=HSideS],.test-case-insensitive-attributes[frame=hsIdeS],.test-case-insensitive-attributes[frame=HsIdeS],.test-case-insensitive-attributes[frame=hSIdeS],.test-case-insensitive-attributes[frame=HSIdeS],.test-case-insensitive-attributes[frame=hsiDeS],.test-case-insensitive-attributes[frame=HsiDeS],.test-case-insensitive-attributes[frame=hSiDeS],.test-case-insensitive-attributes[frame=HSiDeS],.test-case-insensitive-attributes[frame=hsIDeS],.test-case-insensitive-attributes[frame=HsIDeS],.test-case-insensitive-attributes[frame=hSIDeS],.test-case-insensitive-attributes[frame=HSIDeS],.test-case-insensitive-attributes[frame=hsidES],.test-case-insensitive-attributes[frame=HsidES],.test-case-insensitive-attributes[frame=hSidES],.test-case-insensitive-attributes[frame=HSidES],.test-case-insensitive-attributes[frame=hsIdES],.test-case-insensitive-attributes[frame=HsIdES],.test-case-insensitive-attributes[frame=hSIdES],.test-case-insensitive-attributes[frame=HSIdES],.test-case-insensitive-attributes[frame=hsiDES],.test-case-insensitive-attributes[frame=HsiDES],.test-case-insensitive-attributes[frame=hSiDES],.test-case-insensitive-attributes[frame=HSiDES],.test-case-insensitive-attributes[frame=hsIDES],.test-case-insensitive-attributes[frame=HsIDES],.test-case-insensitive-attributes[frame=hSIDES],.test-case-insensitive-attributes[frame=HSIDES] { + -webkit-box-ordinal-group: 14; + -webkit-order: 13; + -moz-box-ordinal-group: 14; + -ms-flex-order: 13; + order: 13; +} + +.test-rebeccapurple-color { + color: #639; + -webkit-box-ordinal-group: 15; + -webkit-order: 14; + -moz-box-ordinal-group: 15; + -ms-flex-order: 14; + order: 14; +} + +.test-hexadecimal-alpha-notation { + background-color: rgba(243,243,243,0.95294); + color: rgba(0,0,0,0.2); + -webkit-box-ordinal-group: 16; + -webkit-order: 15; + -moz-box-ordinal-group: 16; + -ms-flex-order: 15; + order: 15; +} + +.test-color-functional-notation { + color: rgba(178, 34, 34, 0.5); + -webkit-box-ordinal-group: 17; + -webkit-order: 16; + -moz-box-ordinal-group: 17; + -ms-flex-order: 16; + order: 16; +} + +.test-lab-function { + background-color: rgb(179, 35, 35); + color: rgba(179, 34, 35, 0.5); + -webkit-box-ordinal-group: 18; + -webkit-order: 17; + -moz-box-ordinal-group: 18; + -ms-flex-order: 17; + order: 17; +} + +.test-system-ui-font-family { + font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + -webkit-box-ordinal-group: 19; + -webkit-order: 18; + -moz-box-ordinal-group: 19; + -ms-flex-order: 18; + order: 18; +} + +.test-font-variant-property { + -webkit-font-feature-settings: "smcp"; + -moz-font-feature-settings: "smcp"; + font-feature-settings: "smcp"; + font-variant-caps: small-caps; + -webkit-box-ordinal-group: 20; + -webkit-order: 19; + -moz-box-ordinal-group: 20; + -ms-flex-order: 19; + order: 19; +} + +.test-all-property { + -webkit-animation: none 0s ease 0s 1 normal none running; + -moz-animation: none 0s ease 0s 1 normal none running; + -o-animation: none 0s ease 0s 1 normal none running; + animation: none 0s ease 0s 1 normal none running; + -webkit-backface-visibility: visible; + -moz-backface-visibility: visible; + backface-visibility: visible; + background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; + border: medium none currentColor; + border-collapse: separate; + -webkit-border-image: none; + -moz-border-image: none; + -o-border-image: none; + border-image: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + border-spacing: 0; + bottom: auto; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + caption-side: top; + clear: none; + clip: auto; + color: #000; + -webkit-columns: auto; + -moz-columns: auto; + columns: auto; + -webkit-column-count: auto; + -moz-column-count: auto; + column-count: auto; + -webkit-column-fill: balance; + -moz-column-fill: balance; + column-fill: balance; + -webkit-column-gap: normal; + -moz-column-gap: normal; + column-gap: normal; + -webkit-column-rule: medium none currentColor; + -moz-column-rule: medium none currentColor; + column-rule: medium none currentColor; + -webkit-column-span: 1; + -moz-column-span: 1; + column-span: 1; + -webkit-column-width: auto; + -moz-column-width: auto; + column-width: auto; + content: normal; + counter-increment: none; + counter-reset: none; + cursor: auto; + direction: ltr; + display: inline; + empty-cells: show; + float: none; + font-family: serif; + font-size: medium; + font-style: normal; + font-variant: normal; + font-weight: normal; + font-stretch: normal; + line-height: normal; + height: auto; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + left: auto; + letter-spacing: normal; + list-style: disc outside none; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + opacity: 1; + orphans: 2; + outline: medium none invert; + overflow: visible; + overflow-x: visible; + overflow-y: visible; + padding: 0; + page-break-after: auto; + page-break-before: auto; + page-break-inside: auto; + -webkit-perspective: none; + -moz-perspective: none; + perspective: none; + -webkit-perspective-origin: 50% 50%; + -moz-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; + position: static; + right: auto; + -moz-tab-size: 8; + -o-tab-size: 8; + tab-size: 8; + table-layout: auto; + text-align: left; + -moz-text-align-last: auto; + text-align-last: auto; + -webkit-text-decoration: none; + text-decoration: none; + text-indent: 0; + text-shadow: none; + text-transform: none; + top: auto; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; + -webkit-transform-origin: 50% 50% 0; + -moz-transform-origin: 50% 50% 0; + -ms-transform-origin: 50% 50% 0; + -o-transform-origin: 50% 50% 0; + transform-origin: 50% 50% 0; + -webkit-transform-style: flat; + -moz-transform-style: flat; + transform-style: flat; + -webkit-transition: none 0s ease 0s; + -o-transition: none 0s ease 0s; + -moz-transition: none 0s ease 0s; + transition: none 0s ease 0s; + unicode-bidi: normal; + vertical-align: baseline; + visibility: visible; + white-space: normal; + widows: 2; + width: auto; + word-spacing: normal; + z-index: auto; + all: initial; + -webkit-box-ordinal-group: 21; + -webkit-order: 20; + -moz-box-ordinal-group: 21; + -ms-flex-order: 20; + order: 20; +} + +.test-matches-pseudo-class:matches(:first-child, .special) { + -webkit-box-ordinal-group: 22; + -webkit-order: 21; + -moz-box-ordinal-group: 22; + -ms-flex-order: 21; + order: 21; +} + +.test-not-pseudo-class:not(:first-child):not(.special) { + -webkit-box-ordinal-group: 23; + -webkit-order: 22; + -moz-box-ordinal-group: 23; + -ms-flex-order: 22; + order: 22; +} + +.test-any-link-pseudo-class:link, .test-any-link-pseudo-class:visited, area[href].test-any-link-pseudo-class { + -webkit-box-ordinal-group: 24; + -webkit-order: 23; + -moz-box-ordinal-group: 24; + -ms-flex-order: 23; + order: 23; +} + +[dir="rtl"] .test-dir-pseudo-class { + -webkit-box-ordinal-group: 25; + -webkit-order: 24; + -moz-box-ordinal-group: 25; + -ms-flex-order: 24; + order: 24; +} + +.test-overflow-wrap-property { + -webkit-box-ordinal-group: 26; + -webkit-order: 25; + -moz-box-ordinal-group: 26; + -ms-flex-order: 25; + order: 25; + word-wrap: break-word; +} + +.test-focus-visible-pseudo-class:focus-visible { + -webkit-box-ordinal-group: 27; + -webkit-order: 26; + -moz-box-ordinal-group: 27; + -ms-flex-order: 26; + order: 26; +} + +.test-double-position-gradients { + background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); +} + +.test-blank-pseudo-class:blank { + background-color: yellow; +} + +.test-has-pseudo-class:has(.inner-class) { + background-color: yellow; +} + +.a:focus, .a:hover, .b:focus, .b:hover { + -webkit-box-ordinal-group: 28; + -webkit-order: 27; + -moz-box-ordinal-group: 28; + -ms-flex-order: 27; + order: 27; +} + +.a.c > .b + .d { + -webkit-box-ordinal-group: 29; + -webkit-order: 28; + -moz-box-ordinal-group: 29; + -ms-flex-order: 28; + order: 28; +} + +.test-hwb-function { + background-color: rgba(0, 196, 255, 0.5); +} + +.test-opacity-percent { + opacity: 0.42; +} + +.clamp-same-unit { + width: max(10px, min(64px, 80px)); +} + +.complex-clamp { + width: max(-webkit-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); + width: max(-moz-calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); + width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); +} + +.clamp-different-units { + width: max(10%, min(2px, 4rem)); +} + +.mixed-clamp { + grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); + margin: max(1rem, min(2%, 3rem)) 4vh; +} + +.calc-clamp { + margin: 0 40px 0 -webkit-calc(-1 * max(32px, min(16vw, 64px))); + margin: 0 40px 0 -moz-calc(-1 * max(32px, min(16vw, 64px))); + margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); +} + +.multiple-calc-clamp { + margin: -webkit-calc(-1 * max(1px, min(2vw, 3px))) -webkit-calc(-1 * max(4px, min(5vw, 6px))); + margin: -moz-calc(-1 * max(1px, min(2vw, 3px))) -moz-calc(-1 * max(4px, min(5vw, 6px))); + margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); +} + +.nested-clamp { + font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); +} + +@font-face { + font-family: 'A'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(a) format("woff2"); +} + +.block-flow { + display: block; +} + +.block-flow-root { + display: flow-root; +} + +.inline-flow { + display: inline; +} + +.inline-flow-root { + display: inline-block; +} + +.run-in-flow { + display: run-in; +} + +.list-item-block-flow { + display: list-item; +} + +.inline-flow-list-item { + display: inline list-item; +} + +.block-flex { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; +} + +.inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -moz-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.block-grid { + display: grid; +} + +.inline-grid { + display: inline-grid; +} + +.inline-ruby { + display: ruby; +} + +.block-table { + display: table; +} + +.inline-table { + display: inline-table; +} + +.table-cell-flow { + display: table-cell; +} + +.table-caption-flow { + display: table-caption; +} + +.ruby-base-flow { + display: ruby-base; +} + +.ruby-text-flow { + display: ruby-text; +} + +.logical-float { + float: left; +} + +.color-function { + prop-1: rgb(0, 132, 94); + prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; + prop-3: rgb(7, 3, 1); + prop-4: rgb(7, 3, 1); + prop-5: color(display-p3 1 1 1 1); +} + +.oklab { + color-1: rgb(73, 71, 69); + color-2: rgb(121, 34, 67); + color-3: rgba(121, 34, 67, 0.5); + color-4: rgb(121, 34, 67); + color-5: rgba(121, 34, 67, 0.5); + color-6: rgb(177, 102, 126); + color-7: oklab(60% 0.1 0 foo); + color-8: rgb(125, 35, 41); + color-9: rgb(198, 93, 7); + color-10: rgb(157, 147, 24); + color-11: rgb(104, 166, 57); + color-12: rgb(98, 172, 239); +} + +.oklch { + color-1: rgb(126, 37, 15); + color-2: rgb(126, 37, 15); + color-3: rgba(126, 37, 15, 0.5); + color-4: rgb(126, 37, 15); + color-5: rgba(126, 37, 15, 0.5); + color-6: rgb(197, 84, 124); + + color-7: rgb(0, 152, 131); + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: rgb(0, 152, 131); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: rgb(0, 152, 131); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: rgb(0, 152, 131); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: rgb(0, 152, 131); + color-11: color(display-p3 0.19244 0.58461 0.51559); + + color-12: rgb(188, 101, 59); + color-13: rgb(188, 101, 59); + color-14: rgb(188, 101, 59); + color-15: rgb(188, 101, 59); + color-16: rgb(188, 101, 59); + color-17: oklch(60% 0.1250 0.785398unknown); +} + +.ic-unit { + --value-2ic: initial; + text-indent: 2em; + content: var(--value-2ic); + left: 2em; + width: -webkit-calc(8em + 20px); + width: -moz-calc(8em + 20px); + width: calc(8em + 20px); + height: 10px; + margin: 0.5em 1em .2em; + padding: 2 ic; +} + +.unset { + clip: auto; + clip: initial; +} + +.mod { + padding: 8px 3px 1px -webkit-calc(3px + 50%); + padding: 8px 3px 1px -moz-calc(3px + 50%); + padding: 8px 3px 1px calc(3px + 50%); + -webkit-transform: rotate(-50deg); + -moz-transform: rotate(-50deg); + -ms-transform: rotate(-50deg); + -o-transform: rotate(-50deg); + transform: rotate(-50deg); + width: 2px; +} + +.rem { + padding: 8px 3px 1px -webkit-calc(3px + 50%); + padding: 8px 3px 1px -moz-calc(3px + 50%); + padding: 8px 3px 1px calc(3px + 50%); + -webkit-transform: rotate(-50deg); + -moz-transform: rotate(-50deg); + -ms-transform: rotate(-50deg); + -o-transform: rotate(-50deg); + transform: rotate(-50deg); +} + +.round { + top: 3px; + right: 3px; + bottom: 3px; + left: 2px; + padding-left: 2px; +} + +.trigonometric { + left: 0.70711; + left: 0.70711; + left: 1; + left: 30deg; + left: 60deg; + left: 84.28941deg; + left: -45deg; + left: 90deg; + left: 135deg; + left: 0.99863; +} + +.trigonometric-ignore-not-a-function { + left: sin; + left: cos; + left: tan; + left: asin; + left: acos; + left: atan; + left: atan2; +} + +.trigonometric-ignore-no-arguments { + left: sin(); + left: cos(); + left: tan(); + left: asin(); + left: acos(); + left: atan(); + left: atan2(); +} + +[data-view-size=m] .view { + background: red; +} + +.nested-calc { + -webkit-box-ordinal-group: NaN; + -webkit-order: -webkit-calc(1 * (8 / 3 + (5 * 10))); + -moz-box-ordinal-group: NaN; + -ms-flex-order: calc(1 * (8 / 3 + (5 * 10))); + order: calc(1 * (8 / 3 + (5 * 10))); +} + +.text-decoration-shorthand { + text-decoration: overline; + -webkit-text-decoration: overline wavy pink; + text-decoration: overline wavy pink; + text-decoration-thickness: 3px; +} + +.stage__container { + left: 1rem; +} + +:root { + content: "plain :scope"; +} + +@scope (.foo) { + :scope { + content: ":scope in @scope"; + } +} + +:root { + @scope (.foo) { + content: ":scope in @scope, but with nesting"; + } +} + +@media (min-aspect-ratio: 177/100) { + /* media query aspect ratio : */ +} + +.color-mix { + color-1: rgba(0, 0, 255, 0.65); + color-2: rgba(0, 0, 255, 0.65); + color-3: rgba(0, 0, 255, 0.65); + color-4: rgba(125, 0, 190, 0.65); + color-4: color(display-p3 0.45007 0 0.73452 / 0.65); + color-5: rgba(153, 0, 125, 0.65); + color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-6: rgba(179, 0, 255, 0.65); +} + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index 66304dc13..2b424c686 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -1012,3 +1012,24 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgba(179, 0, 255, 0.65); color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +@supports (color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} + } +} diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index 422bd3a54..9713b256a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -465,3 +465,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index 32860518f..c2e66e0e6 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -481,3 +481,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 7f272314f..5765c6e9d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -476,3 +476,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index bf0c246f3..9a07d5c77 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -590,3 +590,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index 8831e424d..6d7d6a8a9 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -600,3 +600,19 @@ color-5: color(display-p3 0.56492 0 0.48893 / 0.65); color-6: rgba(179, 0, 255, 0.65); } + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 37e70cf39..5e5bdeea0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -591,10 +591,28 @@ } .color-mix { - color-1: color-mix(in srgb, rgba(255, 0, 0, 0), blue 65%); - color-2: color-mix(in lab, rgba(255, 0, 0, 0), blue 65%); - color-3: color-mix(in xyz, rgba(255, 0, 0, 0), blue 65%); - color-4: color-mix(in oklch, rgba(255, 0, 0, 0), blue 65%); - color-5: color-mix(in lch, rgba(255, 0, 0, 0), blue 65%); - color-6: color-mix(in hsl, rgba(255, 0, 0, 0), blue 65%); + color-1: rgba(0, 0, 255, 0.65); + color-2: rgba(0, 0, 255, 0.65); + color-3: rgba(0, 0, 255, 0.65); + color-4: rgba(125, 0, 190, 0.65); + color-4: color(display-p3 0.45007 0 0.73452 / 0.65); + color-5: rgba(153, 0, 125, 0.65); + color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-6: rgba(179, 0, 255, 0.65); +} + +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), rgb(188, 179, 255), rgb(164, 192, 255), rgb(137, 206, 255), rgb(111, 218, 255), rgb(93, 229, 255), rgb(94, 237, 237) 100%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} } diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 8082c72f5..2b30edc5a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -560,3 +560,7 @@ color-5: color-mix(in lch, rgba(255, 0, 0, 0), blue 65%); color-6: color-mix(in hsl, rgba(255, 0, 0, 0), blue 65%); } + +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); +} diff --git a/plugins/postcss-gradients-interpolation-method/.tape.mjs b/plugins/postcss-gradients-interpolation-method/.tape.mjs index de18424ae..526638452 100644 --- a/plugins/postcss-gradients-interpolation-method/.tape.mjs +++ b/plugins/postcss-gradients-interpolation-method/.tape.mjs @@ -11,13 +11,6 @@ postcssTape(plugin)({ preserve: false } }, - 'basic:preserve-true:progressive-false': { - message: 'supports { preserve: true, enableProgressiveCustomProperties: false } usage', - options: { - preserve: true, - enableProgressiveCustomProperties: false, - } - }, 'basic:with-cloned-rules': { message: 'doesn\'t cause duplicate CSS', plugins: [ @@ -36,6 +29,16 @@ postcssTape(plugin)({ preserve: false } }, + 'variables:preserve-true': { + message: 'supports { preserve: true, enableProgressiveCustomProperties: true } usage', + }, + 'variables:preserve-true:progressive-false': { + message: 'supports { preserve: true, enableProgressiveCustomProperties: false } usage', + options: { + preserve: true, + enableProgressiveCustomProperties: false, + } + }, 'examples/example': { message: 'minimal example', }, diff --git a/plugins/postcss-gradients-interpolation-method/CHANGELOG.md b/plugins/postcss-gradients-interpolation-method/CHANGELOG.md index b06efec98..e54763baa 100644 --- a/plugins/postcss-gradients-interpolation-method/CHANGELOG.md +++ b/plugins/postcss-gradients-interpolation-method/CHANGELOG.md @@ -1,6 +1,6 @@ # Changes to PostCSS Gradients Interpolation Method -### 3.0.1 (patch) +### Unreleased (patch) - Skip gamut mapping for interpolation color hints. diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.cjs b/plugins/postcss-gradients-interpolation-method/dist/index.cjs index b34811b1e..4d3bbcc6f 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/index.cjs +++ b/plugins/postcss-gradients-interpolation-method/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),n=require("@csstools/css-color-parser");const i=/(repeating-)?(linear|radial|conic)-gradient\(/i,s=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(e){const o=e.parent;if(!o)return!1;const t=e.prop.toLowerCase(),n=o.index(e);for(let e=0;e0&&N.some((e=>!o.isCommentNode(e)))&&N.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]])),trim([...N,...trim(g)])}function trim(e){let t=0,n=e.length-1;for(let n=0;n=0;t--)if(!o.isWhitespaceNode(e[t])){n=t;break}return e.slice(t,n+1)}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n){if(!i.test(n.value))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const s=t.tokenize({css:n.value}),r=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(s),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e);t&&(e.value=t)})));if(r===n.value)return;const a=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(t.cloneTokens(s)),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e,!0);t&&(e.value=t)})));n.cloneBefore({value:r}),r!=a&&n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),n=require("@csstools/css-color-parser");const i=/(repeating-)?(linear|radial|conic)-gradient\(/i,s=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(e){const o=e.parent;if(!o)return!1;const t=e.prop.toLowerCase(),n=o.index(e);for(let e=0;e0&&N.some((e=>!o.isCommentNode(e)))&&N.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]])),trim([...N,...trim(g)])}function trim(e){let t=0,n=e.length-1;for(let n=0;n=0;t--)if(!o.isWhitespaceNode(e[t])){n=t;break}return e.slice(t,n+1)}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n){if(!i.test(n.value))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const s=t.tokenize({css:n.value}),r=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(s),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e);t&&(e.value=t)})));if(r===n.value)return;const a=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(t.cloneTokens(s)),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e,!0);t&&(e.value=t)})));n.cloneBefore({value:r}),r!=a&&n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.mjs b/plugins/postcss-gradients-interpolation-method/dist/index.mjs index 13be3fe32..44d68df38 100644 --- a/plugins/postcss-gradients-interpolation-method/dist/index.mjs +++ b/plugins/postcss-gradients-interpolation-method/dist/index.mjs @@ -1 +1 @@ -import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as n,isWhitespaceNode as i,isTokenNode as s,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{TokenType as p,tokenize as f,cloneTokens as v}from"@csstools/css-tokenizer";import{serializeP3 as h,color as d,colorDataFitsRGB_Gamut as m,serializeRGB as g}from"@csstools/css-color-parser";const w=/(repeating-)?(linear|radial|conic)-gradient\(/i,C=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(o){const e=o.parent;if(!e)return!1;const t=o.prop.toLowerCase(),r=e.index(o);for(let o=0;o0&&w.some((o=>!n(o)))&&w.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]])),trim([...w,...trim(g)])}function trim(o){let e=0,t=o.length-1;for(let t=0;t=0;e--)if(!i(o[e])){t=e;break}return o.slice(e,t+1)}const basePlugin=o=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(e){if(!w.test(e.value))return;if(hasFallback(e))return;if(hasSupportsAtRuleAncestor(e))return;const t=f({css:e.value}),r=l(a(c(t),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o);e&&(o.value=e)})));if(r===e.value)return;const n=l(a(c(v(t)),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o,!0);e&&(o.value=e)})));e.cloneBefore({value:r}),r!=n&&e.cloneBefore({value:n}),null!=o&&o.preserve||e.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[o(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as n,isWhitespaceNode as i,isTokenNode as s,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{TokenType as p,tokenize as f,cloneTokens as v}from"@csstools/css-tokenizer";import{serializeP3 as h,color as d,colorDataFitsRGB_Gamut as m,serializeRGB as g}from"@csstools/css-color-parser";const w=/(repeating-)?(linear|radial|conic)-gradient\(/i,C=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(o){const e=o.parent;if(!e)return!1;const t=o.prop.toLowerCase(),r=e.index(o);for(let o=0;o0&&w.some((o=>!n(o)))&&w.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]])),trim([...w,...trim(g)])}function trim(o){let e=0,t=o.length-1;for(let t=0;t=0;e--)if(!i(o[e])){t=e;break}return o.slice(e,t+1)}const basePlugin=o=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(e){if(!w.test(e.value))return;if(hasFallback(e))return;if(hasSupportsAtRuleAncestor(e))return;const t=f({css:e.value}),r=l(a(c(t),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o);e&&(o.value=e)})));if(r===e.value)return;const n=l(a(c(v(t)),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o,!0);e&&(o.value=e)})));e.cloneBefore({value:r}),r!=n&&e.cloneBefore({value:n}),null!=o&&o.preserve||e.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[o(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-gradients-interpolation-method/src/index.ts b/plugins/postcss-gradients-interpolation-method/src/index.ts index f3c7a3eac..3cc2c3c5b 100644 --- a/plugins/postcss-gradients-interpolation-method/src/index.ts +++ b/plugins/postcss-gradients-interpolation-method/src/index.ts @@ -92,7 +92,7 @@ const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { preserve: true, }, opts); - if (options.enableProgressiveCustomProperties && options.preserve) { + if (options.enableProgressiveCustomProperties) { return { postcssPlugin: 'postcss-gradients-interpolation-method', plugins: [ diff --git a/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts b/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts index 9039aa401..ffe6ddb06 100644 --- a/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts +++ b/plugins/postcss-gradients-interpolation-method/src/parse-color-stops.ts @@ -37,16 +37,21 @@ export function parseColorStops(componentValues: Array): Array