From 0544c6963307ea723afc0e97250d70321eac34f6 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 21 Jan 2023 10:46:29 +0100 Subject: [PATCH 1/2] text-decoration : fix shorthand in Safari with single node values --- package-lock.json | 78 ++----------------- .../test/basic.autoprefixer.expect.css | 1 + .../test/basic.autoprefixer.false.expect.css | 1 + .../postcss-preset-env/test/basic.expect.css | 1 + .../test/basic.nesting.false.expect.css | 1 + .../test/basic.preserve.true.expect.css | 1 + .../test/basic.stage0.expect.css | 1 + .../test/basic.vendors-1.expect.css | 1 + .../test/basic.vendors-2.expect.css | 1 + .../test/layers-basic.expect.css | 1 + .../layers-basic.preserve.true.expect.css | 1 + plugins/css-has-pseudo/README.md | 4 +- plugins/css-has-pseudo/package.json | 2 +- .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../src/index.ts | 21 +++-- .../test/basic.autoprefixer.expect.css | 1 + .../test/basic.expect.css | 2 + .../test/basic.preserve-true.expect.css | 1 + 19 files changed, 42 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29ea06296..22f5b7cd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -96,26 +96,6 @@ "url": "https://opencollective.com/csstools" } }, - "cli/csstools-cli/node_modules/css-has-pseudo": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-4.0.2.tgz", - "integrity": "sha512-bhAVH1oI51Jc99i7gPXCURWOQbeaoWp37Z/ZL7kkd/gkZjxE2VZLc85B8BhaxHGEtXGIEmQMAPQc2cqSqcgAeA==", - "dependencies": { - "@csstools/selector-specificity": "^2.0.1", - "postcss-selector-parser": "^6.0.10", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, "experimental/css-has-pseudo": { "name": "@csstools/css-has-pseudo-experimental", "version": "0.6.0", @@ -2295,9 +2275,9 @@ } }, "node_modules/@rollup/plugin-commonjs": { - "version": "24.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz", - "integrity": "sha512-0w0wyykzdyRRPHOb0cQt14mIBLujfAv6GgP6g8nvg/iBxEm112t3YPPq+Buqe2+imvElTka+bjNlJ/gB56TD8g==", + "version": "24.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz", + "integrity": "sha512-15LsiWRZk4eOGqvrJyu3z3DaBu5BhXIMeWnijSRvd8irrrg9SHpQ1pH+BUK4H6Z9wL9yOxZJMTLU+Au86XHxow==", "dev": true, "dependencies": { "@rollup/pluginutils": "^5.0.1", @@ -7189,26 +7169,6 @@ "postcss": "^8.4" } }, - "plugin-packs/postcss-preset-env/node_modules/css-has-pseudo": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-4.0.2.tgz", - "integrity": "sha512-bhAVH1oI51Jc99i7gPXCURWOQbeaoWp37Z/ZL7kkd/gkZjxE2VZLc85B8BhaxHGEtXGIEmQMAPQc2cqSqcgAeA==", - "dependencies": { - "@csstools/selector-specificity": "^2.0.1", - "postcss-selector-parser": "^6.0.10", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^12 || ^14 || >=16" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.2" - } - }, "plugins/css-blank-pseudo": { "version": "4.1.1", "license": "CC0-1.0", @@ -7230,7 +7190,7 @@ } }, "plugins/css-has-pseudo": { - "version": "4.0.1", + "version": "4.0.2", "license": "CC0-1.0", "dependencies": { "@csstools/selector-specificity": "^2.0.1", @@ -9285,18 +9245,6 @@ "postcss-preset-env": "^8.0.0-alpha.1", "postcss-pseudo-class-any-link": "^7.1.4", "postcss-selector-not": "^6.0.0" - }, - "dependencies": { - "css-has-pseudo": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-4.0.2.tgz", - "integrity": "sha512-bhAVH1oI51Jc99i7gPXCURWOQbeaoWp37Z/ZL7kkd/gkZjxE2VZLc85B8BhaxHGEtXGIEmQMAPQc2cqSqcgAeA==", - "requires": { - "@csstools/selector-specificity": "^2.0.1", - "postcss-selector-parser": "^6.0.10", - "postcss-value-parser": "^4.2.0" - } - } } }, "@csstools/generate-test-cases": { @@ -9729,9 +9677,9 @@ } }, "@rollup/plugin-commonjs": { - "version": "24.0.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz", - "integrity": "sha512-0w0wyykzdyRRPHOb0cQt14mIBLujfAv6GgP6g8nvg/iBxEm112t3YPPq+Buqe2+imvElTka+bjNlJ/gB56TD8g==", + "version": "24.0.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.1.tgz", + "integrity": "sha512-15LsiWRZk4eOGqvrJyu3z3DaBu5BhXIMeWnijSRvd8irrrg9SHpQ1pH+BUK4H6Z9wL9yOxZJMTLU+Au86XHxow==", "dev": true, "requires": { "@rollup/pluginutils": "^5.0.1", @@ -12228,18 +12176,6 @@ "postcss-selector-not": "^6.0.1", "postcss-simple-vars": "^7.0.0", "postcss-value-parser": "^4.2.0" - }, - "dependencies": { - "css-has-pseudo": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-4.0.2.tgz", - "integrity": "sha512-bhAVH1oI51Jc99i7gPXCURWOQbeaoWp37Z/ZL7kkd/gkZjxE2VZLc85B8BhaxHGEtXGIEmQMAPQc2cqSqcgAeA==", - "requires": { - "@csstools/selector-specificity": "^2.0.1", - "postcss-selector-parser": "^6.0.10", - "postcss-value-parser": "^4.2.0" - } - } } }, "postcss-pseudo-class-any-link": { 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 f27e64d76..c64a04d58 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -195,6 +195,7 @@ table-layout: auto; text-align: left; text-align-last: auto; + -webkit-text-decoration: none; text-decoration: none; text-indent: 0; text-shadow: none; 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 f27e64d76..c64a04d58 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 @@ -195,6 +195,7 @@ table-layout: auto; text-align: left; text-align-last: auto; + -webkit-text-decoration: none; text-decoration: none; text-indent: 0; text-shadow: none; diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index b01b75363..e7b7c9046 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -209,6 +209,7 @@ 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; 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 2d14b38e0..a26a19018 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 @@ -227,6 +227,7 @@ h6.test-custom-selectors { 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; 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 e7a9a13ae..95d1c6c81 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 @@ -438,6 +438,7 @@ h6.test-custom-selectors { 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; 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 fb80fae44..281a4d919 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -234,6 +234,7 @@ h6.test-custom-selectors { 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; 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 187532fa6..73061eade 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 @@ -213,6 +213,7 @@ 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; 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 0cecc2991..e6293578e 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 @@ -205,6 +205,7 @@ 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; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index 2c34aba2c..2029f8f6f 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -385,6 +385,7 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n 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; diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index b40a276c6..b1ece9af9 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -455,6 +455,7 @@ h6.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n 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; diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md index 5740bdc9a..dc6dda6fb 100644 --- a/plugins/css-has-pseudo/README.md +++ b/plugins/css-has-pseudo/README.md @@ -148,11 +148,11 @@ or ```html - + ``` -⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@4.0.1/dist/browser-global.js` +⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@4.0.2/dist/browser-global.js` Without the version, you might unexpectedly get a new major version of the library with breaking changes. [PostCSS Has Pseudo] works in all major browsers, including diff --git a/plugins/css-has-pseudo/package.json b/plugins/css-has-pseudo/package.json index 6b5bd6fda..db5966128 100644 --- a/plugins/css-has-pseudo/package.json +++ b/plugins/css-has-pseudo/package.json @@ -1,7 +1,7 @@ { "name": "css-has-pseudo", "description": "Style elements relative to other elements in CSS", - "version": "4.0.1", + "version": "4.0.2", "contributors": [ { "name": "Antonio Laguna", diff --git a/plugins/postcss-text-decoration-shorthand/dist/index.cjs b/plugins/postcss-text-decoration-shorthand/dist/index.cjs index 50c4bc4f8..6fcc53607 100644 --- a/plugins/postcss-text-decoration-shorthand/dist/index.cjs +++ b/plugins/postcss-text-decoration-shorthand/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser");const creator=t=>{const a=Object.assign({preserve:!1},t);return{postcssPlugin:"postcss-text-decoration-shorthand",prepare(){const t=new Map;return{OnceExit:()=>{t.clear()},Declaration:n=>{if("text-decoration"!==n.prop.toLowerCase())return;const i=n.parent.index(n);if(n.parent.nodes.some((e=>"decl"===e.type&&"text-decoration"===e.prop.toLowerCase()&&t.get(n.value)===e.value&&n.parent.index(e)!==i)))return;const s=e(n.value).nodes.filter((e=>"space"!==e.type&&"comment"!==e.type));if(s.length>4)return;if(s.find((e=>"var"===e.value.toLowerCase()&&"function"===e.type)))return;if(s.find((e=>"word"===e.type&&r.includes(e.value))))return;const u={line:null,style:null,color:null,thickness:null};for(let e=0;e{const a=Object.assign({preserve:!1},t);return{postcssPlugin:"postcss-text-decoration-shorthand",prepare(){const t=new Map;return{OnceExit:()=>{t.clear()},Declaration:n=>{if("text-decoration"!==n.prop.toLowerCase())return;const i=n.parent.index(n);if(n.parent.nodes.some((e=>"decl"===e.type&&"text-decoration"===e.prop.toLowerCase()&&t.get(n.value)===e.value&&n.parent.index(e)!==i)))return;const s=e(n.value).nodes.filter((e=>"space"!==e.type&&"comment"!==e.type));if(s.length>4)return;if(s.find((e=>"var"===e.value.toLowerCase()&&"function"===e.type)))return;if(s.find((e=>"word"===e.type&&r.includes(e.value))))return;const u={line:null,style:null,color:null,thickness:null};for(let e=0;e{const a=Object.assign({preserve:!1},t);return{postcssPlugin:"postcss-text-decoration-shorthand",prepare(){const t=new Map;return{OnceExit:()=>{t.clear()},Declaration:n=>{if("text-decoration"!==n.prop.toLowerCase())return;const i=n.parent.index(n);if(n.parent.nodes.some((e=>"decl"===e.type&&"text-decoration"===e.prop.toLowerCase()&&t.get(n.value)===e.value&&n.parent.index(e)!==i)))return;const s=e(n.value).nodes.filter((e=>"space"!==e.type&&"comment"!==e.type));if(s.length>4)return;if(s.find((e=>"var"===e.value.toLowerCase()&&"function"===e.type)))return;if(s.find((e=>"word"===e.type&&r.includes(e.value))))return;const u={line:null,style:null,color:null,thickness:null};for(let e=0;e{const a=Object.assign({preserve:!1},t);return{postcssPlugin:"postcss-text-decoration-shorthand",prepare(){const t=new Map;return{OnceExit:()=>{t.clear()},Declaration:n=>{if("text-decoration"!==n.prop.toLowerCase())return;const i=n.parent.index(n);if(n.parent.nodes.some((e=>"decl"===e.type&&"text-decoration"===e.prop.toLowerCase()&&t.get(n.value)===e.value&&n.parent.index(e)!==i)))return;const s=e(n.value).nodes.filter((e=>"space"!==e.type&&"comment"!==e.type));if(s.length>4)return;if(s.find((e=>"var"===e.value.toLowerCase()&&"function"===e.type)))return;if(s.find((e=>"word"===e.type&&r.includes(e.value))))return;const u={line:null,style:null,color:null,thickness:null};for(let e=0;e = (opts?: pluginOptions) => { const nonShortHandValue = valueParser.stringify(data.line); if (decl.value.toLowerCase() === nonShortHandValue) { + const next = decl.next(); + if (!next || next.type !== 'decl' || next.prop.toLowerCase() !== 'text-decoration') { + + // "-webkit-text-decoration" is a shorthand and sets omitted constituent properties to their initial value. + // "text-decoration" is a longhand in older browsers and does not have this behavior. + decl.cloneBefore({ + prop: '-webkit-text-decoration', + value: nonShortHandValue, + }); + } + return; } + decl.cloneBefore({ + prop: 'text-decoration', + value: nonShortHandValue, + }); + const shortHandValue = valueParser.stringify([ data.line, { @@ -162,11 +178,6 @@ const creator: PluginCreator = (opts?: pluginOptions) => { data.color, ]); - decl.cloneBefore({ - prop: 'text-decoration', - value: nonShortHandValue, - }); - // Construct a new shorthand value without thickness: // - when thickness is set // - when not all shorthand properties are set diff --git a/plugins/postcss-text-decoration-shorthand/test/basic.autoprefixer.expect.css b/plugins/postcss-text-decoration-shorthand/test/basic.autoprefixer.expect.css index 6f7e284c9..a80af90ad 100644 --- a/plugins/postcss-text-decoration-shorthand/test/basic.autoprefixer.expect.css +++ b/plugins/postcss-text-decoration-shorthand/test/basic.autoprefixer.expect.css @@ -7,6 +7,7 @@ } .b { + -webkit-text-decoration: overline; text-decoration: overline; } diff --git a/plugins/postcss-text-decoration-shorthand/test/basic.expect.css b/plugins/postcss-text-decoration-shorthand/test/basic.expect.css index c3926ca95..898a4e308 100644 --- a/plugins/postcss-text-decoration-shorthand/test/basic.expect.css +++ b/plugins/postcss-text-decoration-shorthand/test/basic.expect.css @@ -4,6 +4,7 @@ } .b { + -webkit-text-decoration: overline; text-decoration: overline; } @@ -13,6 +14,7 @@ } .abc { + -webkit-text-decoration: overline; text-decoration: overline; } diff --git a/plugins/postcss-text-decoration-shorthand/test/basic.preserve-true.expect.css b/plugins/postcss-text-decoration-shorthand/test/basic.preserve-true.expect.css index d79dacafd..aeaca5379 100644 --- a/plugins/postcss-text-decoration-shorthand/test/basic.preserve-true.expect.css +++ b/plugins/postcss-text-decoration-shorthand/test/basic.preserve-true.expect.css @@ -5,6 +5,7 @@ } .b { + -webkit-text-decoration: overline; text-decoration: overline; } From 4478332a5d15f6b87159754a1ce1614b539e63de Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Sat, 21 Jan 2023 10:55:43 +0100 Subject: [PATCH 2/2] update changelog --- plugins/postcss-text-decoration-shorthand/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/postcss-text-decoration-shorthand/CHANGELOG.md b/plugins/postcss-text-decoration-shorthand/CHANGELOG.md index bca17f867..bd9a74fd8 100644 --- a/plugins/postcss-text-decoration-shorthand/CHANGELOG.md +++ b/plugins/postcss-text-decoration-shorthand/CHANGELOG.md @@ -3,6 +3,7 @@ ### Unreleased (major) - Updated: Support for Node v14+ (major). +- Add: `-webkit-text-decoration` shorthand for single value `text-decoration: underline;`. [autoprefixer 1473](https://github.com/postcss/autoprefixer/issues/1473#issuecomment-1243370592) ### 1.0.0 (August 15, 2022)