From 8ae7faf8535de3fb432645532d47d9bd8cd10080 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 27 Mar 2023 19:45:19 +0200 Subject: [PATCH 1/3] add `postcss-gradients-interpolation-method` to `postcss-preset-env` --- packages/css-color-parser/CHANGELOG.md | 2 +- plugin-packs/postcss-preset-env/.tape.mjs | 8 + plugin-packs/postcss-preset-env/CHANGELOG.md | 4 + .../postcss-preset-env/dist/index.cjs | 2 +- .../postcss-preset-env/dist/index.mjs | 2 +- .../dist/plugins/plugins-options.d.ts | 3 + .../scripts/plugins-data.json | 5 + .../src/lib/ids-by-execution-order.mjs | 1 + .../src/plugins/plugins-by-id.mjs | 2 + .../src/plugins/plugins-data.mjs | 5 + .../src/plugins/plugins-options.ts | 3 + .../test/basic.autoprefixer.expect.css | 16 + .../test/basic.autoprefixer.false.expect.css | 16 + .../test/basic.ch38.expect.css | 16 + .../test/basic.ch88-ff78-saf10.expect.css | 16 + .../test/basic.ch88-ff78.expect.css | 16 + .../basic.ch88-ff78.no-is-pseudo.expect.css | 16 + .../postcss-preset-env/test/basic.css | 4 + .../postcss-preset-env/test/basic.expect.css | 16 + .../test/basic.ff49.expect.css | 16 + .../test/basic.ff66.expect.css | 16 + .../test/basic.hebrew.expect.css | 16 + .../test/basic.ie10.expect.css | 16 + .../test/basic.nesting.false.expect.css | 16 + .../test/basic.nesting.true.expect.css | 4 + .../test/basic.op_mini.expect.css | 16 + .../test/basic.preserve.false.expect.css | 760 ++++++++++++++++++ .../test/basic.preserve.true.expect.css | 21 + .../test/basic.safari15.expect.css | 16 + .../test/basic.stage0-ff49.expect.css | 16 + .../test/basic.stage0-ff66.expect.css | 16 + .../test/basic.stage0.expect.css | 16 + .../test/basic.vendors-1.expect.css | 4 + .../test/basic.vendors-2.expect.css | 4 + .../test/basic.vendors-3.expect.css | 4 + .../.tape.mjs | 17 +- .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../src/index.ts | 2 +- ...preserve-true.progressive-false.expect.css | 370 --------- .../test/variables.preserve-false.expect.css | 11 +- .../test/variables.preserve-true.expect.css | 62 ++ ...preserve-true.progressive-false.expect.css | 17 + rollup/configs/externals.mjs | 2 + 44 files changed, 1209 insertions(+), 386 deletions(-) create mode 100644 plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css delete mode 100644 plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css create mode 100644 plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css create mode 100644 plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.progressive-false.expect.css 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..a7681bcc2 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -1,5 +1,9 @@ # 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. + ### 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/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/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..e8ca99f78 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,7 @@ 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(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..d81488ff8 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 @@ -598,3 +598,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/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/dist/index.cjs b/plugins/postcss-gradients-interpolation-method/dist/index.cjs index b34811b1e..8fa4eee95 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..919fa1dd5 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/test/basic.preserve-true.progressive-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css deleted file mode 100644 index 985597307..000000000 --- a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-true.progressive-false.expect.css +++ /dev/null @@ -1,370 +0,0 @@ -.test-1 { - --perc-50: 50%; - background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), rgb(39, 0, 110), rgb(42, 0, 126), rgb(43, 0, 141), rgb(41, 0, 157), rgb(38, 0, 173), rgb(33, 0, 189), rgb(27, 0, 206), rgb(19, 0, 222), rgb(9, 0, 238), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(90deg, rgb(0, 0, 0) 20%, rgb(0, 0, 0) var(--perc-50), color(display-p3 0.10591 -0.185 0.41007), color(display-p3 0.11458 -0.2081 0.4685), color(display-p3 0.11174 -0.2252 0.52777), color(display-p3 0.10009 -0.236 0.58774), color(display-p3 0.08062 -0.2403 0.64834), color(display-p3 0.05297 -0.2367 0.70952), color(display-p3 0.01802 -0.2235 0.77126), color(display-p3 -0.0079 -0.1966 0.83353), color(display-p3 -0.0163 -0.1455 0.89631), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(in oklch 90deg, black 20% var(--perc-50),blue 70% 75%); -} - -.test-2-0 { - background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%); -} - -.test-2-1 { - background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(in oklab 90deg, red 25% 50%, blue 70% 75%); -} - -.test-2-2 { - background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%); -} - -.test-2-3 { - background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(232, 51, 66), rgb(209, 68, 96), rgb(186, 77, 121), rgb(163, 82, 142), rgb(140, 83, 162), rgb(117, 81, 182), rgb(93, 75, 200), rgb(68, 65, 219), rgb(41, 48, 237), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%); - background-image: linear-gradient(90deg in oklab, red 25% 50%, blue 70% 75%); -} - -.test-3 { - --red: red; - /* Color stop variable */ - background-image: linear-gradient(in oklch 90deg, black, var(--red), blue); -} - -.test-4 { - --perc-10: 10%; - /* Interpolation hint */ - background-image: linear-gradient(in oklch 90deg, black, var(--perc-10), blue); -} - -.test-missing-position-1 { - background-image: linear-gradient(in oklch, red, green 45%, blue); -} - -.test-missing-position-2 { - background-image: linear-gradient(in oklch, red 0%, green, blue 100%); -} - -.test-missing-color { - background-image: linear-gradient(in oklch, red 0%, 25%, blue 100%); -} - -.test-visual-effect-1-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(230, 147, 147), rgb(215, 157, 157), rgb(200, 167, 167), rgb(185, 177, 177), rgb(170, 187, 187), rgb(155, 197, 197), rgb(140, 207, 207), rgb(125, 217, 217), rgb(109, 227, 227), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in srgb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-2-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in srgb-linear, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-3-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(238, 149, 147), rgb(229, 160, 156), rgb(219, 171, 166), rgb(209, 181, 176), rgb(197, 191, 186), rgb(183, 201, 196), rgb(168, 210, 206), rgb(149, 219, 216), rgb(126, 228, 227), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in lab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-4-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(237, 149, 147), rgb(229, 161, 157), rgb(219, 171, 167), rgb(208, 182, 177), rgb(196, 192, 187), rgb(183, 201, 197), rgb(167, 210, 207), rgb(149, 220, 217), rgb(126, 228, 227), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in oklab, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-5-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in xyz, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-6-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in xyz-d65, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-7-1 { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(236, 151, 151), rgb(225, 164, 164), rgb(214, 175, 175), rgb(203, 186, 186), rgb(190, 196, 196), rgb(176, 205, 205), rgb(161, 213, 213), rgb(143, 222, 222), rgb(122, 230, 230), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in xyz-d50, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-8-1-a { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hsl, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-8-1-b { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hsl shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-8-1-c { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hsl longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-8-1-d { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 128), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 242, 115), rgb(137, 241, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hsl increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-8-1-e { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 128, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 115, 242), rgb(137, 111, 241), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hsl decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-9-1-a { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hwb, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-9-1-b { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hwb shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-9-1-c { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hwb longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-9-1-d { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 166, 133), rgb(244, 198, 129), rgb(243, 231, 124), rgb(218, 242, 120), rgb(179, 241, 116), rgb(137, 240, 111), rgb(107, 240, 120), rgb(103, 239, 157), rgb(99, 238, 196), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hwb increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-9-1-e { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 133, 166), rgb(244, 129, 198), rgb(243, 124, 231), rgb(218, 120, 242), rgb(179, 116, 241), rgb(137, 111, 240), rgb(107, 120, 240), rgb(103, 157, 239), rgb(99, 196, 238), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in hwb decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-10-1-a { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in lch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-10-1-b { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in lch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-10-1-c { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), rgb(190, 185, 255), rgb(159, 198, 255), rgb(127, 211, 255), rgb(100, 222, 255), rgb(86, 230, 255), rgb(94, 237, 237) 100%); - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1.03079), color(display-p3 0.65461 0.77371 1.06521), color(display-p3 0.57562 0.8188 1.06791), color(display-p3 0.52052 0.85831 1.04109), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in lch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-10-1-d { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(242, 148, 120), rgb(233, 161, 108), rgb(220, 175, 102), rgb(203, 188, 104), rgb(183, 200, 113), rgb(162, 210, 131), rgb(141, 219, 154), rgb(120, 227, 180), rgb(102, 233, 209), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in lch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-10-1-e { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), rgb(190, 185, 255), rgb(159, 198, 255), rgb(127, 211, 255), rgb(100, 222, 255), rgb(86, 230, 255), rgb(94, 237, 237) 100%); - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(251, 139, 168), rgb(248, 146, 199), rgb(236, 157, 228), rgb(216, 170, 252), color(display-p3 0.74033 0.7247 1.03079), color(display-p3 0.65461 0.77371 1.06521), color(display-p3 0.57562 0.8188 1.06791), color(display-p3 0.52052 0.85831 1.04109), color(display-p3 0.50432 0.89148 0.99036), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in lch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-11-1-a { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-11-1-b { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in oklch shorter hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-11-1-c { - 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%); - 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%); - background-image: linear-gradient(in oklch longer hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-11-1-d { - background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%); - background-image: linear-gradient(in oklch increasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-11-1-e { - 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%); - 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%); - background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); -} - -.test-visual-effect-1-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(61, 80, 42), rgb(66, 74, 49), rgb(71, 67, 56), rgb(76, 61, 63), rgb(81, 54, 70), rgb(86, 47, 76), rgb(91, 41, 83), rgb(96, 34, 90), rgb(101, 28, 97), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in srgb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-2-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in srgb-linear, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-3-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 44), rgb(71, 78, 51), rgb(77, 73, 58), rgb(83, 68, 65), rgb(87, 63, 72), rgb(92, 57, 78), rgb(96, 50, 85), rgb(100, 43, 91), rgb(103, 33, 97), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in lab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-4-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-5-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in xyz, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-6-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in xyz-d65, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-7-2 { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(63, 83, 48), rgb(70, 79, 57), rgb(76, 74, 65), rgb(81, 69, 72), rgb(86, 64, 79), rgb(90, 58, 84), rgb(95, 52, 90), rgb(99, 44, 95), rgb(103, 34, 99), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in xyz-d50, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-8-2-a { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hsl, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-8-2-b { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hsl shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-8-2-c { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hsl longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-8-2-d { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 98), rgb(26, 26, 100), rgb(51, 24, 102), rgb(79, 23, 104), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hsl increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-8-2-e { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(98, 31, 27), rgb(100, 26, 40), rgb(102, 24, 60), rgb(104, 23, 81), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hsl decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-9-2-a { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hwb, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-9-2-b { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hwb shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-9-2-c { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-9-2-d { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hwb increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-9-2-e { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(70, 89, 34), rgb(86, 91, 33), rgb(93, 82, 31), rgb(95, 67, 30), rgb(97, 50, 28), rgb(99, 31, 27), rgb(101, 25, 40), rgb(103, 24, 60), rgb(105, 22, 81), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hwb decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-10-2-a { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in lch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-10-2-b { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in lch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-10-2-c { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), rgb(0, 89, 62), rgb(0, 88, 80), rgb(0, 86, 100), rgb(0, 82, 118), rgb(0, 77, 131), rgb(0, 70, 138), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 -0.0932 0.33649 0.31294), color(display-p3 -0.153 0.32772 0.38315), color(display-p3 -0.1763 0.31416 0.44868), color(display-p3 -0.1631 0.2946 0.49837), color(display-p3 -0.0641 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in lch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-10-2-d { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), rgb(0, 89, 62), rgb(0, 88, 80), rgb(0, 86, 100), rgb(0, 82, 118), rgb(0, 77, 131), rgb(0, 70, 138), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(25, 88, 46), color(display-p3 0.07136 0.34102 0.2482), color(display-p3 -0.0932 0.33649 0.31294), color(display-p3 -0.153 0.32772 0.38315), color(display-p3 -0.1763 0.31416 0.44868), color(display-p3 -0.1631 0.2946 0.49837), color(display-p3 -0.0641 0.2671 0.52208), rgb(44, 59, 136), rgb(82, 44, 124), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in lch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-10-2-e { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(69, 82, 22), rgb(82, 76, 10), rgb(94, 69, 6), rgb(105, 60, 11), rgb(115, 49, 22), rgb(122, 37, 35), rgb(126, 23, 50), rgb(125, 11, 67), rgb(119, 10, 85), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in lch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-11-2-a { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), rgb(86, 75, 0), rgb(99, 67, 0), rgb(110, 57, 0), rgb(118, 47, 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 -0.053), color(display-p3 0.405 0.23566 -0.0558), color(display-p3 0.43044 0.20092 -0.0088), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in oklch, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-11-2-b { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), rgb(86, 75, 0), rgb(99, 67, 0), rgb(110, 57, 0), rgb(118, 47, 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 -0.053), color(display-p3 0.405 0.23566 -0.0558), color(display-p3 0.43044 0.20092 -0.0088), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in oklch shorter hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-11-2-c { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), rgb(0, 91, 70), rgb(0, 90, 89), rgb(0, 86, 108), rgb(0, 80, 123), rgb(0, 71, 134), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 -0.0843 0.34584 0.34631), color(display-p3 -0.1085 0.33067 0.4127), color(display-p3 -0.0693 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in oklch longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-11-2-d { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), rgb(0, 91, 70), rgb(0, 90, 89), rgb(0, 86, 108), rgb(0, 80, 123), rgb(0, 71, 134), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(22, 90, 51), color(display-p3 0.05822 0.35103 0.27835), color(display-p3 -0.0843 0.34584 0.34631), color(display-p3 -0.1085 0.33067 0.4127), color(display-p3 -0.0693 0.30546 0.4698), color(display-p3 0.0869 0.27174 0.5095), rgb(45, 60, 139), rgb(71, 48, 135), rgb(91, 36, 123), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in oklch increasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-11-2-e { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), rgb(86, 75, 0), rgb(99, 67, 0), rgb(110, 57, 0), rgb(118, 47, 0), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(72, 82, 7), color(display-p3 0.33156 0.29697 0.00199), color(display-p3 0.37126 0.26836 -0.053), color(display-p3 0.405 0.23566 -0.0558), color(display-p3 0.43044 0.20092 -0.0088), rgb(123, 36, 12), rgb(125, 27, 40), rgb(122, 20, 62), rgb(116, 19, 83), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in oklch decreasing hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.patterns-1 { - background: - conic-gradient(from -45deg, rgb(235, 104, 65) 90deg, rgba(235, 104, 65, 0.9), rgba(235, 104, 65, 0.8), rgba(235, 104, 65, 0.7), rgba(235, 104, 65, 0.6), rgba(235, 104, 65, 0.5), rgba(235, 104, 65, 0.4), rgba(235, 104, 65, 0.3), rgba(235, 104, 65, 0.2), rgba(235, 104, 65, 0.1), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 180deg, rgba(237, 201, 81, 0.1), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.9), rgb(237, 201, 81) 0, rgb(237, 201, 81) 270deg, rgba(237, 201, 81, 0.9), rgba(237, 201, 81, 0.8), rgba(237, 201, 81, 0.7), rgba(237, 201, 81, 0.6), rgba(237, 201, 81, 0.5), rgba(237, 201, 81, 0.4), rgba(237, 201, 81, 0.3), rgba(237, 201, 81, 0.2), rgba(237, 201, 81, 0.1), rgba(0, 0, 0, 0) 0) 0 calc(64px/2)/64px 64px, - conic-gradient(from 135deg at 50% 0, rgb(235, 104, 65) 90deg, rgb(238, 114, 58), rgb(240, 123, 53), rgb(242, 133, 48), rgb(243, 143, 45), rgb(244, 153, 44), rgb(243, 162, 47), rgb(243, 172, 53), rgb(241, 182, 60), rgb(239, 192, 70), rgb(237, 201, 81) 0) 0 0/calc(2*64px) 64px; - background: - conic-gradient(in oklch from -45deg, #EB6841 90deg, #0000 0 180deg, #EDC951 0 270deg, #0000 0) 0 calc(64px/2)/64px 64px, - conic-gradient(in oklch from 135deg at 50% 0, #EB6841 90deg, #EDC951 0) 0 0/calc(2*64px) 64px; -} - -.patterns-2 { - background: - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0, - linear-gradient(#53777A 20px, #0000 0) 0 15px, - conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0), - #ECD078; - background: - conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0, - linear-gradient(#53777A 20px, #0000 0) 0 15px, - conic-gradient(at 20px calc(100% - 20px) in hsl longer hue, #0000 90deg, #53777A 0 180deg, #C02942 0), - #ECD078; -} - -.manual_fallback { - background-image: red; - background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -to-clone { - background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(37, 89, 34), rgb(33, 91, 49), rgb(31, 93, 70), rgb(30, 95, 93), rgb(28, 75, 97), rgb(27, 51, 99), rgb(26, 25, 101), rgb(51, 24, 103), rgb(79, 22, 105), rgb(106, 21, 104) 100%); - background-image: linear-gradient(in hwb longer hue, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); -} - -.test-visual-effect-1-1 { - background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(241, 46, 0), rgb(210, 83, 0), rgb(162, 113, 0), rgb(87, 135, 0), rgb(0, 147, 0), rgb(0, 149, 78), rgb(0, 140, 148), rgb(0, 118, 204), rgb(0, 81, 242), rgb(0, 0, 255) 100%); - background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, color(display-p3 0.86777 0.26008 -0.2622), color(display-p3 0.76447 0.35833 -0.309), color(display-p3 0.60778 0.45183 -0.3093), color(display-p3 0.38399 0.52283 -0.2788), color(display-p3 -0.208 0.56371 -0.1475), color(display-p3 -0.3942 0.5688 0.32693), color(display-p3 -0.4344 0.53163 0.57087), color(display-p3 -0.4032 0.44581 0.77207), color(display-p3 -0.3069 0.30401 0.9108), rgb(0, 0, 255) 100%); - background-image: linear-gradient(in oklch longer hue to right, red 0%, blue 100%); -} diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css index f42e69bea..53b8b3e3b 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css @@ -1,11 +1,16 @@ :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, rgb(255, 199, 0), rgb(255, 182, 0), rgb(255, 164, 0), rgb(255, 146, 0), rgb(255, 127, 0), rgb(255, 107, 0), rgb(255, 87, 27), rgb(255, 66, 60), rgb(255, 42, 83), rgb(255, 0, 102) 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), rgb(0, 0, 255) 100%); - --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(42, 0, 0), rgb(66, 0, 0), rgb(90, 0, 0), rgb(114, 0, 0), rgb(137, 0, 0), rgb(161, 0, 0), rgb(184, 0, 0), rgb(208, 0, 0), rgb(231, 0, 0), rgb(255, 0, 0) 45%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); - --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); --gradient-prop-3: radial-gradient(rgb(0, 255, 255) 0%, rgba(0, 255, 255, 0.9), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 30%, rgba(250, 128, 114, 0.1), rgba(250, 128, 114, 0.2), rgba(250, 128, 114, 0.3), rgba(250, 128, 114, 0.4), rgba(250, 128, 114, 0.5), rgba(250, 128, 114, 0.6), rgba(250, 128, 114, 0.7), rgba(250, 128, 114, 0.8), rgba(250, 128, 114, 0.9), rgb(250, 128, 114) 40%); --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), rgb(217, 212, 0), rgb(227, 213, 0), rgb(237, 213, 0), rgb(246, 214, 0), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, rgb(255, 199, 0), rgb(255, 182, 0), rgb(255, 164, 0), rgb(255, 146, 0), rgb(255, 127, 0), rgb(255, 107, 0), rgb(255, 87, 27), rgb(255, 66, 60), rgb(255, 42, 83), rgb(255, 0, 102) 0deg); - --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); --gradient-prop-5: repeating-linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +:root { + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); + --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); +} +} diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css new file mode 100644 index 000000000..1aefb4436 --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css @@ -0,0 +1,62 @@ +:root { + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, rgb(255, 199, 0), rgb(255, 182, 0), rgb(255, 164, 0), rgb(255, 146, 0), rgb(255, 127, 0), rgb(255, 107, 0), rgb(255, 87, 27), rgb(255, 66, 60), rgb(255, 42, 83), rgb(255, 0, 102) 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), rgb(0, 0, 255) 100%); + --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(42, 0, 0), rgb(66, 0, 0), rgb(90, 0, 0), rgb(114, 0, 0), rgb(137, 0, 0), rgb(161, 0, 0), rgb(184, 0, 0), rgb(208, 0, 0), rgb(231, 0, 0), rgb(255, 0, 0) 45%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-3: radial-gradient(rgb(0, 255, 255) 0%, rgba(0, 255, 255, 0.9), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 30%, rgba(250, 128, 114, 0.1), rgba(250, 128, 114, 0.2), rgba(250, 128, 114, 0.3), rgba(250, 128, 114, 0.4), rgba(250, 128, 114, 0.5), rgba(250, 128, 114, 0.6), rgba(250, 128, 114, 0.7), rgba(250, 128, 114, 0.8), rgba(250, 128, 114, 0.9), rgb(250, 128, 114) 40%); + --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), rgb(217, 212, 0), rgb(227, 213, 0), rgb(237, 213, 0), rgb(246, 214, 0), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, rgb(255, 199, 0), rgb(255, 182, 0), rgb(255, 164, 0), rgb(255, 146, 0), rgb(255, 127, 0), rgb(255, 107, 0), rgb(255, 87, 27), rgb(255, 66, 60), rgb(255, 42, 83), rgb(255, 0, 102) 0deg); + --gradient-prop-5: repeating-linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +:root { + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); +} +} + +@supports (background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg)) { +:root { + --gradient-prop-1: conic-gradient(in oklch, cyan 0deg, gold 45deg, gold 50deg, #f06 180deg, blue 100%); +} +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +:root { + --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); +} +} + +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { +:root { + --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); +} +} + +@supports (background: radial-gradient(in oklch, red, red 1px 2px, red 3px)) { +:root { + --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); +} +} + +@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +:root { + --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); +} +} + +@supports (background: repeating-conic-gradient(in oklch from 0deg, red 0deg, red 0deg 1deg, red 2deg)) { +:root { + --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); +} +} + +@supports (background: repeating-linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { +:root { + --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); +} +} + +@supports (background: repeating-radial-gradient(in oklch, red, red 1px 2px, red 3px)) { +:root { + --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +} +} diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.progressive-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.progressive-false.expect.css new file mode 100644 index 000000000..9a2927e5b --- /dev/null +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.progressive-false.expect.css @@ -0,0 +1,17 @@ +:root { + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, rgb(24, 255, 236), rgb(57, 255, 216), rgb(88, 255, 195), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, rgb(255, 199, 0), rgb(255, 182, 0), rgb(255, 164, 0), rgb(255, 146, 0), rgb(255, 127, 0), rgb(255, 107, 0), rgb(255, 87, 27), rgb(255, 66, 60), rgb(255, 42, 83), rgb(255, 0, 102) 180deg, rgb(244, 0, 128), rgb(230, 0, 153), rgb(214, 0, 176), rgb(195, 0, 197), rgb(174, 0, 216), rgb(151, 0, 233), rgb(127, 0, 245), rgb(99, 0, 254), rgb(67, 0, 255), rgb(0, 0, 255) 100%); + --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); + --gradient-prop-1: conic-gradient(in oklch, cyan 0deg, gold 45deg, gold 50deg, #f06 180deg, blue 100%); + --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(42, 0, 0), rgb(66, 0, 0), rgb(90, 0, 0), rgb(114, 0, 0), rgb(137, 0, 0), rgb(161, 0, 0), rgb(184, 0, 0), rgb(208, 0, 0), rgb(231, 0, 0), rgb(255, 0, 0) 45%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-2: linear-gradient(in oklch 90deg, black 25%, red 45%, blue 50% 75%); + --gradient-prop-3: radial-gradient(rgb(0, 255, 255) 0%, rgba(0, 255, 255, 0.9), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0.7), rgba(0, 255, 255, 0.6), rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.1), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 30%, rgba(250, 128, 114, 0.1), rgba(250, 128, 114, 0.2), rgba(250, 128, 114, 0.3), rgba(250, 128, 114, 0.4), rgba(250, 128, 114, 0.5), rgba(250, 128, 114, 0.6), rgba(250, 128, 114, 0.7), rgba(250, 128, 114, 0.8), rgba(250, 128, 114, 0.9), rgb(250, 128, 114) 40%); + --gradient-prop-3: radial-gradient(in oklch, cyan 0%, transparent 20% 30%, salmon 40%); + --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), rgb(217, 212, 0), rgb(227, 213, 0), rgb(237, 213, 0), rgb(246, 214, 0), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, rgb(255, 199, 0), rgb(255, 182, 0), rgb(255, 164, 0), rgb(255, 146, 0), rgb(255, 127, 0), rgb(255, 107, 0), rgb(255, 87, 27), rgb(255, 66, 60), rgb(255, 42, 83), rgb(255, 0, 102) 0deg); + --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); + --gradient-prop-4: repeating-conic-gradient(in oklch from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg); + --gradient-prop-5: repeating-linear-gradient(90deg, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 50%, rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); + --gradient-prop-5: repeating-linear-gradient(in oklch 90deg, black 25% 50%, blue 50% 75%); + --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); + --gradient-prop-6: repeating-radial-gradient(in oklch, red 0 8%, yellow 8% 16%, blue 16% 24%); +} diff --git a/rollup/configs/externals.mjs b/rollup/configs/externals.mjs index 9dede5460..64412ab76 100644 --- a/rollup/configs/externals.mjs +++ b/rollup/configs/externals.mjs @@ -20,6 +20,7 @@ export const externalsForCLI = [ '@csstools/postcss-color-function', '@csstools/postcss-color-mix-function', '@csstools/postcss-font-format-keywords', + '@csstools/postcss-gradients-interpolation-method', '@csstools/postcss-global-data', '@csstools/postcss-hwb-function', '@csstools/postcss-ic-unit', @@ -102,6 +103,7 @@ export const externalsForPlugin = [ '@csstools/postcss-color-function', '@csstools/postcss-color-mix-function', '@csstools/postcss-font-format-keywords', + '@csstools/postcss-gradients-interpolation-method', '@csstools/postcss-hwb-function', '@csstools/postcss-ic-unit', '@csstools/postcss-is-pseudo-class', From 385181726914bf7a02056a424906a5c06c9db6c1 Mon Sep 17 00:00:00 2001 From: Romain Menke Date: Mon, 27 Mar 2023 22:29:41 +0200 Subject: [PATCH 2/3] one more fix --- .../CHANGELOG.md | 2 +- .../dist/index.cjs | 2 +- .../dist/index.mjs | 2 +- .../src/parse-color-stops.ts | 13 ++++--- .../test/basic.css | 32 +++++++++++++---- .../test/basic.expect.css | 36 +++++++++++++++---- .../test/basic.preserve-false.expect.css | 32 +++++++++++++---- .../test/basic.with-cloned-rules.expect.css | 36 +++++++++++++++---- 8 files changed, 124 insertions(+), 31 deletions(-) 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 8fa4eee95..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?{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 919fa1dd5..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?{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/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 Date: Tue, 28 Mar 2023 09:43:24 +0200 Subject: [PATCH 3/3] cssdb update --- package-lock.json | 156 +++++++----------- plugin-packs/postcss-preset-env/CHANGELOG.md | 1 + plugin-packs/postcss-preset-env/FEATURES.md | 2 + plugin-packs/postcss-preset-env/package.json | 3 +- .../test/basic.vendors-1.expect.css | 12 ++ .../test/basic.vendors-2.expect.css | 26 ++- 6 files changed, 98 insertions(+), 102 deletions(-) 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/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index a7681bcc2..15216246d 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -3,6 +3,7 @@ ### 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) 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/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/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index e8ca99f78..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 @@ -601,6 +601,18 @@ 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 d81488ff8..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,14 +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%); } +}