diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml index 7d8364841..96dcbbab8 100644 --- a/.github/ISSUE_TEMPLATE/css-issue.yml +++ b/.github/ISSUE_TEMPLATE/css-issue.yml @@ -119,6 +119,7 @@ body: - PostCSS Overflow Shorthand - PostCSS Page Break - PostCSS Place + - PostCSS Position Area Property - PostCSS Progressive Custom Properties - PostCSS Pseudo Class Any Link - PostCSS Random Function diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml index 88ea233cf..fdb488208 100644 --- a/.github/ISSUE_TEMPLATE/plugin-issue.yml +++ b/.github/ISSUE_TEMPLATE/plugin-issue.yml @@ -116,6 +116,7 @@ body: - PostCSS Overflow Shorthand - PostCSS Page Break - PostCSS Place + - PostCSS Position Area Property - PostCSS Progressive Custom Properties - PostCSS Pseudo Class Any Link - PostCSS Random Function diff --git a/.github/labeler.yml b/.github/labeler.yml index 42d441585..98cb932c4 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -395,6 +395,12 @@ - plugins/postcss-place/** - experimental/postcss-place/** +"plugins/postcss-position-area-property": + - changed-files: + - any-glob-to-any-file: + - plugins/postcss-position-area-property/** + - experimental/postcss-position-area-property/** + "plugins/postcss-progressive-custom-properties": - changed-files: - any-glob-to-any-file: diff --git a/package-lock.json b/package-lock.json index 2b3eeb15a..de9e85b6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2088,6 +2088,10 @@ "resolved": "plugins/postcss-oklab-function", "link": true }, + "node_modules/@csstools/postcss-position-area-property": { + "resolved": "plugins/postcss-position-area-property", + "link": true + }, "node_modules/@csstools/postcss-progressive-custom-properties": { "resolved": "plugins/postcss-progressive-custom-properties", "link": true @@ -5351,9 +5355,9 @@ "license": "CC0-1.0" }, "node_modules/cssdb": { - "version": "8.4.2", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.4.2.tgz", - "integrity": "sha512-PzjkRkRUS+IHDJohtxkIczlxPPZqRo0nXplsYXOMBRPjcVRjj1W4DfvRgshUYTVuUigU7ptVYkFJQ7abUB0nyg==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.5.1.tgz", + "integrity": "sha512-nFf5vkr7tCF4PZOIqrTlP5Bp+3j+7ad3c0doFlbFIQk0vxcnTriDIF/+qYsZk9EbgX2p8bVJFoLmE3h5qe9jlg==", "funding": [ { "type": "opencollective", @@ -9936,6 +9940,7 @@ "@csstools/postcss-nested-calc": "^4.0.0", "@csstools/postcss-normalize-display-values": "^4.0.0", "@csstools/postcss-oklab-function": "^4.0.12", + "@csstools/postcss-position-area-property": "^0.0.0", "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/postcss-random-function": "^2.0.1", "@csstools/postcss-relative-color-syntax": "^3.0.12", @@ -9950,7 +9955,7 @@ "css-blank-pseudo": "^7.0.1", "css-has-pseudo": "^7.0.3", "css-prefers-color-scheme": "^10.0.0", - "cssdb": "^8.4.2", + "cssdb": "^8.5.1", "postcss-attribute-case-insensitive": "^7.0.1", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^7.0.12", @@ -11695,6 +11700,30 @@ "postcss": "^8.4" } }, + "plugins/postcss-position-area-property": { + "name": "@csstools/postcss-position-area-property", + "version": "0.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "plugins/postcss-progressive-custom-properties": { "name": "@csstools/postcss-progressive-custom-properties", "version": "4.2.1", diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs index 4a0014d49..edfb71395 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("browserslist"),t=require("@csstools/postcss-initial"),i=require("@csstools/postcss-alpha-function"),a=require("postcss-pseudo-class-any-link"),r=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("@csstools/postcss-color-function-display-p3-linear"),d=require("postcss-color-functional-notation"),g=require("@csstools/postcss-color-mix-function"),f=require("@csstools/postcss-color-mix-variadic-function-arguments"),h=require("@csstools/postcss-content-alt-text"),b=require("@csstools/postcss-contrast-color-function"),v=require("postcss-custom-media"),N=require("postcss-custom-properties"),k=require("postcss-custom-selectors"),y=require("postcss-dir-pseudo-class"),w=require("@csstools/postcss-normalize-display-values"),q=require("postcss-double-position-gradients"),x=require("@csstools/postcss-exponential-functions"),F=require("@csstools/postcss-logical-float-and-clear"),$=require("postcss-focus-visible"),O=require("postcss-focus-within"),C=require("@csstools/postcss-font-format-keywords"),S=require("postcss-font-variant"),P=require("@csstools/postcss-gamut-mapping"),A=require("postcss-gap-properties"),E=require("@csstools/postcss-gradients-interpolation-method"),I=require("css-has-pseudo"),L=require("postcss-color-hex-alpha"),B=require("@csstools/postcss-hwb-function"),_=require("@csstools/postcss-ic-unit"),U=require("postcss-image-set-function"),j=require("@csstools/postcss-is-pseudo-class"),M=require("postcss-lab-function"),D=require("@csstools/postcss-light-dark-function"),z=require("@csstools/postcss-logical-overflow"),R=require("@csstools/postcss-logical-overscroll-behavior"),T=require("postcss-logical"),V=require("@csstools/postcss-logical-resize"),H=require("@csstools/postcss-logical-viewport-units"),W=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),G=require("@csstools/postcss-media-minmax"),K=require("@csstools/postcss-nested-calc"),Z=require("postcss-nesting"),Q=require("postcss-selector-not"),J=require("@csstools/postcss-oklab-function"),X=require("postcss-opacity-percentage"),Y=require("postcss-overflow-shorthand"),ss=require("postcss-replace-overflow-wrap"),es=require("postcss-place"),os=require("css-prefers-color-scheme"),ts=require("@csstools/postcss-progressive-custom-properties"),is=require("@csstools/postcss-random-function"),as=require("postcss-color-rebeccapurple"),rs=require("@csstools/postcss-relative-color-syntax"),cs=require("@csstools/postcss-scope-pseudo-class"),ns=require("@csstools/postcss-sign-functions"),ps=require("@csstools/postcss-stepped-value-functions"),ls=require("@csstools/postcss-text-decoration-shorthand"),us=require("@csstools/postcss-trigonometric-functions"),ms=require("@csstools/postcss-unset-value");const ds={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},gs=["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!==ds[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}: ${ds[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))}function stageFromOptions(s,e){let o=2;if(void 0===s.stage)return e.log("Using features from Stage 2 (default)."),o;if(!1===s.stage)o=5;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,5)}return 5===o?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}.`),o}const fs=Symbol("insertBefore"),hs=Symbol("insertAfter"),bs=Symbol("insertOrder"),vs=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?fs:hs,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))}function getOptionsForBrowsersByFeature(s,e,o,t){switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"any-link-pseudo-class":if(s.find(s=>s.startsWith("ie ")||"edge 12"===s||"edge 13"===s||"edge 14"===s||"edge 15"===s||"edge 16"===s||"edge 17"===s||"edge 18"===s))return t.log("- 'any-link-pseudo-class' setting 'subFeatures: { areaHrefNeedsFixing: true }' due to lack of browser support for area[href] 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":case"logical-overflow":case"logical-overscroll-behavior":return"logical"in o?o.logical:{};default:return{}}}const Os=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return Os.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&&Cs.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)}),e}const Cs=/^[0-9|.]+$/;function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[fs]||s[hs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[vs],id:o,stage:6}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:$s.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a){let r,c;return r=getOptionsForBrowsersByFeature(s,o,i,a),r=t?Object.assign({},r,t,featureOptions(e,o.id)):Object.assign({},r,featureOptions(e,o.id)),"progressive-custom-properties"!==o.id&&(r.enableProgressiveCustomProperties=!1),"overflow-wrap-property"===o.id&&"preserve"in r&&(r.method=r.preserve?"copy":"replace"),c=o.plugin.postcss&&"function"==typeof o.plugin?o.plugin(r):o.plugin&&o.plugin.default&&"function"==typeof o.plugin.default&&o.plugin.default.postcss?o.plugin.default(r):o.plugin,{browsers:o.browsers,vendors_implementations:o.vendors_implementations,plugin:c,pluginOptions:r,id:o.id}}function featureOptions(s,e){if(!(e in s))return;const o=s[e];return Array.isArray(o)?o[1]:o}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}const Ss=new Set(["progressive-custom-properties"]);function listFeatures(s,e,t,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers?void 0:e.env,l=e.browsers,u=clamp(0,intOrZero(e.minimumVendorImplementations),3);u>0&&i.log(`Using features with ${u} or more vendor implementations.`);const m=stageFromOptions(e,i),d=prepareFeaturesList([...s,{id:"progressive-custom-properties"}],c,n).map(s=>formatPolyfillableFeature(s)).filter(s=>!!Ss.has(s.id)||(0===u||(!(!s[fs]&&!s[hs])||(u<=s.vendors_implementations||(!0===featureEnabledByOptions(a,s.id)?(i.log(`- '${s.id}' enabled manually even when it lacks the required interop (${s.vendors_implementations} out of ${u}).`),!0):(i.log(`- '${s.id}' disabled because it lacks the required interop (${s.vendors_implementations} out of ${u}).`),!1)))))),g=o(l,{env:p,ignoreUnknownVersions:!0}).filter(s=>Os.includes(s.split(" ")[0]));return d.filter(s=>{if(Ss.has(s.id))return!0;const e=s.stage>=m,o=r||!gs.includes(s.id),t=featureEnabledByOptions(a,s.id),c=!1===t,n=!0===t||e&&o;return c?i.log(`- '${s.id}' disabled manually`):e?o||i.log(`- '${s.id}' disabled because 'enableClientSidePolyfills' is 'false'.`):n?i.log(`- '${s.id}' enabled manually even when it lacks the required stage (${s.stage} out of ${m}).`):i.log(`- '${s.id}' disabled because it lacks the required stage (${s.stage} out of ${m}).`),!c&&n}).map(s=>formatStagedFeature(g,a,s,t,e,i)).filter(s=>{if(Ss.has(s.id))return!0;const e=featureEnabledByOptions(a,s.id);if(!0===e||!1===e)return e;const t=o(s.browsers,{ignoreUnknownVersions:!0}),r=g.filter(s=>t.some(e=>e===s));return r.length>0?i.log(`- '${s.id}' enabled for:\n ${r.join("\n ")}`):i.log(`- '${s.id}' disabled because all targeted browsers support it.`),r.length>0})}function featureEnabledByOptions(s,e){if(!(e in s))return"auto";const o=s[e];return Array.isArray(o)?!0===o[0]||!1!==o[0]&&"auto":Boolean(o)}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}emitLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var Ps=[{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-alpha-function",id:"alpha-function",importName:"postcssAlphaFunction"},{packageName:"@csstools/postcss-color-mix-variadic-function-arguments",id:"color-mix-variadic-function-arguments",importName:"postcssColorMixVariadicFunctionArguments"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"@csstools/postcss-color-function-display-p3-linear",id:"color-function-display-p3-linear",importName:"postcssColorFunctionDisplayP3Linear"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"@csstools/postcss-content-alt-text",id:"content-alt-text",importName:"postcssContentAltText"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"@csstools/postcss-contrast-color-function",id:"contrast-color-function",importName:"postcssContrastColorFunction"},{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:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{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:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{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:"@csstools/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:"@csstools/postcss-light-dark-function",id:"light-dark-function",importName:"postcssLightDarkFunction"},{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-overflow",id:"logical-overflow",importName:"postcssLogicalOverflow"},{packageName:"@csstools/postcss-logical-overscroll-behavior",id:"logical-overscroll-behavior",importName:"postcssLogicalOverscrollBehavor"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/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:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{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"},{packageName:"@csstools/postcss-sign-functions",id:"sign-functions",importName:"postcssSignFunctions"},{packageName:"@csstools/postcss-random-function",id:"random-function",importName:"postcssRandomFunction"},{packageName:"@csstools/postcss-progressive-custom-properties",id:"progressive-custom-properties",importName:"postcssProgressiveCustomProperties",omitTypedOptions:!0,omitDocs:!0}];function getPackageNamesToIds(){const s={};return Ps.forEach(e=>{s[e.packageName]=e.id}),s}function pluginIdHelp(s,e,o){const t=Ps.map(s=>s.id),i=Ps.map(s=>s.packageName),a=getPackageNamesToIds();s.forEach(s=>{if(t.includes(s))return;const r=[...t.map(e=>[e,levenshteinDistance(s,e)]),...i.map(e=>[a[e],levenshteinDistance(s,e)])].sort((s,e)=>s[1]-e[1]).filter(s=>s[1]<10),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void 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`);let n='"';n+=Array.from(c).join('", "'),n+='"',e.warn(o,`Unknown feature: "${s}", did you mean one of: ${n}`)})}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=o=>{const t=new Logger,i=Object(o),a=Object.keys(Object(i.features)),r=i.browsers?void 0:i.env,c=i.browsers,n=initializeSharedOptions(i),p=listFeatures(e,i,n,t),l=p.map(s=>s.plugin);!1!==i.autoprefixer&&l.push(s(Object.assign({env:r,overrideBrowserslist:c},i.autoprefixer))),logFeaturesList(p,i,t);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit(s,{result:e}){pluginIdHelp(a,s,e),i.debug&&t.emitLogs(e),t.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("browserslist"),t=require("@csstools/postcss-initial"),i=require("@csstools/postcss-alpha-function"),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("@csstools/postcss-color-function-display-p3-linear"),d=require("postcss-color-functional-notation"),g=require("@csstools/postcss-color-mix-function"),f=require("@csstools/postcss-color-mix-variadic-function-arguments"),h=require("@csstools/postcss-content-alt-text"),b=require("@csstools/postcss-contrast-color-function"),v=require("postcss-custom-media"),N=require("postcss-custom-properties"),y=require("postcss-custom-selectors"),k=require("postcss-dir-pseudo-class"),w=require("@csstools/postcss-normalize-display-values"),q=require("postcss-double-position-gradients"),x=require("@csstools/postcss-exponential-functions"),F=require("@csstools/postcss-logical-float-and-clear"),$=require("postcss-focus-visible"),O=require("postcss-focus-within"),C=require("@csstools/postcss-font-format-keywords"),S=require("postcss-font-variant"),P=require("@csstools/postcss-gamut-mapping"),_=require("postcss-gap-properties"),A=require("@csstools/postcss-gradients-interpolation-method"),E=require("css-has-pseudo"),I=require("postcss-color-hex-alpha"),L=require("@csstools/postcss-hwb-function"),B=require("@csstools/postcss-ic-unit"),U=require("postcss-image-set-function"),j=require("@csstools/postcss-is-pseudo-class"),M=require("postcss-lab-function"),D=require("@csstools/postcss-light-dark-function"),z=require("@csstools/postcss-logical-overflow"),R=require("@csstools/postcss-logical-overscroll-behavior"),T=require("postcss-logical"),V=require("@csstools/postcss-logical-resize"),H=require("@csstools/postcss-logical-viewport-units"),W=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),G=require("@csstools/postcss-media-minmax"),K=require("@csstools/postcss-nested-calc"),Z=require("postcss-nesting"),Q=require("postcss-selector-not"),J=require("@csstools/postcss-oklab-function"),X=require("postcss-opacity-percentage"),Y=require("postcss-overflow-shorthand"),ss=require("postcss-replace-overflow-wrap"),es=require("postcss-place"),os=require("css-prefers-color-scheme"),ts=require("@csstools/postcss-progressive-custom-properties"),is=require("@csstools/postcss-random-function"),rs=require("postcss-color-rebeccapurple"),as=require("@csstools/postcss-relative-color-syntax"),cs=require("@csstools/postcss-scope-pseudo-class"),ns=require("@csstools/postcss-sign-functions"),ps=require("@csstools/postcss-stepped-value-functions"),ls=require("@csstools/postcss-text-decoration-shorthand"),us=require("@csstools/postcss-trigonometric-functions"),ms=require("@csstools/postcss-unset-value");const ds={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},gs=["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!==ds[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}: ${ds[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))}function stageFromOptions(s,e){let o=2;if(void 0===s.stage)return e.log("Using features from Stage 2 (default)."),o;if(!1===s.stage)o=5;else{let e=parseInt(s.stage,10);Number.isNaN(e)&&(e=0),o=clamp(0,e,5)}return 5===o?e.log('Stage has been disabled, features will be handled via the "features" option.'):e.log(`Using features from Stage ${o}.`),o}const fs=Symbol("insertBefore"),hs=Symbol("insertAfter"),bs=Symbol("insertOrder"),vs=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?fs:hs,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))}function getOptionsForBrowsersByFeature(s,e,o,t){switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"any-link-pseudo-class":if(s.find(s=>s.startsWith("ie ")||"edge 12"===s||"edge 13"===s||"edge 14"===s||"edge 15"===s||"edge 16"===s||"edge 17"===s||"edge 18"===s))return t.log("- 'any-link-pseudo-class' setting 'subFeatures: { areaHrefNeedsFixing: true }' due to lack of browser support for area[href] 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":case"logical-overflow":case"logical-overscroll-behavior":return"logical"in o?o.logical:{};default:return{}}}const Os=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if("position-area-property"===s.id)return["chrome 125","chrome 126","chrome 127","chrome 128","edge 125","edge 126","edge 127","edge 128","and_chr 125","and_chr 126","and_chr 127","and_chr 128","android 125","android 126","android 127","android 128","samsung 27","opera 111","opera 112","opera 113","opera 114","op_mob 83","op_mob 84","op_mob 85"];if(!("browser_support"in s))return["> 0%"];const e=[];return Os.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&&Cs.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)}),e}const Cs=/^[0-9|.]+$/;function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[fs]||s[hs]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[vs],id:o,stage:6}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:$s.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,r){let a,c;return a=getOptionsForBrowsersByFeature(s,o,i,r),a=t?Object.assign({},a,t,featureOptions(e,o.id)):Object.assign({},a,featureOptions(e,o.id)),"progressive-custom-properties"!==o.id&&(a.enableProgressiveCustomProperties=!1),"overflow-wrap-property"===o.id&&"preserve"in a&&(a.method=a.preserve?"copy":"replace"),c=o.plugin.postcss&&"function"==typeof o.plugin?o.plugin(a):o.plugin&&o.plugin.default&&"function"==typeof o.plugin.default&&o.plugin.default.postcss?o.plugin.default(a):o.plugin,{browsers:o.browsers,vendors_implementations:o.vendors_implementations,plugin:c,pluginOptions:a,id:o.id}}function featureOptions(s,e){if(!(e in s))return;const o=s[e];return Array.isArray(o)?o[1]:o}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}const Ss=new Set(["progressive-custom-properties"]);function listFeatures(s,e,t,i){const r=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers?void 0:e.env,l=e.browsers,u=clamp(0,intOrZero(e.minimumVendorImplementations),3);u>0&&i.log(`Using features with ${u} or more vendor implementations.`);const m=stageFromOptions(e,i),d=prepareFeaturesList([...s,{id:"progressive-custom-properties"}],c,n).map(s=>formatPolyfillableFeature(s)).filter(s=>!!Ss.has(s.id)||(0===u||(!(!s[fs]&&!s[hs])||(u<=s.vendors_implementations||(!0===featureEnabledByOptions(r,s.id)?(i.log(`- '${s.id}' enabled manually even when it lacks the required interop (${s.vendors_implementations} out of ${u}).`),!0):(i.log(`- '${s.id}' disabled because it lacks the required interop (${s.vendors_implementations} out of ${u}).`),!1)))))),g=o(l,{env:p,ignoreUnknownVersions:!0}).filter(s=>Os.includes(s.split(" ")[0]));return d.filter(s=>{if(Ss.has(s.id))return!0;const e=s.stage>=m,o=a||!gs.includes(s.id),t=featureEnabledByOptions(r,s.id),c=!1===t,n=!0===t||e&&o;return c?i.log(`- '${s.id}' disabled manually`):e?o||i.log(`- '${s.id}' disabled because 'enableClientSidePolyfills' is 'false'.`):n?i.log(`- '${s.id}' enabled manually even when it lacks the required stage (${s.stage} out of ${m}).`):i.log(`- '${s.id}' disabled because it lacks the required stage (${s.stage} out of ${m}).`),!c&&n}).map(s=>formatStagedFeature(g,r,s,t,e,i)).filter(s=>{if(Ss.has(s.id))return!0;const e=featureEnabledByOptions(r,s.id);if(!0===e||!1===e)return e;const t=o(s.browsers,{ignoreUnknownVersions:!0}),a=g.filter(s=>t.some(e=>e===s));return a.length>0?i.log(`- '${s.id}' enabled for:\n ${a.join("\n ")}`):i.log(`- '${s.id}' disabled because all targeted browsers support it.`),a.length>0})}function featureEnabledByOptions(s,e){if(!(e in s))return"auto";const o=s[e];return Array.isArray(o)?!0===o[0]||!1!==o[0]&&"auto":Boolean(o)}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}emitLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var Ps=[{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-alpha-function",id:"alpha-function",importName:"postcssAlphaFunction"},{packageName:"@csstools/postcss-color-mix-variadic-function-arguments",id:"color-mix-variadic-function-arguments",importName:"postcssColorMixVariadicFunctionArguments"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"@csstools/postcss-color-function-display-p3-linear",id:"color-function-display-p3-linear",importName:"postcssColorFunctionDisplayP3Linear"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"@csstools/postcss-content-alt-text",id:"content-alt-text",importName:"postcssContentAltText"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"@csstools/postcss-contrast-color-function",id:"contrast-color-function",importName:"postcssContrastColorFunction"},{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:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{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:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{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:"@csstools/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:"@csstools/postcss-light-dark-function",id:"light-dark-function",importName:"postcssLightDarkFunction"},{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-overflow",id:"logical-overflow",importName:"postcssLogicalOverflow"},{packageName:"@csstools/postcss-logical-overscroll-behavior",id:"logical-overscroll-behavior",importName:"postcssLogicalOverscrollBehavor"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/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:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{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"},{packageName:"@csstools/postcss-sign-functions",id:"sign-functions",importName:"postcssSignFunctions"},{packageName:"@csstools/postcss-random-function",id:"random-function",importName:"postcssRandomFunction"},{packageName:"@csstools/postcss-progressive-custom-properties",id:"progressive-custom-properties",importName:"postcssProgressiveCustomProperties",omitTypedOptions:!0,omitDocs:!0}];function getPackageNamesToIds(){const s={};return Ps.forEach(e=>{s[e.packageName]=e.id}),s}function pluginIdHelp(s,e,o){const t=Ps.map(s=>s.id),i=Ps.map(s=>s.packageName),r=getPackageNamesToIds();s.forEach(s=>{if(t.includes(s))return;const a=[...t.map(e=>[e,levenshteinDistance(s,e)]),...i.map(e=>[r[e],levenshteinDistance(s,e)])].sort((s,e)=>s[1]-e[1]).filter(s=>s[1]<10),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void 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`);let n='"';n+=Array.from(c).join('", "'),n+='"',e.warn(o,`Unknown feature: "${s}", did you mean one of: ${n}`)})}function levenshteinDistance(s,e){if(!s.length)return e.length;if(!e.length)return s.length;const o=[];for(let t=0;t<=e.length;t++){o[t]=[t];for(let i=1;i<=s.length;i++)o[t][i]=0===t?i:Math.min(o[t-1][i]+1,o[t][i-1]+1,o[t-1][i-1]+(s[i-1]===e[t-1]?0:1))}return o[e.length][s.length]}const creator=o=>{const t=new Logger,i=Object(o),r=Object.keys(Object(i.features)),a=i.browsers?void 0:i.env,c=i.browsers,n=initializeSharedOptions(i),p=listFeatures(e,i,n,t),l=p.map(s=>s.plugin);!1!==i.autoprefixer&&l.push(s(Object.assign({env:a,overrideBrowserslist:c},i.autoprefixer))),logFeaturesList(p,i,t);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit(s,{result:e}){pluginIdHelp(r,s,e),i.debug&&t.emitLogs(e),t.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 1f16fd674..8e4845a05 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 o from"cssdb";import e from"browserslist";import t from"@csstools/postcss-initial";import i from"@csstools/postcss-alpha-function";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import c from"postcss-page-break";import n from"@csstools/postcss-cascade-layers";import p from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"@csstools/postcss-color-function-display-p3-linear";import d from"postcss-color-functional-notation";import f from"@csstools/postcss-color-mix-function";import g from"@csstools/postcss-color-mix-variadic-function-arguments";import h from"@csstools/postcss-content-alt-text";import b from"@csstools/postcss-contrast-color-function";import v from"postcss-custom-media";import N from"postcss-custom-properties";import k from"postcss-custom-selectors";import y from"postcss-dir-pseudo-class";import w from"@csstools/postcss-normalize-display-values";import x from"postcss-double-position-gradients";import F from"@csstools/postcss-exponential-functions";import $ from"@csstools/postcss-logical-float-and-clear";import O from"postcss-focus-visible";import C from"postcss-focus-within";import S from"@csstools/postcss-font-format-keywords";import P from"postcss-font-variant";import A from"@csstools/postcss-gamut-mapping";import E from"postcss-gap-properties";import I from"@csstools/postcss-gradients-interpolation-method";import L from"css-has-pseudo";import B from"postcss-color-hex-alpha";import q from"@csstools/postcss-hwb-function";import _ from"@csstools/postcss-ic-unit";import U from"postcss-image-set-function";import j from"@csstools/postcss-is-pseudo-class";import M from"postcss-lab-function";import D from"@csstools/postcss-light-dark-function";import z from"@csstools/postcss-logical-overflow";import R from"@csstools/postcss-logical-overscroll-behavior";import T from"postcss-logical";import V from"@csstools/postcss-logical-resize";import H from"@csstools/postcss-logical-viewport-units";import W from"@csstools/postcss-media-queries-aspect-ratio-number-values";import G from"@csstools/postcss-media-minmax";import K from"@csstools/postcss-nested-calc";import Z from"postcss-nesting";import Q from"postcss-selector-not";import J from"@csstools/postcss-oklab-function";import X from"postcss-opacity-percentage";import Y from"postcss-overflow-shorthand";import ss from"postcss-replace-overflow-wrap";import os from"postcss-place";import es from"css-prefers-color-scheme";import ts from"@csstools/postcss-progressive-custom-properties";import is from"@csstools/postcss-random-function";import as from"postcss-color-rebeccapurple";import rs from"@csstools/postcss-relative-color-syntax";import cs from"@csstools/postcss-scope-pseudo-class";import ns from"@csstools/postcss-sign-functions";import ps from"@csstools/postcss-stepped-value-functions";import ls from"@csstools/postcss-text-decoration-shorthand";import ms from"@csstools/postcss-trigonometric-functions";import us from"@csstools/postcss-unset-value";const ds={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},fs=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,o,e){if(o.debug){e.log("Enabling the following feature(s):");const t=[],i=[];!1!==o.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!==ds[s.id]&&t.push(s.id)}),i.sort((s,o)=>s.localeCompare(o)),t.sort((s,o)=>s.localeCompare(o)),i.forEach(s=>e.log(s)),t.length&&(e.log("These feature(s) need a browser library to work:"),t.forEach(s=>e.log(` ${s}: ${ds[s]}`)))}}function initializeSharedOptions(s){if("preserve"in s){const o={};return o.preserve=s.preserve,o}return!1}function clamp(s,o,e){return Math.max(s,Math.min(o,e))}function stageFromOptions(s,o){let e=2;if(void 0===s.stage)return o.log("Using features from Stage 2 (default)."),e;if(!1===s.stage)e=5;else{let o=parseInt(s.stage,10);Number.isNaN(o)&&(o=0),e=clamp(0,o,5)}return 5===e?o.log('Stage has been disabled, features will be handled via the "features" option.'):o.log(`Using features from Stage ${e}.`),e}const gs=Symbol("insertBefore"),hs=Symbol("insertAfter"),bs=Symbol("insertOrder"),vs=Symbol("plugin");function getTransformedInsertions(s,o,e){if("insertBefore"!==e&&"insertAfter"!==e)return[];const t="insertBefore"===e?gs:hs,i=[];for(const e in o){if(!Object.hasOwnProperty.call(o,e))continue;if(!s.find(s=>s.id===e))continue;let a=o[e];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s)).sort((s,o)=>featureIsLess(s,o))}function getOptionsForBrowsersByFeature(s,o,e,t){switch(o.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"any-link-pseudo-class":if(s.find(s=>s.startsWith("ie ")||"edge 12"===s||"edge 13"===s||"edge 14"===s||"edge 15"===s||"edge 16"===s||"edge 17"===s||"edge 18"===s))return t.log("- 'any-link-pseudo-class' setting 'subFeatures: { areaHrefNeedsFixing: true }' due to lack of browser support for area[href] 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":case"logical-overflow":case"logical-overscroll-behavior":return"logical"in e?e.logical:{};default:return{}}}const Cs=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const o=[];return Cs.forEach(e=>{if("op_mini"===e&&void 0===s.browser_support[e])return void o.push("op_mini all");const t=s.browser_support[e];"string"==typeof t&&Ss.test(t)?o.push(`${e} < ${s.browser_support[e]}`):o.push(`${e} >= 1`)}),o}const Ss=/^[0-9|.]+$/;function formatPolyfillableFeature(s){const o=getUnsupportedBrowsersByFeature(s);if(s[gs]||s[hs]){let e=s.id;return e=s.insertBefore?`before-${e}`:`after-${e}`,{browsers:o,vendors_implementations:s.vendors_implementations,plugin:s[vs],id:e,stage:6}}return{browsers:o,vendors_implementations:s.vendors_implementations,plugin:Os.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,o,e,t,i,a){let r,c;return r=getOptionsForBrowsersByFeature(s,e,i,a),r=t?Object.assign({},r,t,featureOptions(o,e.id)):Object.assign({},r,featureOptions(o,e.id)),"progressive-custom-properties"!==e.id&&(r.enableProgressiveCustomProperties=!1),"overflow-wrap-property"===e.id&&"preserve"in r&&(r.method=r.preserve?"copy":"replace"),c=e.plugin.postcss&&"function"==typeof e.plugin?e.plugin(r):e.plugin&&e.plugin.default&&"function"==typeof e.plugin.default&&e.plugin.default.postcss?e.plugin.default(r):e.plugin,{browsers:e.browsers,vendors_implementations:e.vendors_implementations,plugin:c,pluginOptions:r,id:e.id}}function featureOptions(s,o){if(!(o in s))return;const e=s[o];return Array.isArray(e)?e[1]:e}function intOrZero(s){const o=parseInt(s,10);return Number.isNaN(o)?0:o}const Ps=new Set(["progressive-custom-properties"]);function listFeatures(s,o,t,i){const a=Object(o.features),r="enableClientSidePolyfills"in o&&o.enableClientSidePolyfills,c=Object(o.insertBefore),n=Object(o.insertAfter),p=o.browsers?void 0:o.env,l=o.browsers,m=clamp(0,intOrZero(o.minimumVendorImplementations),3);m>0&&i.log(`Using features with ${m} or more vendor implementations.`);const u=stageFromOptions(o,i),d=prepareFeaturesList([...s,{id:"progressive-custom-properties"}],c,n).map(s=>formatPolyfillableFeature(s)).filter(s=>!!Ps.has(s.id)||(0===m||(!(!s[gs]&&!s[hs])||(m<=s.vendors_implementations||(!0===featureEnabledByOptions(a,s.id)?(i.log(`- '${s.id}' enabled manually even when it lacks the required interop (${s.vendors_implementations} out of ${m}).`),!0):(i.log(`- '${s.id}' disabled because it lacks the required interop (${s.vendors_implementations} out of ${m}).`),!1)))))),f=e(l,{env:p,ignoreUnknownVersions:!0}).filter(s=>Cs.includes(s.split(" ")[0]));return d.filter(s=>{if(Ps.has(s.id))return!0;const o=s.stage>=u,e=r||!fs.includes(s.id),t=featureEnabledByOptions(a,s.id),c=!1===t,n=!0===t||o&&e;return c?i.log(`- '${s.id}' disabled manually`):o?e||i.log(`- '${s.id}' disabled because 'enableClientSidePolyfills' is 'false'.`):n?i.log(`- '${s.id}' enabled manually even when it lacks the required stage (${s.stage} out of ${u}).`):i.log(`- '${s.id}' disabled because it lacks the required stage (${s.stage} out of ${u}).`),!c&&n}).map(s=>formatStagedFeature(f,a,s,t,o,i)).filter(s=>{if(Ps.has(s.id))return!0;const o=featureEnabledByOptions(a,s.id);if(!0===o||!1===o)return o;const t=e(s.browsers,{ignoreUnknownVersions:!0}),r=f.filter(s=>t.some(o=>o===s));return r.length>0?i.log(`- '${s.id}' enabled for:\n ${r.join("\n ")}`):i.log(`- '${s.id}' disabled because all targeted browsers support it.`),r.length>0})}function featureEnabledByOptions(s,o){if(!(o in s))return"auto";const e=s[o];return Array.isArray(e)?!0===e[0]||!1!==e[0]&&"auto":Boolean(e)}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}emitLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var As=[{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-alpha-function",id:"alpha-function",importName:"postcssAlphaFunction"},{packageName:"@csstools/postcss-color-mix-variadic-function-arguments",id:"color-mix-variadic-function-arguments",importName:"postcssColorMixVariadicFunctionArguments"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"@csstools/postcss-color-function-display-p3-linear",id:"color-function-display-p3-linear",importName:"postcssColorFunctionDisplayP3Linear"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"@csstools/postcss-content-alt-text",id:"content-alt-text",importName:"postcssContentAltText"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"@csstools/postcss-contrast-color-function",id:"contrast-color-function",importName:"postcssContrastColorFunction"},{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:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{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:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{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:"@csstools/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:"@csstools/postcss-light-dark-function",id:"light-dark-function",importName:"postcssLightDarkFunction"},{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-overflow",id:"logical-overflow",importName:"postcssLogicalOverflow"},{packageName:"@csstools/postcss-logical-overscroll-behavior",id:"logical-overscroll-behavior",importName:"postcssLogicalOverscrollBehavor"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/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:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{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"},{packageName:"@csstools/postcss-sign-functions",id:"sign-functions",importName:"postcssSignFunctions"},{packageName:"@csstools/postcss-random-function",id:"random-function",importName:"postcssRandomFunction"},{packageName:"@csstools/postcss-progressive-custom-properties",id:"progressive-custom-properties",importName:"postcssProgressiveCustomProperties",omitTypedOptions:!0,omitDocs:!0}];function getPackageNamesToIds(){const s={};return As.forEach(o=>{s[o.packageName]=o.id}),s}function pluginIdHelp(s,o,e){const t=As.map(s=>s.id),i=As.map(s=>s.packageName),a=getPackageNamesToIds();s.forEach(s=>{if(t.includes(s))return;const r=[...t.map(o=>[o,levenshteinDistance(s,o)]),...i.map(o=>[a[o],levenshteinDistance(s,o)])].sort((s,o)=>s[1]-o[1]).filter(s=>s[1]<10),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void o.warn(e,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let n='"';n+=Array.from(c).join('", "'),n+='"',o.warn(e,`Unknown feature: "${s}", did you mean one of: ${n}`)})}function levenshteinDistance(s,o){if(!s.length)return o.length;if(!o.length)return s.length;const e=[];for(let t=0;t<=o.length;t++){e[t]=[t];for(let i=1;i<=s.length;i++)e[t][i]=0===t?i:Math.min(e[t-1][i]+1,e[t][i-1]+1,e[t-1][i-1]+(s[i-1]===o[t-1]?0:1))}return e[o.length][s.length]}const creator=e=>{const t=new Logger,i=Object(e),a=Object.keys(Object(i.features)),r=i.browsers?void 0:i.env,c=i.browsers,n=initializeSharedOptions(i),p=listFeatures(o,i,n,t),l=p.map(s=>s.plugin);!1!==i.autoprefixer&&l.push(s(Object.assign({env:r,overrideBrowserslist:c},i.autoprefixer))),logFeaturesList(p,i,t);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit(s,{result:o}){pluginIdHelp(a,s,o),i.debug&&t.emitLogs(o),t.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default}; +import s from"autoprefixer";import o from"cssdb";import e from"browserslist";import t from"@csstools/postcss-initial";import i from"@csstools/postcss-alpha-function";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import c from"postcss-page-break";import n from"@csstools/postcss-cascade-layers";import p from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"@csstools/postcss-color-function-display-p3-linear";import d from"postcss-color-functional-notation";import f from"@csstools/postcss-color-mix-function";import g from"@csstools/postcss-color-mix-variadic-function-arguments";import h from"@csstools/postcss-content-alt-text";import b from"@csstools/postcss-contrast-color-function";import v from"postcss-custom-media";import N from"postcss-custom-properties";import y from"postcss-custom-selectors";import k from"postcss-dir-pseudo-class";import w from"@csstools/postcss-normalize-display-values";import x from"postcss-double-position-gradients";import F from"@csstools/postcss-exponential-functions";import $ from"@csstools/postcss-logical-float-and-clear";import O from"postcss-focus-visible";import C from"postcss-focus-within";import S from"@csstools/postcss-font-format-keywords";import P from"postcss-font-variant";import _ from"@csstools/postcss-gamut-mapping";import A from"postcss-gap-properties";import E from"@csstools/postcss-gradients-interpolation-method";import I from"css-has-pseudo";import L from"postcss-color-hex-alpha";import B from"@csstools/postcss-hwb-function";import q from"@csstools/postcss-ic-unit";import U from"postcss-image-set-function";import j from"@csstools/postcss-is-pseudo-class";import M from"postcss-lab-function";import D from"@csstools/postcss-light-dark-function";import z from"@csstools/postcss-logical-overflow";import R from"@csstools/postcss-logical-overscroll-behavior";import T from"postcss-logical";import V from"@csstools/postcss-logical-resize";import H from"@csstools/postcss-logical-viewport-units";import W from"@csstools/postcss-media-queries-aspect-ratio-number-values";import G from"@csstools/postcss-media-minmax";import K from"@csstools/postcss-nested-calc";import Z from"postcss-nesting";import Q from"postcss-selector-not";import J from"@csstools/postcss-oklab-function";import X from"postcss-opacity-percentage";import Y from"postcss-overflow-shorthand";import ss from"postcss-replace-overflow-wrap";import os from"postcss-place";import es from"css-prefers-color-scheme";import ts from"@csstools/postcss-progressive-custom-properties";import is from"@csstools/postcss-random-function";import as from"postcss-color-rebeccapurple";import rs from"@csstools/postcss-relative-color-syntax";import cs from"@csstools/postcss-scope-pseudo-class";import ns from"@csstools/postcss-sign-functions";import ps from"@csstools/postcss-stepped-value-functions";import ls from"@csstools/postcss-text-decoration-shorthand";import ms from"@csstools/postcss-trigonometric-functions";import us from"@csstools/postcss-unset-value";const ds={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README.md#browser","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-focus-within/README.md#browser","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README.md#browser","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README.md#browser"},fs=["blank-pseudo-class","focus-visible-pseudo-class","focus-within-pseudo-class","has-pseudo-class","prefers-color-scheme-query"];function logFeaturesList(s,o,e){if(o.debug){e.log("Enabling the following feature(s):");const t=[],i=[];!1!==o.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!==ds[s.id]&&t.push(s.id)}),i.sort((s,o)=>s.localeCompare(o)),t.sort((s,o)=>s.localeCompare(o)),i.forEach(s=>e.log(s)),t.length&&(e.log("These feature(s) need a browser library to work:"),t.forEach(s=>e.log(` ${s}: ${ds[s]}`)))}}function initializeSharedOptions(s){if("preserve"in s){const o={};return o.preserve=s.preserve,o}return!1}function clamp(s,o,e){return Math.max(s,Math.min(o,e))}function stageFromOptions(s,o){let e=2;if(void 0===s.stage)return o.log("Using features from Stage 2 (default)."),e;if(!1===s.stage)e=5;else{let o=parseInt(s.stage,10);Number.isNaN(o)&&(o=0),e=clamp(0,o,5)}return 5===e?o.log('Stage has been disabled, features will be handled via the "features" option.'):o.log(`Using features from Stage ${e}.`),e}const gs=Symbol("insertBefore"),hs=Symbol("insertAfter"),bs=Symbol("insertOrder"),vs=Symbol("plugin");function getTransformedInsertions(s,o,e){if("insertBefore"!==e&&"insertAfter"!==e)return[];const t="insertBefore"===e?gs:hs,i=[];for(const e in o){if(!Object.hasOwnProperty.call(o,e))continue;if(!s.find(s=>s.id===e))continue;let a=o[e];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s)).sort((s,o)=>featureIsLess(s,o))}function getOptionsForBrowsersByFeature(s,o,e,t){switch(o.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"any-link-pseudo-class":if(s.find(s=>s.startsWith("ie ")||"edge 12"===s||"edge 13"===s||"edge 14"===s||"edge 15"===s||"edge 16"===s||"edge 17"===s||"edge 18"===s))return t.log("- 'any-link-pseudo-class' setting 'subFeatures: { areaHrefNeedsFixing: true }' due to lack of browser support for area[href] 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":case"logical-overflow":case"logical-overscroll-behavior":return"logical"in e?e.logical:{};default:return{}}}const Cs=["and_chr","and_ff","android","chrome","edge","firefox","ie","ios_saf","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if("position-area-property"===s.id)return["chrome 125","chrome 126","chrome 127","chrome 128","edge 125","edge 126","edge 127","edge 128","and_chr 125","and_chr 126","and_chr 127","and_chr 128","android 125","android 126","android 127","android 128","samsung 27","opera 111","opera 112","opera 113","opera 114","op_mob 83","op_mob 84","op_mob 85"];if(!("browser_support"in s))return["> 0%"];const o=[];return Cs.forEach(e=>{if("op_mini"===e&&void 0===s.browser_support[e])return void o.push("op_mini all");const t=s.browser_support[e];"string"==typeof t&&Ss.test(t)?o.push(`${e} < ${s.browser_support[e]}`):o.push(`${e} >= 1`)}),o}const Ss=/^[0-9|.]+$/;function formatPolyfillableFeature(s){const o=getUnsupportedBrowsersByFeature(s);if(s[gs]||s[hs]){let e=s.id;return e=s.insertBefore?`before-${e}`:`after-${e}`,{browsers:o,vendors_implementations:s.vendors_implementations,plugin:s[vs],id:e,stage:6}}return{browsers:o,vendors_implementations:s.vendors_implementations,plugin:Os.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,o,e,t,i,a){let r,c;return r=getOptionsForBrowsersByFeature(s,e,i,a),r=t?Object.assign({},r,t,featureOptions(o,e.id)):Object.assign({},r,featureOptions(o,e.id)),"progressive-custom-properties"!==e.id&&(r.enableProgressiveCustomProperties=!1),"overflow-wrap-property"===e.id&&"preserve"in r&&(r.method=r.preserve?"copy":"replace"),c=e.plugin.postcss&&"function"==typeof e.plugin?e.plugin(r):e.plugin&&e.plugin.default&&"function"==typeof e.plugin.default&&e.plugin.default.postcss?e.plugin.default(r):e.plugin,{browsers:e.browsers,vendors_implementations:e.vendors_implementations,plugin:c,pluginOptions:r,id:e.id}}function featureOptions(s,o){if(!(o in s))return;const e=s[o];return Array.isArray(e)?e[1]:e}function intOrZero(s){const o=parseInt(s,10);return Number.isNaN(o)?0:o}const Ps=new Set(["progressive-custom-properties"]);function listFeatures(s,o,t,i){const a=Object(o.features),r="enableClientSidePolyfills"in o&&o.enableClientSidePolyfills,c=Object(o.insertBefore),n=Object(o.insertAfter),p=o.browsers?void 0:o.env,l=o.browsers,m=clamp(0,intOrZero(o.minimumVendorImplementations),3);m>0&&i.log(`Using features with ${m} or more vendor implementations.`);const u=stageFromOptions(o,i),d=prepareFeaturesList([...s,{id:"progressive-custom-properties"}],c,n).map(s=>formatPolyfillableFeature(s)).filter(s=>!!Ps.has(s.id)||(0===m||(!(!s[gs]&&!s[hs])||(m<=s.vendors_implementations||(!0===featureEnabledByOptions(a,s.id)?(i.log(`- '${s.id}' enabled manually even when it lacks the required interop (${s.vendors_implementations} out of ${m}).`),!0):(i.log(`- '${s.id}' disabled because it lacks the required interop (${s.vendors_implementations} out of ${m}).`),!1)))))),f=e(l,{env:p,ignoreUnknownVersions:!0}).filter(s=>Cs.includes(s.split(" ")[0]));return d.filter(s=>{if(Ps.has(s.id))return!0;const o=s.stage>=u,e=r||!fs.includes(s.id),t=featureEnabledByOptions(a,s.id),c=!1===t,n=!0===t||o&&e;return c?i.log(`- '${s.id}' disabled manually`):o?e||i.log(`- '${s.id}' disabled because 'enableClientSidePolyfills' is 'false'.`):n?i.log(`- '${s.id}' enabled manually even when it lacks the required stage (${s.stage} out of ${u}).`):i.log(`- '${s.id}' disabled because it lacks the required stage (${s.stage} out of ${u}).`),!c&&n}).map(s=>formatStagedFeature(f,a,s,t,o,i)).filter(s=>{if(Ps.has(s.id))return!0;const o=featureEnabledByOptions(a,s.id);if(!0===o||!1===o)return o;const t=e(s.browsers,{ignoreUnknownVersions:!0}),r=f.filter(s=>t.some(o=>o===s));return r.length>0?i.log(`- '${s.id}' enabled for:\n ${r.join("\n ")}`):i.log(`- '${s.id}' disabled because all targeted browsers support it.`),r.length>0})}function featureEnabledByOptions(s,o){if(!(o in s))return"auto";const e=s[o];return Array.isArray(e)?!0===e[0]||!1!==e[0]&&"auto":Boolean(e)}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}emitLogs(s){s&&s.warn(this.logs.join("\n")),this.resetLogger()}}var _s=[{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-alpha-function",id:"alpha-function",importName:"postcssAlphaFunction"},{packageName:"@csstools/postcss-color-mix-variadic-function-arguments",id:"color-mix-variadic-function-arguments",importName:"postcssColorMixVariadicFunctionArguments"},{packageName:"@csstools/postcss-color-mix-function",id:"color-mix",importName:"postcssColorMixFunction"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"@csstools/postcss-color-function-display-p3-linear",id:"color-function-display-p3-linear",importName:"postcssColorFunctionDisplayP3Linear"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"@csstools/postcss-content-alt-text",id:"content-alt-text",importName:"postcssContentAltText"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"@csstools/postcss-contrast-color-function",id:"contrast-color-function",importName:"postcssContrastColorFunction"},{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:"@csstools/postcss-exponential-functions",id:"exponential-functions",importName:"postcssExponentialFunctions"},{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:"@csstools/postcss-gamut-mapping",id:"gamut-mapping",importName:"postcssGamutMapping"},{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:"@csstools/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:"@csstools/postcss-light-dark-function",id:"light-dark-function",importName:"postcssLightDarkFunction"},{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-overflow",id:"logical-overflow",importName:"postcssLogicalOverflow"},{packageName:"@csstools/postcss-logical-overscroll-behavior",id:"logical-overscroll-behavior",importName:"postcssLogicalOverscrollBehavor"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"@csstools/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:"@csstools/postcss-relative-color-syntax",id:"relative-color-syntax",importName:"postcssRelativeColorSyntax"},{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"},{packageName:"@csstools/postcss-sign-functions",id:"sign-functions",importName:"postcssSignFunctions"},{packageName:"@csstools/postcss-random-function",id:"random-function",importName:"postcssRandomFunction"},{packageName:"@csstools/postcss-progressive-custom-properties",id:"progressive-custom-properties",importName:"postcssProgressiveCustomProperties",omitTypedOptions:!0,omitDocs:!0}];function getPackageNamesToIds(){const s={};return _s.forEach(o=>{s[o.packageName]=o.id}),s}function pluginIdHelp(s,o,e){const t=_s.map(s=>s.id),i=_s.map(s=>s.packageName),a=getPackageNamesToIds();s.forEach(s=>{if(t.includes(s))return;const r=[...t.map(o=>[o,levenshteinDistance(s,o)]),...i.map(o=>[a[o],levenshteinDistance(s,o)])].sort((s,o)=>s[1]-o[1]).filter(s=>s[1]<10),c=new Set;for(let s=0;s=3));s++);if(!c.size)return void o.warn(e,`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`);let n='"';n+=Array.from(c).join('", "'),n+='"',o.warn(e,`Unknown feature: "${s}", did you mean one of: ${n}`)})}function levenshteinDistance(s,o){if(!s.length)return o.length;if(!o.length)return s.length;const e=[];for(let t=0;t<=o.length;t++){e[t]=[t];for(let i=1;i<=s.length;i++)e[t][i]=0===t?i:Math.min(e[t-1][i]+1,e[t][i-1]+1,e[t-1][i-1]+(s[i-1]===o[t-1]?0:1))}return e[o.length][s.length]}const creator=e=>{const t=new Logger,i=Object(e),a=Object.keys(Object(i.features)),r=i.browsers?void 0:i.env,c=i.browsers,n=initializeSharedOptions(i),p=listFeatures(o,i,n,t),l=p.map(s=>s.plugin);!1!==i.autoprefixer&&l.push(s(Object.assign({env:r,overrideBrowserslist:c},i.autoprefixer))),logFeaturesList(p,i,t);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit(s,{result:o}){pluginIdHelp(a,s,o),i.debug&&t.emitLogs(o),t.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/package.json b/plugin-packs/postcss-preset-env/package.json index 365f2b393..1e625817c 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -93,7 +93,7 @@ "css-blank-pseudo": "^7.0.1", "css-has-pseudo": "^7.0.3", "css-prefers-color-scheme": "^10.0.0", - "cssdb": "^8.4.2", + "cssdb": "^8.5.1", "postcss-attribute-case-insensitive": "^7.0.1", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^7.0.12", diff --git a/plugin-packs/postcss-preset-env/src/lib/get-unsupported-browsers-by-feature.mjs b/plugin-packs/postcss-preset-env/src/lib/get-unsupported-browsers-by-feature.mjs index 4cc4a7717..c8d2d1fe2 100644 --- a/plugin-packs/postcss-preset-env/src/lib/get-unsupported-browsers-by-feature.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/get-unsupported-browsers-by-feature.mjs @@ -6,6 +6,39 @@ export function getUnsupportedBrowsersByFeature(feature) { return []; } + if (feature.id === 'position-area-property') { + // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position-area#browser_compatibility + // this can't be expressed in CSSDB + return [ + 'chrome 125', + 'chrome 126', + 'chrome 127', + 'chrome 128', + 'edge 125', + 'edge 126', + 'edge 127', + 'edge 128', + 'and_chr 125', + 'and_chr 126', + 'and_chr 127', + 'and_chr 128', + 'android 125', + 'android 126', + 'android 127', + 'android 128', + + 'samsung 27', + + 'opera 111', + 'opera 112', + 'opera 113', + 'opera 114', + 'op_mob 83', + 'op_mob 84', + 'op_mob 85', + ]; + } + if (!('browser_support' in feature)) { // the feature does not work in any browser (yet) return [ '> 0%' ]; 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 7d4c6d824..665a63f4c 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 @@ -47,6 +47,7 @@ export default [ 'overflow-property', 'overflow-wrap-property', 'place-properties', + 'position-area-property', 'system-ui-font-family', 'font-format-keywords', 'display-two-values', diff --git a/plugin-packs/postcss-preset-env/test/_tape.mjs b/plugin-packs/postcss-preset-env/test/_tape.mjs index a56a3a949..384e603a0 100644 --- a/plugin-packs/postcss-preset-env/test/_tape.mjs +++ b/plugin-packs/postcss-preset-env/test/_tape.mjs @@ -44,6 +44,18 @@ postcssTape(plugin)({ browsers: 'chrome >= 38', }, }, + 'basic:ch126': { + message: 'supports { browsers: "chrome >= 126" } usage', + options: { + browsers: 'chrome >= 126', + }, + }, + 'basic:ch130': { + message: 'supports { browsers: "chrome >= 130" } usage', + options: { + browsers: 'chrome >= 130', + }, + }, 'basic:ie10': { message: 'supports { browsers: "ie >= 10" } usage', options: { 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 a1d201283..1fd176504 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -745,15 +745,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 71b1059f3..f2d274ff8 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 @@ -750,15 +750,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css index 08e3532b8..2ae58e38e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.remove.false.expect.css @@ -768,15 +768,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch126.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch126.expect.css new file mode 100644 index 000000000..6d025bea5 --- /dev/null +++ b/plugin-packs/postcss-preset-env/test/basic.ch126.expect.css @@ -0,0 +1,597 @@ +:root { + --order: 1; +} + +.test-custom-property-fallbacks { + --firebrick: lab(40% 56.6 39); +} + +.test-custom-properties { + order: var(--order); +} + +.test-image-set-function { + background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); + order: 2; +} + +.test-logical-properties-and-values { + margin-inline-start: 1px; + margin-inline-end: 2px; + order: 3; + padding-block: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vi + 5px); +} + +.test-nesting-rules { + order: 4; + + & p { + order: 5; + } + + order: 6; +} + +.test-nesting-rules, +#test-is-pseudo { + order: 7; + + & + p { + order: 8; + } + + order: 9; +} + +@media (max-width: 30em) { + .test-custom-media-queries { + order: 10; + } +} + +@media (480px <= width < 768px) { + .test-media-query-ranges { + order: 11; + } +} + +@media (prefers-color-scheme: dark) { + body { + background-color: black; + color: white; + } +} + +@custom-selector :--heading h1, h2, h3, h4, h5, h6, .heading-7; + +.test-custom-selectors:--heading { + order:12; +} + +.test-case-insensitive-attributes[frame=hsides i] { + order: 13; +} + +.test-rebeccapurple-color { + color: rebeccapurple; + order: 14; +} + +.test-hexadecimal-alpha-notation { + background-color: #f3f3f3f3; + color: #0003; + order: 15; +} + +.test-color-functional-notation { + color: rgb(70% 13.5% 13.5% / 50%); + order: 16; +} + +.test-lab-function { + background-color: lab(40% 56.6 39); + color: lch(40% 68.8 34.5 / 50%); + order: 17; +} + +.test-system-ui-font-family { + font-family: system-ui; + order: 18; +} + +.test-font-variant-property { + font-feature-settings: "smcp"; + font-variant-caps: small-caps; + order: 19; +} + +.test-all-property { + all: initial; + order: 20; +} + +.test-matches-pseudo-class:matches(:first-child, .special) { + order: 21; +} + +.test-not-pseudo-class:not(:first-child, .special) { + order: 22; +} + +.test-any-link-pseudo-class:any-link { + order: 23; +} + +.test-dir-pseudo-class:dir(rtl) { + order: 24; +} + +.test-overflow-wrap-property { + order: 25; + overflow-wrap: break-word; +} + +.test-focus-visible-pseudo-class:focus-visible { + order: 26; +} + +.test-double-position-gradients { + background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); +} + +.test-blank-pseudo-class:blank { + background-color: yellow; +} + +.test-has-pseudo-class:has(.inner-class) { + background-color: yellow; +} + +:is(.a, .b):is(:focus, :hover) { + order: 27; +} + +:is(.a > .b) + :is(.c > .d) { + order: 28; +} + +.test-hwb-function { + background-color: hwb(194 0% 0% / .5); +} + +.test-opacity-percent { + opacity: 42%; +} + +.clamp-same-unit { + width: clamp(10px, 64px, 80px); +} + +.complex-clamp { + width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); +} + +.clamp-different-units { + width: clamp(10%, 2px, 4rem); +} + +.mixed-clamp { + grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); + margin: clamp(1rem, 2%, 3rem) 4vh; +} + +.calc-clamp { + margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); +} + +.multiple-calc-clamp { + margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); +} + +.nested-clamp { + font-size: clamp(clamp(1rem, 2vw, 3rem), 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 flow; +} + +.block-flow-root { + display: block flow-root; +} + +.inline-flow { + display: inline flow; +} + +.inline-flow-root { + display: inline flow-root; +} + +.run-in-flow { + display: run-in flow; +} + +.list-item-block-flow { + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline flow list-item; +} + +.block-flex { + display: block flex; +} + +.inline-flex { + display: inline flex; +} + +.block-grid { + display: block grid; +} + +.inline-grid { + display: inline grid; +} + +.inline-ruby { + display: inline ruby; +} + +.block-table { + display: block table; +} + +.inline-table { + display: inline table; +} + +.table-cell-flow { + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text flow; +} + +.logical-float { + float: inline-start; +} + +.color-function { + prop-1: rgb(0, 129, 96); + prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; + prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); + prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22)); + prop-5: color(display-p3 1 1 1 1); + prop-6: color(display-p3 0.34919 0.34919 0.34919); +} + +@media (color-gamut: p3) { +.color-function { + prop-1: color(display-p3 0.00000 0.51872 0.36985); +} +} + +.oklab { + color-1: oklab(40% 0.001236 0.0039); + color-2: oklab(40% 0.1236 0.0039 / 1); + color-3: oklab(40% 0.1236 0.0039 / .5); + color-4: oklab(40% 0.1236 0.0039 / 100%); + color-5: oklab(40% 0.1236 0.0039 / 50%); + color-6: oklab(60% 0.1 0); + color-7: oklab(60% 0.1 0 foo); + color-8: oklab(40.101% 0.1147 0.0453); + color-9: oklab(59.686% 0.1009 0.1192); + color-10: oklab(65.125% -0.0320 0.1274); + color-11: oklab(66.016% -0.1084 0.1114); + color-12: oklab(72.322% -0.0465 -0.1150); +} + +.oklch { + color-1: oklch(40% 0.1268735435 34.568626); + color-2: oklch(40% 0.1268735435 34.568626 / 1); + color-3: oklch(40% 0.1268735435 34.568626 / .5); + color-4: oklch(40% 0.1268735435 34.568626 / 100%); + color-5: oklch(40% 0.1268735435 34.568626 / 50%); + color-6: oklch(60% 0.150 0); + + color-7: rgb(0, 149, 131); + color-8: rgb(0, 149, 131); + color-9: rgb(0, 149, 131); + color-10: rgb(0, 149, 131); + color-11: rgb(0, 149, 131); + + color-12: oklch(60% 0.1250 45); + color-13: oklch(60% 0.1250 45deg); + color-14: oklch(60% 0.1250 0.125turn); + color-15: oklch(60% 0.1250 50grad); + color-16: oklch(60% 0.1250 0.785398rad); + color-17: oklch(60% 0.1250 0.785398unknown); +} + +@media (color-gamut: p3) { +.oklch { + + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); +} +} + +.alpha { + color-1: oklch(from oklch(60% 0.1250 45deg / 0.2) l c h / calc(alpha + 0.1)); + --color-2: oklch(from oklch(60% 0.1250 45deg / 0.2) l c h / calc(alpha + 0.1)); +} + +.ic-unit { + --value-2ic: initial; + text-indent: 2ic; + content: var(--value-2ic); + left: var(--non-existing, 2ic); + width: calc(8ic + 20px); + height: 10px; + margin: 0.5ic 1ic .2ic; + padding: 2 ic; +} + +.unset { + clip: unset; +} + +.mod { + padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%); + transform: rotate(mod(-140deg, -90deg)); + width: mod(mod(-18px, 5px), 5px); +} + +.rem { + padding: 8px rem(18px, 5px) 1px calc(rem(15px, 6px) + 50%); + transform: rotate(rem(-140deg, -90deg)); +} + +.round { + top: round(2.5px, 1px); + right: round(nearest, 2.5px, 1px); + bottom: round(up, 2.5px, 1px); + left: round(down, 2.5px, 1px); + padding-left: round(to-zero, 2.5px, 1px); +} + +.trigonometric { + left: sin(45deg); + left: cos(45deg); + left: tan(45deg); + left: asin(0.5); + left: acos(0.5); + left: atan(10); + left: atan2(-1, 1); + left: asin(sin(pi / 2)); + left: atan2(infinity, -infinity); + left: sin((1deg * 3) + .25turn); +} + +.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(); +} + +@custom-selector :--view-m [data-view-size=m]; + +.view { + :--view-m & { + background: red; + } +} + +.nested-calc { + order: calc(1 * calc(8 / 3 + calc(5 * 10))); +} + +.text-decoration-shorthand { + text-decoration: 3px wavy pink overline; +} + +.stage__container { + inset-inline-start: var(--size, 1rem); +} + +:scope { + content: "plain :scope"; +} + +@scope (.foo) { + :scope { + content: ":scope in @scope"; + } +} + +:scope { + @scope (.foo) { + content: ":scope in @scope, but with nesting"; + } +} + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} + +.color-mix { + color-1: color-mix(in srgb, rgb(255 0 0 / 0), blue 65%); + color-2: color-mix(in lab, rgb(255 0 0 / 0), blue 65%); + color-3: color-mix(in xyz, rgb(255 0 0 / 0), blue 65%); + color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%); + 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%); + color-7: rgb(255, 0, 0); + color-8: rgb(85, 85, 85); +} + +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, rgb(255, 162, 140) 0%, rgb(97, 247, 255) 100%); +} + +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + +.test-css-color-5-interop { + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-5: hwb(from hwb(50deg 20% 30%) h w b); + color-6: lab(from lab(40% 56.6 39) l a b); + color-7: lch(from lch(40% 56.6 39) l c h); + color-8: rgb(131, 27, 0); + color-9: rgb(126, 37, 0); +} + +@media (color-gamut: rec2020) { +.test-css-color-5-interop { + color-8: oklab(from oklab(40% 0.566 0.39) l a b); + color-9: oklch(from oklch(40% 0.566 39deg) l c h); +} +} + +.test-property-with-var { + --opacity: 1; + color: rgba(87 107 149 / var(--opacity)); +} + +.exponential-functions { + width: calc(1px * pow(2, 3)); +} + +.out-of-gamut { + --color: rgb(0, 247, 79); +} + +@media (color-gamut: p3) { +.out-of-gamut { + --color: color(display-p3 0 1 0); +} +} + +.issue-1244--a { + background-image: -ms-linear-gradient(180deg, red 0%, blue 100%); +} + +.issue-1244--b { + background-image: linear-gradient(180deg, red 0%, blue 100%); +} + +.issue-1244--c { + background-image: linear-gradient(180deg, red 0%, blue 100%); +} + +.dark { + color-scheme: dark; +} + +.light { + color-scheme: light; +} + +.schemed-colors { + color: light-dark(rgb(131, 27, 0), magenta); +} + +@media (color-gamut: rec2020) { +.schemed-colors { + color: light-dark(lch(from oklab(40% 0.566 0.39) l c h), magenta); +} +} + +.schemed-prop { + --theme-color: light-dark(cyan, deepskyblue); +} + +.content-alt-text { + content: url(tree.jpg) / "A beautiful tree in a dark forest"; +} + +.content-alt-text { + content: var(--foo) / "A beautiful tree in a dark forest"; +} + +.sign { + order: 1; + z-index: -1; +} + +.abs { + order: 10px; + z-index: 10px; +} + +.random { + color: rgb( + 115, + 185, + 190 + ); + + border-color: oklch( + 40% + 45% + 264deg + ); +} + +.contrast-color { + color: rgb(255, 255, 255); + color: contrast-color(green); +} + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch130.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch130.expect.css new file mode 100644 index 000000000..6d025bea5 --- /dev/null +++ b/plugin-packs/postcss-preset-env/test/basic.ch130.expect.css @@ -0,0 +1,597 @@ +:root { + --order: 1; +} + +.test-custom-property-fallbacks { + --firebrick: lab(40% 56.6 39); +} + +.test-custom-properties { + order: var(--order); +} + +.test-image-set-function { + background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); + order: 2; +} + +.test-logical-properties-and-values { + margin-inline-start: 1px; + margin-inline-end: 2px; + order: 3; + padding-block: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vi + 5px); +} + +.test-nesting-rules { + order: 4; + + & p { + order: 5; + } + + order: 6; +} + +.test-nesting-rules, +#test-is-pseudo { + order: 7; + + & + p { + order: 8; + } + + order: 9; +} + +@media (max-width: 30em) { + .test-custom-media-queries { + order: 10; + } +} + +@media (480px <= width < 768px) { + .test-media-query-ranges { + order: 11; + } +} + +@media (prefers-color-scheme: dark) { + body { + background-color: black; + color: white; + } +} + +@custom-selector :--heading h1, h2, h3, h4, h5, h6, .heading-7; + +.test-custom-selectors:--heading { + order:12; +} + +.test-case-insensitive-attributes[frame=hsides i] { + order: 13; +} + +.test-rebeccapurple-color { + color: rebeccapurple; + order: 14; +} + +.test-hexadecimal-alpha-notation { + background-color: #f3f3f3f3; + color: #0003; + order: 15; +} + +.test-color-functional-notation { + color: rgb(70% 13.5% 13.5% / 50%); + order: 16; +} + +.test-lab-function { + background-color: lab(40% 56.6 39); + color: lch(40% 68.8 34.5 / 50%); + order: 17; +} + +.test-system-ui-font-family { + font-family: system-ui; + order: 18; +} + +.test-font-variant-property { + font-feature-settings: "smcp"; + font-variant-caps: small-caps; + order: 19; +} + +.test-all-property { + all: initial; + order: 20; +} + +.test-matches-pseudo-class:matches(:first-child, .special) { + order: 21; +} + +.test-not-pseudo-class:not(:first-child, .special) { + order: 22; +} + +.test-any-link-pseudo-class:any-link { + order: 23; +} + +.test-dir-pseudo-class:dir(rtl) { + order: 24; +} + +.test-overflow-wrap-property { + order: 25; + overflow-wrap: break-word; +} + +.test-focus-visible-pseudo-class:focus-visible { + order: 26; +} + +.test-double-position-gradients { + background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg); +} + +.test-blank-pseudo-class:blank { + background-color: yellow; +} + +.test-has-pseudo-class:has(.inner-class) { + background-color: yellow; +} + +:is(.a, .b):is(:focus, :hover) { + order: 27; +} + +:is(.a > .b) + :is(.c > .d) { + order: 28; +} + +.test-hwb-function { + background-color: hwb(194 0% 0% / .5); +} + +.test-opacity-percent { + opacity: 42%; +} + +.clamp-same-unit { + width: clamp(10px, 64px, 80px); +} + +.complex-clamp { + width: clamp(calc(100% - 10px), min(10px, 100%), max(40px, 4em)); +} + +.clamp-different-units { + width: clamp(10%, 2px, 4rem); +} + +.mixed-clamp { + grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr); + margin: clamp(1rem, 2%, 3rem) 4vh; +} + +.calc-clamp { + margin: 0 40px 0 calc(-1 * clamp(32px, 16vw, 64px)); +} + +.multiple-calc-clamp { + margin: calc(-1 * clamp(1px, 2vw, 3px)) calc(-1 * clamp(4px, 5vw, 6px)); +} + +.nested-clamp { + font-size: clamp(clamp(1rem, 2vw, 3rem), 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 flow; +} + +.block-flow-root { + display: block flow-root; +} + +.inline-flow { + display: inline flow; +} + +.inline-flow-root { + display: inline flow-root; +} + +.run-in-flow { + display: run-in flow; +} + +.list-item-block-flow { + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline flow list-item; +} + +.block-flex { + display: block flex; +} + +.inline-flex { + display: inline flex; +} + +.block-grid { + display: block grid; +} + +.inline-grid { + display: inline grid; +} + +.inline-ruby { + display: inline ruby; +} + +.block-table { + display: block table; +} + +.inline-table { + display: inline table; +} + +.table-cell-flow { + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text flow; +} + +.logical-float { + float: inline-start; +} + +.color-function { + prop-1: rgb(0, 129, 96); + prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; + prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); + prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22)); + prop-5: color(display-p3 1 1 1 1); + prop-6: color(display-p3 0.34919 0.34919 0.34919); +} + +@media (color-gamut: p3) { +.color-function { + prop-1: color(display-p3 0.00000 0.51872 0.36985); +} +} + +.oklab { + color-1: oklab(40% 0.001236 0.0039); + color-2: oklab(40% 0.1236 0.0039 / 1); + color-3: oklab(40% 0.1236 0.0039 / .5); + color-4: oklab(40% 0.1236 0.0039 / 100%); + color-5: oklab(40% 0.1236 0.0039 / 50%); + color-6: oklab(60% 0.1 0); + color-7: oklab(60% 0.1 0 foo); + color-8: oklab(40.101% 0.1147 0.0453); + color-9: oklab(59.686% 0.1009 0.1192); + color-10: oklab(65.125% -0.0320 0.1274); + color-11: oklab(66.016% -0.1084 0.1114); + color-12: oklab(72.322% -0.0465 -0.1150); +} + +.oklch { + color-1: oklch(40% 0.1268735435 34.568626); + color-2: oklch(40% 0.1268735435 34.568626 / 1); + color-3: oklch(40% 0.1268735435 34.568626 / .5); + color-4: oklch(40% 0.1268735435 34.568626 / 100%); + color-5: oklch(40% 0.1268735435 34.568626 / 50%); + color-6: oklch(60% 0.150 0); + + color-7: rgb(0, 149, 131); + color-8: rgb(0, 149, 131); + color-9: rgb(0, 149, 131); + color-10: rgb(0, 149, 131); + color-11: rgb(0, 149, 131); + + color-12: oklch(60% 0.1250 45); + color-13: oklch(60% 0.1250 45deg); + color-14: oklch(60% 0.1250 0.125turn); + color-15: oklch(60% 0.1250 50grad); + color-16: oklch(60% 0.1250 0.785398rad); + color-17: oklch(60% 0.1250 0.785398unknown); +} + +@media (color-gamut: p3) { +.oklch { + + color-7: oklch(60% 0.1250 180); + color-8: oklch(60% 0.1250 180deg); + color-9: oklch(60% 0.1250 0.5turn); + color-10: oklch(60% 0.1250 200grad); + color-11: oklch(60% 0.1250 3.14159rad); +} +} + +.alpha { + color-1: oklch(from oklch(60% 0.1250 45deg / 0.2) l c h / calc(alpha + 0.1)); + --color-2: oklch(from oklch(60% 0.1250 45deg / 0.2) l c h / calc(alpha + 0.1)); +} + +.ic-unit { + --value-2ic: initial; + text-indent: 2ic; + content: var(--value-2ic); + left: var(--non-existing, 2ic); + width: calc(8ic + 20px); + height: 10px; + margin: 0.5ic 1ic .2ic; + padding: 2 ic; +} + +.unset { + clip: unset; +} + +.mod { + padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%); + transform: rotate(mod(-140deg, -90deg)); + width: mod(mod(-18px, 5px), 5px); +} + +.rem { + padding: 8px rem(18px, 5px) 1px calc(rem(15px, 6px) + 50%); + transform: rotate(rem(-140deg, -90deg)); +} + +.round { + top: round(2.5px, 1px); + right: round(nearest, 2.5px, 1px); + bottom: round(up, 2.5px, 1px); + left: round(down, 2.5px, 1px); + padding-left: round(to-zero, 2.5px, 1px); +} + +.trigonometric { + left: sin(45deg); + left: cos(45deg); + left: tan(45deg); + left: asin(0.5); + left: acos(0.5); + left: atan(10); + left: atan2(-1, 1); + left: asin(sin(pi / 2)); + left: atan2(infinity, -infinity); + left: sin((1deg * 3) + .25turn); +} + +.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(); +} + +@custom-selector :--view-m [data-view-size=m]; + +.view { + :--view-m & { + background: red; + } +} + +.nested-calc { + order: calc(1 * calc(8 / 3 + calc(5 * 10))); +} + +.text-decoration-shorthand { + text-decoration: 3px wavy pink overline; +} + +.stage__container { + inset-inline-start: var(--size, 1rem); +} + +:scope { + content: "plain :scope"; +} + +@scope (.foo) { + :scope { + content: ":scope in @scope"; + } +} + +:scope { + @scope (.foo) { + content: ":scope in @scope, but with nesting"; + } +} + +@media (min-aspect-ratio: 1.77) { + /* media query aspect ratio : */ +} + +.color-mix { + color-1: color-mix(in srgb, rgb(255 0 0 / 0), blue 65%); + color-2: color-mix(in lab, rgb(255 0 0 / 0), blue 65%); + color-3: color-mix(in xyz, rgb(255 0 0 / 0), blue 65%); + color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%); + 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%); + color-7: rgb(255, 0, 0); + color-8: rgb(85, 85, 85); +} + +.gradients-interpolation-method { + --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, rgb(255, 162, 140) 0%, rgb(97, 247, 255) 100%); +} + +@media (color-gamut: rec2020) { +.gradients-interpolation-method { + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); +} +} + +.test-css-color-5-interop { + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-5: hwb(from hwb(50deg 20% 30%) h w b); + color-6: lab(from lab(40% 56.6 39) l a b); + color-7: lch(from lch(40% 56.6 39) l c h); + color-8: rgb(131, 27, 0); + color-9: rgb(126, 37, 0); +} + +@media (color-gamut: rec2020) { +.test-css-color-5-interop { + color-8: oklab(from oklab(40% 0.566 0.39) l a b); + color-9: oklch(from oklch(40% 0.566 39deg) l c h); +} +} + +.test-property-with-var { + --opacity: 1; + color: rgba(87 107 149 / var(--opacity)); +} + +.exponential-functions { + width: calc(1px * pow(2, 3)); +} + +.out-of-gamut { + --color: rgb(0, 247, 79); +} + +@media (color-gamut: p3) { +.out-of-gamut { + --color: color(display-p3 0 1 0); +} +} + +.issue-1244--a { + background-image: -ms-linear-gradient(180deg, red 0%, blue 100%); +} + +.issue-1244--b { + background-image: linear-gradient(180deg, red 0%, blue 100%); +} + +.issue-1244--c { + background-image: linear-gradient(180deg, red 0%, blue 100%); +} + +.dark { + color-scheme: dark; +} + +.light { + color-scheme: light; +} + +.schemed-colors { + color: light-dark(rgb(131, 27, 0), magenta); +} + +@media (color-gamut: rec2020) { +.schemed-colors { + color: light-dark(lch(from oklab(40% 0.566 0.39) l c h), magenta); +} +} + +.schemed-prop { + --theme-color: light-dark(cyan, deepskyblue); +} + +.content-alt-text { + content: url(tree.jpg) / "A beautiful tree in a dark forest"; +} + +.content-alt-text { + content: var(--foo) / "A beautiful tree in a dark forest"; +} + +.sign { + order: 1; + z-index: -1; +} + +.abs { + order: 10px; + z-index: 10px; +} + +.random { + color: rgb( + 115, + 185, + 190 + ); + + border-color: oklch( + 40% + 45% + 264deg + ); +} + +.contrast-color { + color: rgb(255, 255, 255); + color: contrast-color(green); +} + +.position-area { + position-area: start; +} 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 f4c1c38a5..00e32eee2 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -657,15 +657,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 7f27daa23..f7d4671dd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -555,3 +555,7 @@ .contrast-color { color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css index c04784de6..cddc9e70d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.edge16.expect.css @@ -739,15 +739,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 8177f0b50..b6f366737 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -763,15 +763,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 0fad71fd1..8d3f3a6f0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -656,15 +656,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 3acdeb907..7dd17ed7f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -651,15 +651,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css index 9d7466a24..4048e0695 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.all-browsers-have-support.expect.css @@ -613,15 +613,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 e86d3ae41..f89a626c7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -759,15 +759,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 89a4ef85c..318cf05f1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -783,15 +783,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 9317ce8cb..f4898ca98 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 @@ -753,15 +753,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 4ec2b8daf..3853a003b 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 @@ -561,3 +561,7 @@ .contrast-color { color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 002a74557..13111d7a6 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 @@ -742,15 +742,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 index 8aabec53b..c73b5d837 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -872,14 +872,18 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); } + +.position-area { + position-area: start; +} 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 e937e9e5c..896e53937 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 @@ -1260,9 +1260,9 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); color: rgb( random(--r, 0, 255, 5), @@ -1270,12 +1270,12 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe random(--b, 0, 255, 5) ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); border-color: oklch( - 55% - 30% - 336deg + 40% + 45% + 264deg ); border-color: oklch( @@ -1289,3 +1289,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 52e784429..db7a20f62 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -638,15 +638,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 c44025698..8664af32b 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 @@ -652,15 +652,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 427d716aa..49937b1a6 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 @@ -647,15 +647,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 fd2f88984..0623dd9df 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -759,15 +759,19 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css index 18d6cb81d..322b32902 100644 --- a/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.supports-query.expect.css @@ -642,15 +642,19 @@ .random { color: rgb( - 70, - 100, - 25 + 115, + 185, + 190 ); - border-color: rgb(156, 84, 140); + border-color: rgb(17, 58, 166); } .contrast-color { color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 1a7a6de8a..33e7c0162 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 @@ -752,3 +752,7 @@ color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 cf9761b2b..33e7c0162 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 @@ -749,5 +749,10 @@ } .contrast-color { + color: rgb(255, 255, 255); color: contrast-color(green); } + +.position-area { + position-area: start; +} 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 69ee43f9c..9da18bf1e 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 @@ -745,3 +745,7 @@ .contrast-color { color: contrast-color(green); } + +.position-area { + position-area: start; +} diff --git a/plugins/postcss-position-area-property/.gitignore b/plugins/postcss-position-area-property/.gitignore new file mode 100644 index 000000000..e5b28db4a --- /dev/null +++ b/plugins/postcss-position-area-property/.gitignore @@ -0,0 +1,6 @@ +node_modules +package-lock.json +yarn.lock +*.result.css +*.result.css.map +*.result.html diff --git a/plugins/postcss-position-area-property/.nvmrc b/plugins/postcss-position-area-property/.nvmrc new file mode 100644 index 000000000..28d6ff1c8 --- /dev/null +++ b/plugins/postcss-position-area-property/.nvmrc @@ -0,0 +1 @@ +v25.1.0 diff --git a/plugins/postcss-position-area-property/CHANGELOG.md b/plugins/postcss-position-area-property/CHANGELOG.md new file mode 100644 index 000000000..ad7453683 --- /dev/null +++ b/plugins/postcss-position-area-property/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS Position Area Property + +### Unreleased (major) + +- Initial version diff --git a/plugins/postcss-position-area-property/INSTALL.md b/plugins/postcss-position-area-property/INSTALL.md new file mode 100644 index 000000000..fd4b0b433 --- /dev/null +++ b/plugins/postcss-position-area-property/INSTALL.md @@ -0,0 +1,235 @@ +# Installing PostCSS Position Area Property + +[PostCSS Position Area Property] runs in all Node environments, with special instructions for: + +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) +- [Webpack](#webpack) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) + + + +## Node + +Add [PostCSS Position Area Property] to your project: + +```bash +npm install postcss @csstools/postcss-position-area-property --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +// commonjs +const postcss = require('postcss'); +const postcssPositionAreaProperty = require('@csstools/postcss-position-area-property'); + +postcss([ + postcssPositionAreaProperty(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +```js +// esm +import postcss from 'postcss'; +import postcssPositionAreaProperty from '@csstools/postcss-position-area-property'; + +postcss([ + postcssPositionAreaProperty(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +## PostCSS CLI + +Add [PostCSS CLI] to your project: + +```bash +npm install postcss-cli @csstools/postcss-position-area-property --save-dev +``` + +Use [PostCSS Position Area Property] in your `postcss.config.js` configuration file: + +```js +const postcssPositionAreaProperty = require('@csstools/postcss-position-area-property'); + +module.exports = { + plugins: [ + postcssPositionAreaProperty(/* pluginOptions */) + ] +} +``` + +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +```bash +npm install @csstools/postcss-position-area-property --save-dev +``` + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-position-area-property": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-position-area-property": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + +## Webpack + +_Webpack version 5_ + +Add [PostCSS Loader] to your project: + +```bash +npm install postcss-loader @csstools/postcss-position-area-property --save-dev +``` + +Use [PostCSS Position Area Property] in your Webpack configuration: + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + // Other plugins, + [ + "@csstools/postcss-position-area-property", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, +}; +``` + +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +```bash +npm install @csstools/postcss-position-area-property --save-dev +``` + +Use [PostCSS Position Area Property] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-position-area-property" + ] +} +``` + +```json5 +{ + "plugins": [ + [ + "@csstools/postcss-position-area-property", + { + // Optionally add plugin options + } + ] + ] +} +``` + +## Gulp + +Add [Gulp PostCSS] to your project: + +```bash +npm install gulp-postcss @csstools/postcss-position-area-property --save-dev +``` + +Use [PostCSS Position Area Property] in your Gulpfile: + +```js +const postcss = require('gulp-postcss'); +const postcssPositionAreaProperty = require('@csstools/postcss-position-area-property'); + +gulp.task('css', function () { + var plugins = [ + postcssPositionAreaProperty(/* pluginOptions */) + ]; + + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); +}); +``` + +## Grunt + +Add [Grunt PostCSS] to your project: + +```bash +npm install grunt-postcss @csstools/postcss-position-area-property --save-dev +``` + +Use [PostCSS Position Area Property] in your Gruntfile: + +```js +const postcssPositionAreaProperty = require('@csstools/postcss-position-area-property'); + +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + processors: [ + postcssPositionAreaProperty(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } +}); +``` + +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS CLI]: https://github.com/postcss/postcss-cli +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Position Area Property]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-position-area-property +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-position-area-property/LICENSE.md b/plugins/postcss-position-area-property/LICENSE.md new file mode 100644 index 000000000..e8ae93b9f --- /dev/null +++ b/plugins/postcss-position-area-property/LICENSE.md @@ -0,0 +1,18 @@ +MIT No Attribution (MIT-0) + +Copyright © CSSTools Contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the “Software”), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/plugins/postcss-position-area-property/README.md b/plugins/postcss-position-area-property/README.md new file mode 100644 index 000000000..93d8eedc3 --- /dev/null +++ b/plugins/postcss-position-area-property/README.md @@ -0,0 +1,61 @@ +# PostCSS Position Area Property [][PostCSS] + +[][npm-url] [][cli-url] [][discord]

[][css-url] [][css-url] + +```bash +npm install @csstools/postcss-position-area-property --save-dev +``` + +[PostCSS Position Area Property] lets you fallback `position-area` to the alternate name `inset-area` following the [CSS Specification]. + +```css +.foo { + position-area: start; +} + +/* becomes */ + +.foo { + inset-area: start; + position-area: start; +} +``` + +## Usage + +Add [PostCSS Position Area Property] to your project: + +```bash +npm install postcss @csstools/postcss-position-area-property --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssPositionAreaProperty = require('@csstools/postcss-position-area-property'); + +postcss([ + postcssPositionAreaProperty(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Position Area Property] runs in all Node environments, with special +instructions for: + +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#position-area +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-position-area-property + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Position Area Property]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-position-area-property +[CSS Specification]: https://drafts.csswg.org/css-anchor-position/#position-area diff --git a/plugins/postcss-position-area-property/api-extractor.json b/plugins/postcss-position-area-property/api-extractor.json new file mode 100644 index 000000000..42058be51 --- /dev/null +++ b/plugins/postcss-position-area-property/api-extractor.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "../../api-extractor.json" +} diff --git a/plugins/postcss-position-area-property/dist/index.cjs b/plugins/postcss-position-area-property/dist/index.cjs new file mode 100644 index 000000000..5dfd00b8b --- /dev/null +++ b/plugins/postcss-position-area-property/dist/index.cjs @@ -0,0 +1 @@ +"use strict";const s=/^position-area$/i,creator=()=>({postcssPlugin:"postcss-position-area-property",Declaration(o){s.test(o.prop)&&o.cloneBefore({prop:"inset-area",value:o.value})}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-position-area-property/dist/index.d.ts b/plugins/postcss-position-area-property/dist/index.d.ts new file mode 100644 index 000000000..8a5d53e0a --- /dev/null +++ b/plugins/postcss-position-area-property/dist/index.d.ts @@ -0,0 +1,9 @@ +import type { PluginCreator } from 'postcss'; + +declare const creator: PluginCreator; +export default creator; + +/** postcss-position-area-property plugin options */ +export declare type pluginOptions = never; + +export { } diff --git a/plugins/postcss-position-area-property/dist/index.mjs b/plugins/postcss-position-area-property/dist/index.mjs new file mode 100644 index 000000000..9dc05288f --- /dev/null +++ b/plugins/postcss-position-area-property/dist/index.mjs @@ -0,0 +1 @@ +const o=/^position-area$/i,creator=()=>({postcssPlugin:"postcss-position-area-property",Declaration(s){o.test(s.prop)&&s.cloneBefore({prop:"inset-area",value:s.value})}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-position-area-property/docs/README.md b/plugins/postcss-position-area-property/docs/README.md new file mode 100644 index 000000000..610e30e20 --- /dev/null +++ b/plugins/postcss-position-area-property/docs/README.md @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + +

+ +[] lets you fallback `position-area` to the alternate name `inset-area` following the [CSS Specification]. + +```css + + +/* becomes */ + + +``` + + + + + + +[CSS Specification]: diff --git a/plugins/postcss-position-area-property/package.json b/plugins/postcss-position-area-property/package.json new file mode 100644 index 000000000..54b6f6f15 --- /dev/null +++ b/plugins/postcss-position-area-property/package.json @@ -0,0 +1,83 @@ +{ + "name": "@csstools/postcss-position-area-property", + "description": "Fallback `position-area` to the alternate name `inset-area`", + "version": "0.0.0", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], + "license": "MIT-0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": ">=18" + }, + "type": "module", + "main": "dist/index.cjs", + "module": "dist/index.mjs", + "exports": { + ".": { + "import": { + "types": "./dist/index.d.ts", + "default": "./dist/index.mjs" + }, + "require": { + "default": "./dist/index.cjs" + } + } + }, + "files": [ + "CHANGELOG.md", + "LICENSE.md", + "README.md", + "dist" + ], + "peerDependencies": { + "postcss": "^8.4" + }, + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "scripts": { + "build": "rollup -c ../../rollup/default.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", + "lint": "node ../../.github/bin/format-package-json.mjs", + "prepublishOnly": "npm run build && npm run test", + "test": "node --test", + "test:rewrite-expects": "REWRITE_EXPECTS=true node --test" + }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-position-area-property#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-position-area-property" + }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", + "keywords": [ + "postcss-plugin" + ], + "csstools": { + "cssdbId": "position-area", + "exportName": "postcssPositionAreaProperty", + "humanReadableName": "PostCSS Position Area Property", + "specUrl": "https://drafts.csswg.org/css-anchor-position/#position-area" + }, + "volta": { + "extends": "../../package.json" + } +} diff --git a/plugins/postcss-position-area-property/src/index.ts b/plugins/postcss-position-area-property/src/index.ts new file mode 100644 index 000000000..3728f47e6 --- /dev/null +++ b/plugins/postcss-position-area-property/src/index.ts @@ -0,0 +1,26 @@ +import type { PluginCreator } from 'postcss'; + +/** postcss-position-area-property plugin options */ +export type pluginOptions = never; + +const POSITION_AREA_REGEX = /^position-area$/i; + +const creator: PluginCreator = () => { + return { + postcssPlugin: 'postcss-position-area-property', + Declaration(decl): void { + if (!POSITION_AREA_REGEX.test(decl.prop)) { + return; + } + + decl.cloneBefore({ + prop: 'inset-area', + value: decl.value, + }); + }, + }; +}; + +creator.postcss = true; + +export default creator; diff --git a/plugins/postcss-position-area-property/test/_import.mjs b/plugins/postcss-position-area-property/test/_import.mjs new file mode 100644 index 000000000..ef5639ae9 --- /dev/null +++ b/plugins/postcss-position-area-property/test/_import.mjs @@ -0,0 +1,10 @@ +import assert from 'node:assert/strict'; +import test from 'node:test'; +import plugin from '@csstools/postcss-position-area-property'; + +test('import', () => { + plugin(); + assert.ok(plugin.postcss, 'should have "postcss flag"'); + assert.equal(typeof plugin, 'function', 'should return a function'); +}); + diff --git a/plugins/postcss-position-area-property/test/_require.cjs b/plugins/postcss-position-area-property/test/_require.cjs new file mode 100644 index 000000000..15c7128b9 --- /dev/null +++ b/plugins/postcss-position-area-property/test/_require.cjs @@ -0,0 +1,9 @@ +const assert = require('node:assert/strict'); +const test = require('node:test'); +const plugin = require('@csstools/postcss-position-area-property'); + +test('require', () => { + plugin(); + assert.ok(plugin.postcss, 'should have "postcss flag"'); + assert.equal(typeof plugin, 'function', 'should return a function'); +}); diff --git a/plugins/postcss-position-area-property/test/_tape.mjs b/plugins/postcss-position-area-property/test/_tape.mjs new file mode 100644 index 000000000..6a0cd17e7 --- /dev/null +++ b/plugins/postcss-position-area-property/test/_tape.mjs @@ -0,0 +1,11 @@ +import { postcssTape } from '@csstools/postcss-tape'; +import plugin from '@csstools/postcss-position-area-property'; + +postcssTape(plugin)({ + basic: { + message: 'supports basic usage', + }, + 'examples/example': { + message: 'minimal example', + }, +}); diff --git a/plugins/postcss-position-area-property/test/basic.css b/plugins/postcss-position-area-property/test/basic.css new file mode 100644 index 000000000..300685bad --- /dev/null +++ b/plugins/postcss-position-area-property/test/basic.css @@ -0,0 +1,7 @@ +.foo { + position-area: top left; +} + +.foo { + position-Area: top left; +} diff --git a/plugins/postcss-position-area-property/test/basic.expect.css b/plugins/postcss-position-area-property/test/basic.expect.css new file mode 100644 index 000000000..60797c098 --- /dev/null +++ b/plugins/postcss-position-area-property/test/basic.expect.css @@ -0,0 +1,9 @@ +.foo { + inset-area: top left; + position-area: top left; +} + +.foo { + inset-area: top left; + position-Area: top left; +} diff --git a/plugins/postcss-position-area-property/test/examples/example.css b/plugins/postcss-position-area-property/test/examples/example.css new file mode 100644 index 000000000..d1ab71d6c --- /dev/null +++ b/plugins/postcss-position-area-property/test/examples/example.css @@ -0,0 +1,3 @@ +.foo { + position-area: start; +} diff --git a/plugins/postcss-position-area-property/test/examples/example.expect.css b/plugins/postcss-position-area-property/test/examples/example.expect.css new file mode 100644 index 000000000..91aac120d --- /dev/null +++ b/plugins/postcss-position-area-property/test/examples/example.expect.css @@ -0,0 +1,4 @@ +.foo { + inset-area: start; + position-area: start; +} diff --git a/plugins/postcss-position-area-property/tsconfig.json b/plugins/postcss-position-area-property/tsconfig.json new file mode 100644 index 000000000..500af6d26 --- /dev/null +++ b/plugins/postcss-position-area-property/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": ".", + "strict": true + }, + "include": ["./src/**/*"], + "exclude": ["dist"] +} diff --git a/rollup/configs/externals.mjs b/rollup/configs/externals.mjs index 264a3b701..03066bdc5 100644 --- a/rollup/configs/externals.mjs +++ b/rollup/configs/externals.mjs @@ -53,6 +53,7 @@ export const externalsForCLI = [ '@csstools/postcss-nested-calc', '@csstools/postcss-normalize-display-values', '@csstools/postcss-oklab-function', + '@csstools/postcss-position-area-property', '@csstools/postcss-progressive-custom-properties', '@csstools/postcss-random-function', '@csstools/postcss-rebase-url', @@ -160,6 +161,7 @@ export const externalsForPlugin = [ '@csstools/postcss-nested-calc', '@csstools/postcss-normalize-display-values', '@csstools/postcss-oklab-function', + '@csstools/postcss-position-area-property', '@csstools/postcss-progressive-custom-properties', '@csstools/postcss-random-function', '@csstools/postcss-rebase-url',