diff --git a/cli/csstools-cli/CHANGELOG.md b/cli/csstools-cli/CHANGELOG.md index 1f2f27648..776da5d71 100644 --- a/cli/csstools-cli/CHANGELOG.md +++ b/cli/csstools-cli/CHANGELOG.md @@ -5,6 +5,9 @@ - Updated: Support for Node v14+ (major). - Remove `postcss-env-function` (breaking). - Remove `importFrom` and `exportTo` plugin options (breaking). +- Added `@csstools/postcss-logical-float-and-clear` +- Added `@csstools/postcss-logical-resize` +- Added `@csstools/postcss-logical-viewport-units` ### 1.4.0 (June 3, 2022) diff --git a/cli/csstools-cli/dist/cli.cjs b/cli/csstools-cli/dist/cli.cjs index 0d6c333b5..a36cfaf02 100755 --- a/cli/csstools-cli/dist/cli.cjs +++ b/cli/csstools-cli/dist/cli.cjs @@ -1,3 +1,3 @@ #!/usr/bin/env node -"use strict";var s,e=require("css-blank-pseudo"),o=require("postcss"),t=require("fs"),r=require("path"),i=require("css-has-pseudo"),c=require("css-prefers-color-scheme"),n=require("postcss-attribute-case-insensitive"),l=require("@csstools/postcss-cascade-layers"),p=require("@csstools/postcss-color-function"),a=require("postcss-color-functional-notation"),u=require("postcss-color-hex-alpha"),d=require("postcss-color-rebeccapurple"),g=require("postcss-custom-media"),S=require("postcss-custom-properties"),f=require("postcss-custom-selectors"),v=require("postcss-dir-pseudo-class"),h=require("postcss-double-position-gradients"),m=require("postcss-focus-visible"),w=require("postcss-focus-within"),C=require("@csstools/postcss-font-format-keywords"),b=require("postcss-gap-properties"),y=require("@csstools/postcss-hwb-function"),P=require("@csstools/postcss-ic-unit"),L=require("postcss-image-set-function"),x=require("@csstools/postcss-is-pseudo-class"),T=require("postcss-lab-function"),q=require("postcss-logical"),k=require("postcss-nesting"),I=require("@csstools/postcss-normalize-display-values"),M=require("@csstools/postcss-oklab-function"),O=require("postcss-overflow-shorthand"),F=require("postcss-place"),N=require("postcss-preset-env"),A=require("postcss-pseudo-class-any-link"),D=require("postcss-selector-not"),$=require("@csstools/postcss-stepped-value-functions"),j=require("@csstools/postcss-trigonometric-functions"),V=require("@csstools/postcss-unset-value");function parseArguments(e,o,t){const r=e.map((s=>s.trim())).filter((s=>!!s)),i={stdin:!1,stdout:!1,output:null,outputDir:null,inputs:[],inlineMap:!0,externalMap:!1,replace:!1,pluginOptions:{},debug:!1};let c=null,n=!1;for(let e=0;e1&&i.output)return console.warn('[error] omit "--output" when processing multiple inputs\n'),t(),s.InvalidArguments;0===i.inputs.length&&(i.stdin=!0),i.output||i.outputDir||i.replace||(i.stdout=!0),i.stdout&&(i.externalMap=!1);let l={};if(c)try{l=JSON.parse(c)}catch(e){return console.warn("[error] plugin options must be valid JSON\n"),t(),s.InvalidArguments}for(const e in l){const r=l[e];if(!o.includes(e))return console.warn(`[error] unknown plugin option: ${e}\n`),t(),s.InvalidArguments;i.pluginOptions[e]=r}return i}async function getStdin(){return new Promise((s=>{let e="",o=!1;if(setTimeout((()=>{o=!0,s("")}),1e4),process.stdin.isTTY){if(o)return;s(e)}else process.stdin.setEncoding("utf8"),process.stdin.on("readable",(()=>{let s;for(;s=process.stdin.read();)e+=s})),process.stdin.on("end",(()=>{o||s(e)}))}))}async function stdinToStdout(s,e,t){let r="";try{const i=await getStdin();i||(t(),process.exit(1));const c=await o([s]).process(i,{from:"stdin",to:"stdout",map:!!e.inlineMap&&{inline:!0}});c.warnings().forEach((s=>{console.warn(s.toString())})),r=c.css}catch(s){console.error(e.debug?s:s.message),process.exit(1)}process.stdout.write(r+(e.inlineMap?"\n":"")),process.exit(0)}async function stdinToFs(s,e,i){let c=e.output;!c&&e.outputDir&&(c=r.join(e.outputDir,"output.css"));try{const r=await getStdin();r||(i(),process.exit(1));const n=await o([s]).process(r,{from:"stdin",to:c,map:!(!e.inlineMap&&!e.externalMap)&&{inline:e.inlineMap}});n.warnings().forEach((s=>{console.warn(s.toString())})),e.externalMap&&n.map?await Promise.all([await t.promises.writeFile(c,n.css+(e.inlineMap?"\n":"")),await t.promises.writeFile(`${c}.map`,n.map.toString())]):await t.promises.writeFile(c,n.css+(e.inlineMap?"\n":""))}catch(s){console.error(e.debug?s:s.message),process.exit(1)}console.log(`CSS was written to "${r.normalize(c)}"`),process.exit(0)}async function fsToStdout(s,e){let r=[];try{r=await Promise.all(e.inputs.map((async e=>{const r=await t.promises.readFile(e),i=await o([s]).process(r,{from:e,to:"stdout",map:!1});return i.warnings().forEach((s=>{console.warn(s.toString())})),i.css})))}catch(s){console.error(e.debug?s:s.message),process.exit(1)}for(const s of r)process.stdout.write(s);process.exit(0)}async function fsToFs(s,e){try{await Promise.all(e.inputs.map((async i=>{let c=e.output;e.outputDir&&(c=r.join(e.outputDir,r.basename(i))),e.replace&&(c=i);const n=await t.promises.readFile(i),l=await o([s]).process(n,{from:i,to:c,map:!(!e.inlineMap&&!e.externalMap)&&{inline:e.inlineMap}});l.warnings().forEach((s=>{console.warn(s.toString())})),e.externalMap&&l.map?await Promise.all([await t.promises.writeFile(c,l.css+(e.inlineMap?"\n":"")),await t.promises.writeFile(`${c}.map`,l.map.toString())]):await t.promises.writeFile(c,l.css+(e.inlineMap?"\n":"")),console.log(`CSS was written to "${r.normalize(c)}"`)})))}catch(s){console.error(e.debug?s:s.message),process.exit(1)}process.exit(0)}function helpTextLogger(s,e,o,t=null){let r=[];if(t){const s=Math.max(...Object.keys(t).map((s=>s.length))),e=new Array(s).fill(" ").join("");e.length&&(r=["\nPlugin Options:",...Object.keys(t).map((s=>` ${(s+e).slice(0,e.length)} ${typeof t[s]}`))],r.push(`\n ${JSON.stringify(t,null,2).split("\n").join("\n ")}`))}const i=[`${e}\n`,` ${o}\n`,"Usage:",` ${s} [input.css] [OPTIONS] [-o|--output output.css]`,` ${s} ... [OPTIONS] --dir `,` ${s} ... [OPTIONS] --replace`,"\nOptions:"," -o, --output Output file"," -d, --dir Output directory"," -r, --replace Replace (overwrite) the input file"," -m, --map Create an external sourcemap"," --no-map Disable the default inline sourcemaps"," -p, --plugin-options Stringified JSON object with plugin options"];return r.length>0&&i.push(...r),()=>{console.warn(i.join("\n"))}}async function cli(e,o,t,r=!0){const i=parseArguments(process.argv.slice(r?2:3),o,t);i===s.InvalidArguments&&process.exit(1);const c=e(i.pluginOptions);i.stdin&&i.stdout?await stdinToStdout(c,i,t):i.stdin?await stdinToFs(c,i,t):i.stdout?await fsToStdout(c,i):await fsToFs(c,i)}!function(s){s.InvalidArguments="INVALID_ARGUMENTS"}(s||(s={})),function main(){switch(process.argv[2]??!1){case"css-blank-pseudo":return void cli(e,["preserve","replaceWith"],helpTextLogger("@csstools/cli css-blank-pseudo","PostCSS Blank Pseudo","Lets you style form elements when they are empty, following the Selectors Level 4 specification.",{preserve:!0,replaceWith:".css-blank"}),!1);case"css-has-pseudo":return void cli(i,["preserve"],helpTextLogger("@csstools/cli css-has-pseudo","PostCSS Has Pseudo","Transforms CSS with :has {}",{preserve:!0}),!1);case"css-prefers-color-scheme":return void cli(c,["preserve","mediaQuery"],helpTextLogger("@csstools/cli css-prefers-color-scheme","Prefers Color Scheme","Lets you use light and dark color schemes in all browsers, following the Media Queries specification.",{preserve:!0,mediaQuery:"color|color-index"}),!1);case"postcss-attribute-case-insensitive":return void cli(n,[],helpTextLogger("@csstools/cli postcss-attribute-case-insensitive","PostCSS Attribute Case Insensitive","Enables support for Case Insensitive Attribute matching in selectors"),!1);case"postcss-cascade-layers":return void cli(l,[],helpTextLogger("@csstools/cli postcss-cascade-layers","PostCSS Cascade Layers","Lets you use `@layer` following the Cascade Layers Specification."),!1);case"postcss-color-function":return void cli(p,["preserve","enableProgressiveCustomProperties"],helpTextLogger("@csstools/cli postcss-color-function","PostCSS Color Function","Lets you use the color() function in CSS.",{preserve:!0,enableProgressiveCustomProperties:!1}),!1);case"postcss-color-functional-notation":return void cli(a,["preserve"],helpTextLogger("@csstools/cli postcss-color-functional-notation","PostCSS Color Functional Notation","Lets you use space and slash separated color notation in CSS, following the CSS Color specification.",{preserve:!0}),!1);case"postcss-color-hex-alpha":return void cli(u,["preserve"],helpTextLogger("@csstools/cli postcss-color-hex-alpha","PostCSS Color Hex Alpha","Lets you use 4 & 8 character hex color notation in CSS, following the CSS Color Module specification.",{preserve:!0}),!1);case"postcss-color-rebeccapurple":return void cli(d,["preserve"],helpTextLogger("@csstools/cli postcss-color-rebeccapurple","PostCSS RebeccaPurple","Lets you use the rebeccapurple color keyword in CSS.",{preserve:!0}),!1);case"postcss-custom-media":return void cli(g,["preserve"],helpTextLogger("@csstools/cli postcss-custom-media","PostCSS Custom Media","Lets you define @custom-media in CSS following the Custom Media Specification",{preserve:!0}),!1);case"postcss-custom-properties":return void cli(S,["preserve"],helpTextLogger("@csstools/cli postcss-custom-properties","PostCSS Custom Properties","Lets you use Custom Properties in CSS, following the CSS Custom Properties specification.",{preserve:!0}),!1);case"postcss-custom-selectors":return void cli(f,["preserve"],helpTextLogger("@csstools/cli postcss-custom-selectors","PostCSS Custom Selectors","Lets you define @custom-selector in CSS following the Custom Selectors Specification",{preserve:!0}),!1);case"postcss-dir-pseudo-class":return void cli(v,["dir","preserve","shadow"],helpTextLogger("@csstools/cli postcss-dir-pseudo-class","PostCSS Dir Pseudo Class","Lets you style by directionality using the `:dir()` pseudo-class in CSS",{dir:"ltr",preserve:!0,shadow:!0}),!1);case"postcss-double-position-gradients":return void cli(h,["preserve","enableProgressiveCustomProperties"],helpTextLogger("@csstools/cli postcss-double-position-gradients","PostCSS Double Position Gradients","Lets you use double-position gradients in CSS, following the CSS Image Values and Replaced Content specification",{preserve:!0,enableProgressiveCustomProperties:!1}),!1);case"postcss-focus-visible":return void cli(m,["preserve","replaceWith"],helpTextLogger("@csstools/cli postcss-focus-visible","PostCSS Focus Visible","Lets you use the `:focus-visible` pseudo-class in CSS, following the Selectors Level 4 specification.",{preserve:!0,replaceWith:".focus-visible"}),!1);case"postcss-focus-within":return void cli(w,["preserve","replaceWith"],helpTextLogger("@csstools/cli postcss-focus-within","PostCSS Focus Within","Lets you use the `:focus-within` pseudo-class in CSS, following the Selectors Level 4 specification.",{preserve:!0,replaceWith:".focus-within"}),!1);case"postcss-font-format-keywords":return void cli(C,["preserve"],helpTextLogger("@csstools/cli postcss-font-format-keywords","PostCSS Font Format Keyword","Lets you use unquoted format on @font-face CSS definitions.",{preserve:!0}),!1);case"postcss-gap-properties":return void cli(b,["preserve"],helpTextLogger("@csstools/cli postcss-gap-properties","PostCSS Gap Properties","Lets you use the gap, column-gap, and row-gap shorthand properties in CSS, following the CSS Grid Layout specification.",{preserve:!0}),!1);case"postcss-hwb-function":return void cli(y,["preserve"],helpTextLogger("@csstools/cli postcss-hwb-function","PostCSS HWB function","Convert hwb() to rgb()",{preserve:!0}),!1);case"postcss-ic-unit":return void cli(P,["preserve","enableProgressiveCustomProperties"],helpTextLogger("@csstools/cli postcss-ic-unit","PostCSS IC Unit","Lets you use the ic length unit.",{preserve:!0,enableProgressiveCustomProperties:!1}),!1);case"postcss-image-set-function":return void cli(L,["oninvalid","preserve"],helpTextLogger("@csstools/cli postcss-image-set-function","PostCSS Image Set Function","Lets you display resolution-dependent images using the image-set() function in CSS, following the CSS Images specification.",{preserve:!0,oninvalid:"ignore|warn|throw"}),!1);case"postcss-is-pseudo-class":return void cli(x,["onComplexSelector","preserve","specificityMatchingName"],helpTextLogger("@csstools/cli postcss-is-pseudo-class","PostCSS Is Pseudo Class","Lets you use the :is pseudo class function, following the CSS Selector specification.",{onComplexSelector:"warning",preserve:!0,specificityMatchingName:"does-not-exist"}),!1);case"postcss-lab-function":return void cli(T,["preserve","enableProgressiveCustomProperties","subFeatures"],helpTextLogger("@csstools/cli postcss-lab-function","PostCSS Lab function","Convert lab() to rgb()",{preserve:!0,enableProgressiveCustomProperties:!1,subFeatures:{displayP3:!1}}),!1);case"postcss-logical":return void cli(q,["dir","preserve"],helpTextLogger("@csstools/cli postcss-logical","PostCSS Logical","Lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.",{dir:"ltr|rtl",preserve:!0}),!1);case"postcss-nesting":return void cli(k,["noIsPseudoSelector"],helpTextLogger("@csstools/cli postcss-nesting","PostCSS Nesting","Lets you nest style rules inside each other, following the CSS Nesting specification.",{noIsPseudoSelector:!0}),!1);case"postcss-normalize-display-values":return void cli(I,["preserve"],helpTextLogger("@csstools/cli postcss-normalize-display-values","PostCSS Normalize Display Values","Lets you use two values display syntax for inner and outer display types.",{preserve:!0}),!1);case"postcss-oklab-function":return void cli(M,["preserve","enableProgressiveCustomProperties","subFeatures"],helpTextLogger("@csstools/cli postcss-oklab-function","PostCSS OKLab Function","Lets you use oklab() and oklch() color functions in CSS.",{preserve:!0,enableProgressiveCustomProperties:!1,subFeatures:{displayP3:!1}}),!1);case"postcss-overflow-shorthand":return void cli(O,["preserve"],helpTextLogger("@csstools/cli postcss-overflow-shorthand","PostCSS Overflow Shorthand","Lets you use the `overflow` shorthand in CSS, following the CSS Overflow specification.",{preserve:!0}),!1);case"postcss-place":return void cli(F,["preserve"],helpTextLogger("@csstools/cli postcss-place","PostCSS Place","Lets you use place-* properties as shorthands for align-* and justify-*, following the CSS Box Alignment specification.",{preserve:!0}),!1);case"postcss-preset-env":return void cli(N,["stage","minimumVendorImplementations","features","browsers","autoprefixer","preserve","enableClientSidePolyfills","debug"],helpTextLogger("@csstools/cli postcss-preset-env","PostCSS Preset Env","Lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.",{stage:0,minimumVendorImplementations:2,features:{"blank-pseudo-class":{preserve:!1},"color-functional-notation":{preserve:!0}},browsers:"last 2 versions",autoprefixer:{grid:!0},preserve:!1,enableClientSidePolyfills:!1,debug:!1}),!1);case"postcss-pseudo-class-any-link":return void cli(A,["preserve"],helpTextLogger("@csstools/cli postcss-pseudo-class-any-link","PostCSS Pseudo Class Any Link","Lets you :any-link pseudo-class in CSS, following the Selectors specification.",{preserve:!0}),!1);case"postcss-selector-not":return void cli(D,[],helpTextLogger("@csstools/cli postcss-selector-not","PostCSS Selector Not","Transforms :not() W3C CSS level 4 pseudo classes to :not() CSS level 3 selectors following the Selectors 4 Specification"),!1);case"postcss-stepped-value-functions":return void cli($,["preserve","onInvalid"],helpTextLogger("@csstools/cli postcss-stepped-value-functions","PostCSS Stepped Value Functions","Lets you use round(), mod() and rem() functions.",{preserve:!1,onInvalid:"warn"}),!1);case"postcss-trigonometric-functions":return void cli(j,["preserve"],helpTextLogger("@csstools/cli postcss-trigonometric-functions","PostCSS Trigonometric Functions","Lets you use `sin`, `cos`, `tan`, `asin`, `acos`, `atan` and `atan2` to be able to compute trigonometric relationships following the CSS Values 4 specification.",{preserve:!0}),!1);case"postcss-unset-value":return void cli(V,["preserve"],helpTextLogger("@csstools/cli postcss-unset-value","PostCSS Stepped Unset Value","Use the unset keyword in CSS.",{preserve:!1}),!1);default:{const s=["CSSTools CLI\n"," Transform CSS with any plugin from https://github.com/csstools/postcss-plugins\n","Usage:"," @csstools/csstools-cli postcss-preset-env [input.css] [OPTIONS] [-o|--output output.css]"," @csstools/csstools-cli postcss-preset-env ... [OPTIONS] --dir "," @csstools/csstools-cli postcss-preset-env ... [OPTIONS] --replace","\nAvailable Plugins:"," css-blank-pseudo"," css-has-pseudo"," css-prefers-color-scheme"," postcss-attribute-case-insensitive"," postcss-cascade-layers"," postcss-color-function"," postcss-color-functional-notation"," postcss-color-hex-alpha"," postcss-color-rebeccapurple"," postcss-custom-media"," postcss-custom-properties"," postcss-custom-selectors"," postcss-dir-pseudo-class"," postcss-double-position-gradients"," postcss-env-function"," postcss-focus-visible"," postcss-focus-within"," postcss-font-format-keywords"," postcss-gap-properties"," postcss-hwb-function"," postcss-ic-unit"," postcss-image-set-function"," postcss-is-pseudo-class"," postcss-lab-function"," postcss-logical"," postcss-nesting"," postcss-normalize-display-values"," postcss-oklab-function"," postcss-overflow-shorthand"," postcss-place"," postcss-pseudo-class-any-link"," postcss-selector-not"," postcss-stepped-value-functions"," postcss-trigonometric-functions"," postcss-unset-value","\nPlugin Help:"," @csstools/csstools-cli "," @csstools/csstools-cli postcss-preset-env"];console.warn(s.join("\n"))}}}(); +"use strict";var s,e=require("css-blank-pseudo"),o=require("postcss"),t=require("fs"),i=require("path"),r=require("css-has-pseudo"),c=require("css-prefers-color-scheme"),n=require("postcss-attribute-case-insensitive"),l=require("@csstools/postcss-cascade-layers"),a=require("@csstools/postcss-color-function"),p=require("postcss-color-functional-notation"),u=require("postcss-color-hex-alpha"),d=require("postcss-color-rebeccapurple"),g=require("postcss-custom-media"),S=require("postcss-custom-properties"),f=require("postcss-custom-selectors"),v=require("postcss-dir-pseudo-class"),h=require("postcss-double-position-gradients"),m=require("postcss-focus-visible"),w=require("postcss-focus-within"),C=require("@csstools/postcss-font-format-keywords"),b=require("postcss-gap-properties"),y=require("@csstools/postcss-hwb-function"),P=require("@csstools/postcss-ic-unit"),L=require("postcss-image-set-function"),x=require("@csstools/postcss-is-pseudo-class"),T=require("postcss-lab-function"),q=require("postcss-logical"),k=require("@csstools/postcss-logical-float-and-clear"),M=require("@csstools/postcss-logical-resize"),I=require("@csstools/postcss-logical-viewport-units"),O=require("postcss-nesting"),F=require("@csstools/postcss-normalize-display-values"),D=require("@csstools/postcss-oklab-function"),A=require("postcss-overflow-shorthand"),N=require("postcss-place"),V=require("postcss-preset-env"),$=require("postcss-pseudo-class-any-link"),z=require("postcss-selector-not"),j=require("@csstools/postcss-stepped-value-functions"),W=require("@csstools/postcss-trigonometric-functions"),E=require("@csstools/postcss-unset-value");function parseArguments(e,o,t){const i=e.map((s=>s.trim())).filter((s=>!!s)),r={stdin:!1,stdout:!1,output:null,outputDir:null,inputs:[],inlineMap:!0,externalMap:!1,replace:!1,pluginOptions:{},debug:!1};let c=null,n=!1;for(let e=0;e1&&r.output)return console.warn('[error] omit "--output" when processing multiple inputs\n'),t(),s.InvalidArguments;0===r.inputs.length&&(r.stdin=!0),r.output||r.outputDir||r.replace||(r.stdout=!0),r.stdout&&(r.externalMap=!1);let l={};if(c)try{l=JSON.parse(c)}catch(e){return console.warn("[error] plugin options must be valid JSON\n"),t(),s.InvalidArguments}for(const e in l){const i=l[e];if(!o.includes(e))return console.warn(`[error] unknown plugin option: ${e}\n`),t(),s.InvalidArguments;r.pluginOptions[e]=i}return r}async function getStdin(){return new Promise((s=>{let e="",o=!1;if(setTimeout((()=>{o=!0,s("")}),1e4),process.stdin.isTTY){if(o)return;s(e)}else process.stdin.setEncoding("utf8"),process.stdin.on("readable",(()=>{let s;for(;s=process.stdin.read();)e+=s})),process.stdin.on("end",(()=>{o||s(e)}))}))}async function stdinToStdout(s,e,t){let i="";try{const r=await getStdin();r||(t(),process.exit(1));const c=await o([s]).process(r,{from:"stdin",to:"stdout",map:!!e.inlineMap&&{inline:!0}});c.warnings().forEach((s=>{console.warn(s.toString())})),i=c.css}catch(s){console.error(e.debug?s:s.message),process.exit(1)}process.stdout.write(i+(e.inlineMap?"\n":"")),process.exit(0)}async function stdinToFs(s,e,r){let c=e.output;!c&&e.outputDir&&(c=i.join(e.outputDir,"output.css"));try{const i=await getStdin();i||(r(),process.exit(1));const n=await o([s]).process(i,{from:"stdin",to:c,map:!(!e.inlineMap&&!e.externalMap)&&{inline:e.inlineMap}});n.warnings().forEach((s=>{console.warn(s.toString())})),e.externalMap&&n.map?await Promise.all([await t.promises.writeFile(c,n.css+(e.inlineMap?"\n":"")),await t.promises.writeFile(`${c}.map`,n.map.toString())]):await t.promises.writeFile(c,n.css+(e.inlineMap?"\n":""))}catch(s){console.error(e.debug?s:s.message),process.exit(1)}console.log(`CSS was written to "${i.normalize(c)}"`),process.exit(0)}async function fsToStdout(s,e){let i=[];try{i=await Promise.all(e.inputs.map((async e=>{const i=await t.promises.readFile(e),r=await o([s]).process(i,{from:e,to:"stdout",map:!1});return r.warnings().forEach((s=>{console.warn(s.toString())})),r.css})))}catch(s){console.error(e.debug?s:s.message),process.exit(1)}for(const s of i)process.stdout.write(s);process.exit(0)}async function fsToFs(s,e){try{await Promise.all(e.inputs.map((async r=>{let c=e.output;e.outputDir&&(c=i.join(e.outputDir,i.basename(r))),e.replace&&(c=r);const n=await t.promises.readFile(r),l=await o([s]).process(n,{from:r,to:c,map:!(!e.inlineMap&&!e.externalMap)&&{inline:e.inlineMap}});l.warnings().forEach((s=>{console.warn(s.toString())})),e.externalMap&&l.map?await Promise.all([await t.promises.writeFile(c,l.css+(e.inlineMap?"\n":"")),await t.promises.writeFile(`${c}.map`,l.map.toString())]):await t.promises.writeFile(c,l.css+(e.inlineMap?"\n":"")),console.log(`CSS was written to "${i.normalize(c)}"`)})))}catch(s){console.error(e.debug?s:s.message),process.exit(1)}process.exit(0)}function helpTextLogger(s,e,o,t=null){let i=[];if(t){const s=Math.max(...Object.keys(t).map((s=>s.length))),e=new Array(s).fill(" ").join("");e.length&&(i=["\nPlugin Options:",...Object.keys(t).map((s=>` ${(s+e).slice(0,e.length)} ${typeof t[s]}`))],i.push(`\n ${JSON.stringify(t,null,2).split("\n").join("\n ")}`))}const r=[`${e}\n`,` ${o}\n`,"Usage:",` ${s} [input.css] [OPTIONS] [-o|--output output.css]`,` ${s} ... [OPTIONS] --dir `,` ${s} ... [OPTIONS] --replace`,"\nOptions:"," -o, --output Output file"," -d, --dir Output directory"," -r, --replace Replace (overwrite) the input file"," -m, --map Create an external sourcemap"," --no-map Disable the default inline sourcemaps"," -p, --plugin-options Stringified JSON object with plugin options"];return i.length>0&&r.push(...i),()=>{console.warn(r.join("\n"))}}async function cli(e,o,t,i=!0){const r=parseArguments(process.argv.slice(i?2:3),o,t);r===s.InvalidArguments&&process.exit(1);const c=e(r.pluginOptions);r.stdin&&r.stdout?await stdinToStdout(c,r,t):r.stdin?await stdinToFs(c,r,t):r.stdout?await fsToStdout(c,r):await fsToFs(c,r)}!function(s){s.InvalidArguments="INVALID_ARGUMENTS"}(s||(s={})),function main(){switch(process.argv[2]??!1){case"css-blank-pseudo":return void cli(e,["preserve","replaceWith"],helpTextLogger("@csstools/cli css-blank-pseudo","PostCSS Blank Pseudo","Lets you style form elements when they are empty, following the Selectors Level 4 specification.",{preserve:!0,replaceWith:".css-blank"}),!1);case"css-has-pseudo":return void cli(r,["preserve"],helpTextLogger("@csstools/cli css-has-pseudo","PostCSS Has Pseudo","Transforms CSS with :has {}",{preserve:!0}),!1);case"css-prefers-color-scheme":return void cli(c,["preserve","mediaQuery"],helpTextLogger("@csstools/cli css-prefers-color-scheme","Prefers Color Scheme","Lets you use light and dark color schemes in all browsers, following the Media Queries specification.",{preserve:!0,mediaQuery:"color|color-index"}),!1);case"postcss-attribute-case-insensitive":return void cli(n,[],helpTextLogger("@csstools/cli postcss-attribute-case-insensitive","PostCSS Attribute Case Insensitive","Enables support for Case Insensitive Attribute matching in selectors"),!1);case"postcss-cascade-layers":return void cli(l,[],helpTextLogger("@csstools/cli postcss-cascade-layers","PostCSS Cascade Layers","Lets you use `@layer` following the Cascade Layers Specification."),!1);case"postcss-color-function":return void cli(a,["preserve","enableProgressiveCustomProperties"],helpTextLogger("@csstools/cli postcss-color-function","PostCSS Color Function","Lets you use the color() function in CSS.",{preserve:!0,enableProgressiveCustomProperties:!1}),!1);case"postcss-color-functional-notation":return void cli(p,["preserve"],helpTextLogger("@csstools/cli postcss-color-functional-notation","PostCSS Color Functional Notation","Lets you use space and slash separated color notation in CSS, following the CSS Color specification.",{preserve:!0}),!1);case"postcss-color-hex-alpha":return void cli(u,["preserve"],helpTextLogger("@csstools/cli postcss-color-hex-alpha","PostCSS Color Hex Alpha","Lets you use 4 & 8 character hex color notation in CSS, following the CSS Color Module specification.",{preserve:!0}),!1);case"postcss-color-rebeccapurple":return void cli(d,["preserve"],helpTextLogger("@csstools/cli postcss-color-rebeccapurple","PostCSS RebeccaPurple","Lets you use the rebeccapurple color keyword in CSS.",{preserve:!0}),!1);case"postcss-custom-media":return void cli(g,["preserve"],helpTextLogger("@csstools/cli postcss-custom-media","PostCSS Custom Media","Lets you define @custom-media in CSS following the Custom Media Specification",{preserve:!0}),!1);case"postcss-custom-properties":return void cli(S,["preserve"],helpTextLogger("@csstools/cli postcss-custom-properties","PostCSS Custom Properties","Lets you use Custom Properties in CSS, following the CSS Custom Properties specification.",{preserve:!0}),!1);case"postcss-custom-selectors":return void cli(f,["preserve"],helpTextLogger("@csstools/cli postcss-custom-selectors","PostCSS Custom Selectors","Lets you define @custom-selector in CSS following the Custom Selectors Specification",{preserve:!0}),!1);case"postcss-dir-pseudo-class":return void cli(v,["dir","preserve","shadow"],helpTextLogger("@csstools/cli postcss-dir-pseudo-class","PostCSS Dir Pseudo Class","Lets you style by directionality using the `:dir()` pseudo-class in CSS",{dir:"ltr",preserve:!0,shadow:!0}),!1);case"postcss-double-position-gradients":return void cli(h,["preserve","enableProgressiveCustomProperties"],helpTextLogger("@csstools/cli postcss-double-position-gradients","PostCSS Double Position Gradients","Lets you use double-position gradients in CSS, following the CSS Image Values and Replaced Content specification",{preserve:!0,enableProgressiveCustomProperties:!1}),!1);case"postcss-focus-visible":return void cli(m,["preserve","replaceWith"],helpTextLogger("@csstools/cli postcss-focus-visible","PostCSS Focus Visible","Lets you use the `:focus-visible` pseudo-class in CSS, following the Selectors Level 4 specification.",{preserve:!0,replaceWith:".focus-visible"}),!1);case"postcss-focus-within":return void cli(w,["preserve","replaceWith"],helpTextLogger("@csstools/cli postcss-focus-within","PostCSS Focus Within","Lets you use the `:focus-within` pseudo-class in CSS, following the Selectors Level 4 specification.",{preserve:!0,replaceWith:".focus-within"}),!1);case"postcss-font-format-keywords":return void cli(C,["preserve"],helpTextLogger("@csstools/cli postcss-font-format-keywords","PostCSS Font Format Keyword","Lets you use unquoted format on @font-face CSS definitions.",{preserve:!0}),!1);case"postcss-gap-properties":return void cli(b,["preserve"],helpTextLogger("@csstools/cli postcss-gap-properties","PostCSS Gap Properties","Lets you use the gap, column-gap, and row-gap shorthand properties in CSS, following the CSS Grid Layout specification.",{preserve:!0}),!1);case"postcss-hwb-function":return void cli(y,["preserve"],helpTextLogger("@csstools/cli postcss-hwb-function","PostCSS HWB function","Convert hwb() to rgb()",{preserve:!0}),!1);case"postcss-ic-unit":return void cli(P,["preserve","enableProgressiveCustomProperties"],helpTextLogger("@csstools/cli postcss-ic-unit","PostCSS IC Unit","Lets you use the ic length unit.",{preserve:!0,enableProgressiveCustomProperties:!1}),!1);case"postcss-image-set-function":return void cli(L,["oninvalid","preserve"],helpTextLogger("@csstools/cli postcss-image-set-function","PostCSS Image Set Function","Lets you display resolution-dependent images using the image-set() function in CSS, following the CSS Images specification.",{preserve:!0,oninvalid:"ignore|warn|throw"}),!1);case"postcss-is-pseudo-class":return void cli(x,["onComplexSelector","preserve","specificityMatchingName"],helpTextLogger("@csstools/cli postcss-is-pseudo-class","PostCSS Is Pseudo Class","Lets you use the :is pseudo class function, following the CSS Selector specification.",{onComplexSelector:"warning",preserve:!0,specificityMatchingName:"does-not-exist"}),!1);case"postcss-lab-function":return void cli(T,["preserve","enableProgressiveCustomProperties","subFeatures"],helpTextLogger("@csstools/cli postcss-lab-function","PostCSS Lab function","Convert lab() to rgb()",{preserve:!0,enableProgressiveCustomProperties:!1,subFeatures:{displayP3:!1}}),!1);case"postcss-logical":return void cli(q,["inlineDirection","blockDirection"],helpTextLogger("@csstools/cli postcss-logical","PostCSS Logical","Lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.",{inlineDirection:"left-to-right",blockDirection:"top-to-bottom"}),!1);case"postcss-logical-float-and-clear":return void cli(k,["inlineDirection","blockDirection"],helpTextLogger("@csstools/cli postcss-logical-float-and-clear","PostCSS Logical Float And Clear","Lets you use flow-relative (inline-start and inline-end) values for float and clear, following the CSS Logical Properties and Values specification.",{inlineDirection:"left-to-right"}),!1);case"postcss-logical-resize":return void cli(M,["inlineDirection"],helpTextLogger("@csstools/cli postcss-logical-resize","PostCSS Logical Resize","Lets you use logical values in the resize property, following the CSS Logical Properties and Values specification.",{inlineDirection:"left-to-right"}),!1);case"postcss-logical-viewport-units":return void cli(I,["inlineDirection","preserve"],helpTextLogger("@csstools/cli postcss-viewport-units","PostCSS Logical Viewport Units","Lets you use vb and vi length units in CSS, following the CSS Values and Units Module Level 4 specification.",{inlineDirection:"left-to-right",preserve:!0}),!1);case"postcss-nesting":return void cli(O,["noIsPseudoSelector"],helpTextLogger("@csstools/cli postcss-nesting","PostCSS Nesting","Lets you nest style rules inside each other, following the CSS Nesting specification.",{noIsPseudoSelector:!0}),!1);case"postcss-normalize-display-values":return void cli(F,["preserve"],helpTextLogger("@csstools/cli postcss-normalize-display-values","PostCSS Normalize Display Values","Lets you use two values display syntax for inner and outer display types.",{preserve:!0}),!1);case"postcss-oklab-function":return void cli(D,["preserve","enableProgressiveCustomProperties","subFeatures"],helpTextLogger("@csstools/cli postcss-oklab-function","PostCSS OKLab Function","Lets you use oklab() and oklch() color functions in CSS.",{preserve:!0,enableProgressiveCustomProperties:!1,subFeatures:{displayP3:!1}}),!1);case"postcss-overflow-shorthand":return void cli(A,["preserve"],helpTextLogger("@csstools/cli postcss-overflow-shorthand","PostCSS Overflow Shorthand","Lets you use the `overflow` shorthand in CSS, following the CSS Overflow specification.",{preserve:!0}),!1);case"postcss-place":return void cli(N,["preserve"],helpTextLogger("@csstools/cli postcss-place","PostCSS Place","Lets you use place-* properties as shorthands for align-* and justify-*, following the CSS Box Alignment specification.",{preserve:!0}),!1);case"postcss-preset-env":return void cli(V,["stage","minimumVendorImplementations","features","browsers","autoprefixer","preserve","enableClientSidePolyfills","debug"],helpTextLogger("@csstools/cli postcss-preset-env","PostCSS Preset Env","Lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments.",{stage:0,minimumVendorImplementations:2,features:{"blank-pseudo-class":{preserve:!1},"color-functional-notation":{preserve:!0}},browsers:"last 2 versions",autoprefixer:{grid:!0},preserve:!1,enableClientSidePolyfills:!1,debug:!1}),!1);case"postcss-pseudo-class-any-link":return void cli($,["preserve"],helpTextLogger("@csstools/cli postcss-pseudo-class-any-link","PostCSS Pseudo Class Any Link","Lets you :any-link pseudo-class in CSS, following the Selectors specification.",{preserve:!0}),!1);case"postcss-selector-not":return void cli(z,[],helpTextLogger("@csstools/cli postcss-selector-not","PostCSS Selector Not","Transforms :not() W3C CSS level 4 pseudo classes to :not() CSS level 3 selectors following the Selectors 4 Specification"),!1);case"postcss-stepped-value-functions":return void cli(j,["preserve","onInvalid"],helpTextLogger("@csstools/cli postcss-stepped-value-functions","PostCSS Stepped Value Functions","Lets you use round(), mod() and rem() functions.",{preserve:!1,onInvalid:"warn"}),!1);case"postcss-trigonometric-functions":return void cli(W,["preserve"],helpTextLogger("@csstools/cli postcss-trigonometric-functions","PostCSS Trigonometric Functions","Lets you use `sin`, `cos`, `tan`, `asin`, `acos`, `atan` and `atan2` to be able to compute trigonometric relationships following the CSS Values 4 specification.",{preserve:!0}),!1);case"postcss-unset-value":return void cli(E,["preserve"],helpTextLogger("@csstools/cli postcss-unset-value","PostCSS Stepped Unset Value","Use the unset keyword in CSS.",{preserve:!1}),!1);default:{const s=["CSSTools CLI\n"," Transform CSS with any plugin from https://github.com/csstools/postcss-plugins\n","Usage:"," @csstools/csstools-cli postcss-preset-env [input.css] [OPTIONS] [-o|--output output.css]"," @csstools/csstools-cli postcss-preset-env ... [OPTIONS] --dir "," @csstools/csstools-cli postcss-preset-env ... [OPTIONS] --replace","\nAvailable Plugins:"," css-blank-pseudo"," css-has-pseudo"," css-prefers-color-scheme"," postcss-attribute-case-insensitive"," postcss-cascade-layers"," postcss-color-function"," postcss-color-functional-notation"," postcss-color-hex-alpha"," postcss-color-rebeccapurple"," postcss-custom-media"," postcss-custom-properties"," postcss-custom-selectors"," postcss-dir-pseudo-class"," postcss-double-position-gradients"," postcss-env-function"," postcss-focus-visible"," postcss-focus-within"," postcss-font-format-keywords"," postcss-gap-properties"," postcss-hwb-function"," postcss-ic-unit"," postcss-image-set-function"," postcss-is-pseudo-class"," postcss-lab-function"," postcss-logical"," postcss-nesting"," postcss-normalize-display-values"," postcss-oklab-function"," postcss-overflow-shorthand"," postcss-place"," postcss-pseudo-class-any-link"," postcss-selector-not"," postcss-stepped-value-functions"," postcss-trigonometric-functions"," postcss-unset-value","\nPlugin Help:"," @csstools/csstools-cli "," @csstools/csstools-cli postcss-preset-env"];console.warn(s.join("\n"))}}}(); diff --git a/cli/csstools-cli/package.json b/cli/csstools-cli/package.json index d7a24f810..68ed14fbd 100644 --- a/cli/csstools-cli/package.json +++ b/cli/csstools-cli/package.json @@ -38,6 +38,9 @@ "@csstools/postcss-hwb-function": "^1.0.1", "@csstools/postcss-ic-unit": "^1.0.0", "@csstools/postcss-is-pseudo-class": "^2.0.4", + "@csstools/postcss-logical-float-and-clear": "^1.0.0", + "@csstools/postcss-logical-resize": "^1.0.0", + "@csstools/postcss-logical-viewport-units": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.0", "@csstools/postcss-oklab-function": "^1.1.0", "@csstools/postcss-stepped-value-functions": "^1.0.0", diff --git a/cli/csstools-cli/src/cli.ts b/cli/csstools-cli/src/cli.ts index 0a485dd8e..9b1bc251c 100644 --- a/cli/csstools-cli/src/cli.ts +++ b/cli/csstools-cli/src/cli.ts @@ -22,6 +22,9 @@ import postcssImageSetFunction from './plugins/postcss-image-set-function'; import postcssIsPseudoClass from './plugins/postcss-is-pseudo-class'; import postcssLabFunction from './plugins/postcss-lab-function'; import postcssLogical from './plugins/postcss-logical'; +import postcssLogicalFloatAndClear from './plugins/postcss-logical-float-and-clear'; +import postcssLogicalResize from './plugins/postcss-logical-resize'; +import postcssLogicalViewportUnits from './plugins/postcss-logical-viewport-units'; import postcssNesting from './plugins/postcss-nesting'; import postcssNormalizeDisplayValues from './plugins/postcss-normalize-display-values'; import postcssOKLabFunction from './plugins/postcss-oklab-function'; @@ -109,6 +112,15 @@ function main() { case 'postcss-logical': postcssLogical(); return; + case 'postcss-logical-float-and-clear': + postcssLogicalFloatAndClear(); + return; + case 'postcss-logical-resize': + postcssLogicalResize(); + return; + case 'postcss-logical-viewport-units': + postcssLogicalViewportUnits(); + return; case 'postcss-nesting': postcssNesting(); return; diff --git a/cli/csstools-cli/src/plugins/postcss-logical-float-and-clear.ts b/cli/csstools-cli/src/plugins/postcss-logical-float-and-clear.ts new file mode 100644 index 000000000..9255a67de --- /dev/null +++ b/cli/csstools-cli/src/plugins/postcss-logical-float-and-clear.ts @@ -0,0 +1,18 @@ +import plugin from '@csstools/postcss-logical-float-and-clear'; +import { cli, helpTextLogger } from '@csstools/base-cli'; + +export default function postcssLogical() { + cli( + plugin, + ['inlineDirection', 'blockDirection'], + helpTextLogger( + '@csstools/cli postcss-logical-float-and-clear', + 'PostCSS Logical Float And Clear', + 'Lets you use flow-relative (inline-start and inline-end) values for float and clear, following the CSS Logical Properties and Values specification.', + { + inlineDirection: 'left-to-right', + }, + ), + false, + ); +} diff --git a/cli/csstools-cli/src/plugins/postcss-logical-resize.ts b/cli/csstools-cli/src/plugins/postcss-logical-resize.ts new file mode 100644 index 000000000..9b056dc07 --- /dev/null +++ b/cli/csstools-cli/src/plugins/postcss-logical-resize.ts @@ -0,0 +1,18 @@ +import plugin from '@csstools/postcss-logical-resize'; +import { cli, helpTextLogger } from '@csstools/base-cli'; + +export default function postcssLogicalResize() { + cli( + plugin, + ['inlineDirection'], + helpTextLogger( + '@csstools/cli postcss-logical-resize', + 'PostCSS Logical Resize', + 'Lets you use logical values in the resize property, following the CSS Logical Properties and Values specification.', + { + inlineDirection: 'left-to-right', + }, + ), + false, + ); +} diff --git a/cli/csstools-cli/src/plugins/postcss-logical-viewport-units.ts b/cli/csstools-cli/src/plugins/postcss-logical-viewport-units.ts new file mode 100644 index 000000000..6aaf05af6 --- /dev/null +++ b/cli/csstools-cli/src/plugins/postcss-logical-viewport-units.ts @@ -0,0 +1,19 @@ +import plugin from '@csstools/postcss-logical-viewport-units'; +import { cli, helpTextLogger } from '@csstools/base-cli'; + +export default function postcssLogicalViewportUnits() { + cli( + plugin, + ['inlineDirection', 'preserve'], + helpTextLogger( + '@csstools/cli postcss-viewport-units', + 'PostCSS Logical Viewport Units', + 'Lets you use vb and vi length units in CSS, following the CSS Values and Units Module Level 4 specification.', + { + inlineDirection: 'left-to-right', + preserve: true, + }, + ), + false, + ); +} diff --git a/cli/csstools-cli/src/plugins/postcss-logical.ts b/cli/csstools-cli/src/plugins/postcss-logical.ts index b8a33aa14..489941d5a 100644 --- a/cli/csstools-cli/src/plugins/postcss-logical.ts +++ b/cli/csstools-cli/src/plugins/postcss-logical.ts @@ -4,14 +4,14 @@ import { cli, helpTextLogger } from '@csstools/base-cli'; export default function postcssLogical() { cli( plugin, - ['dir', 'preserve'], + ['inlineDirection', 'blockDirection'], helpTextLogger( '@csstools/cli postcss-logical', 'PostCSS Logical', 'Lets you use logical, rather than physical, direction and dimension mappings in CSS, following the CSS Logical Properties and Values specification.', { - dir: 'ltr|rtl', - preserve: true, + inlineDirection: 'left-to-right', + blockDirection: 'top-to-bottom', }, ), false, diff --git a/package-lock.json b/package-lock.json index 8d2300942..6a2c315c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,9 @@ "@csstools/postcss-hwb-function": "^1.0.1", "@csstools/postcss-ic-unit": "^1.0.0", "@csstools/postcss-is-pseudo-class": "^2.0.4", + "@csstools/postcss-logical-float-and-clear": "^1.0.0", + "@csstools/postcss-logical-resize": "^1.0.0", + "@csstools/postcss-logical-viewport-units": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.0", "@csstools/postcss-oklab-function": "^1.1.0", "@csstools/postcss-stepped-value-functions": "^1.0.0", @@ -7118,6 +7121,9 @@ "@csstools/postcss-hwb-function": "^1.0.2", "@csstools/postcss-ic-unit": "^1.0.1", "@csstools/postcss-is-pseudo-class": "^2.0.7", + "@csstools/postcss-logical-float-and-clear": "^1.0.0", + "@csstools/postcss-logical-resize": "^1.0.0", + "@csstools/postcss-logical-viewport-units": "^1.0.0", "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", "@csstools/postcss-nested-calc": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.1", @@ -9259,6 +9265,9 @@ "@csstools/postcss-hwb-function": "^1.0.1", "@csstools/postcss-ic-unit": "^1.0.0", "@csstools/postcss-is-pseudo-class": "^2.0.4", + "@csstools/postcss-logical-float-and-clear": "^1.0.0", + "@csstools/postcss-logical-resize": "^1.0.0", + "@csstools/postcss-logical-viewport-units": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.0", "@csstools/postcss-oklab-function": "^1.1.0", "@csstools/postcss-stepped-value-functions": "^1.0.0", @@ -12187,6 +12196,9 @@ "@csstools/postcss-hwb-function": "^1.0.2", "@csstools/postcss-ic-unit": "^1.0.1", "@csstools/postcss-is-pseudo-class": "^2.0.7", + "@csstools/postcss-logical-float-and-clear": "^1.0.0", + "@csstools/postcss-logical-resize": "^1.0.0", + "@csstools/postcss-logical-viewport-units": "^1.0.0", "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", "@csstools/postcss-nested-calc": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.1", diff --git a/plugin-packs/postcss-preset-env/.tape.mjs b/plugin-packs/postcss-preset-env/.tape.mjs index c17472043..5af350916 100644 --- a/plugin-packs/postcss-preset-env/.tape.mjs +++ b/plugin-packs/postcss-preset-env/.tape.mjs @@ -167,6 +167,15 @@ postcssTape(plugin)({ browsers: '> 0%' }, }, + 'basic:hebrew': { + message: 'supports { logical: { inlineDirection: "right-to-left" }, stage: 0, browsers: "> 0%" } usage', + options: { + stage: 0, + logical: { + inlineDirection: 'right-to-left' + } + }, + }, 'layers-basic': { message: 'supports layers usage', options: { @@ -268,9 +277,6 @@ postcssTape(plugin)({ message: 'supports { insertBefore } usage when looking for source', options: { stage: 0, - features: { - 'lab-function': true - }, features: { 'lab-function': true, 'color-function': false, @@ -288,9 +294,6 @@ postcssTape(plugin)({ message: 'supports { insertBefore } usage when looking for a result', options: { stage: 0, - features: { - 'lab-function': true - }, features: { 'lab-function': true, 'color-function': false, diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 5ed3fe8ed..62e927355 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -4,7 +4,12 @@ - Added: TypeScript support. - Added `@csstools/postcss-media-queries-aspect-ratio-number-values` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values#readme) for usage details. +- Added `@csstools/postcss-logical-float-and-clear` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear#readme) for usage details. +- Added `@csstools/postcss-logical-resize` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize#readme) for usage details. +- Added `@csstools/postcss-logical-viewport-units` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units#readme) for usage details. +- Added `logical` option to control all logical plugins. - Fixed: `all-property` and `overflow-wrap-property` now follow the `preserve` plugin option +- Removed a workaround to consider `blank-pseudo-class` and `prefers-color-scheme-query` as `stage: 1` features when using default options. ### (8.0.0-alpha.1) (November 14, 2022) diff --git a/plugin-packs/postcss-preset-env/FEATURES.md b/plugin-packs/postcss-preset-env/FEATURES.md index 93010581d..d4a842bf0 100644 --- a/plugin-packs/postcss-preset-env/FEATURES.md +++ b/plugin-packs/postcss-preset-env/FEATURES.md @@ -19,6 +19,7 @@ The `ID` listed is the key for PostCSS Preset Env configuration in your project. | `dir-pseudo-class` | `:dir` Directionality Pseudo-Class | [example](https://preset-env.cssdb.org/features/#dir-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class#readme) | | `display-two-values` | Two values syntax for `display` | [example](https://preset-env.cssdb.org/features/#display-two-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values#readme) | | `double-position-gradients` | Double Position Gradients | [example](https://preset-env.cssdb.org/features/#double-position-gradients) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients#readme) | +| `float-clear-logical-values` | Logical Values in float and clear | [example](https://preset-env.cssdb.org/features/#float-clear-logical-values) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme) | | `focus-visible-pseudo-class` | `:focus-visible` Focus-Indicated Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-visible-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible#readme) | | `focus-within-pseudo-class` | `:focus-within` Focus Container Pseudo-Class | [example](https://preset-env.cssdb.org/features/#focus-within-pseudo-class) | [docs](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within#readme) | | `font-format-keywords` | Font `format()` Keywords | [example](https://preset-env.cssdb.org/features/#font-format-keywords) | [docs](https://github.com/valtlai/postcss-font-format-keywords#readme) | diff --git a/plugin-packs/postcss-preset-env/README.md b/plugin-packs/postcss-preset-env/README.md index 13ca1f97a..594b2176d 100644 --- a/plugin-packs/postcss-preset-env/README.md +++ b/plugin-packs/postcss-preset-env/README.md @@ -218,7 +218,7 @@ postcssPresetEnv({ /* use stage 3 features + custom-selectors (preserving the original CSS) */ stage: 3, features: { - 'custom-selectors': { preserve: true } + 'custom-selectors': { preserve: true } } }) ``` @@ -337,6 +337,50 @@ The `enableClientSidePolyfills` enables any feature that would need an extra bro - Note that manually enabling/disabling features via the "feature" option overrides this flag. - This only controls if the PostCSS plugins are enabled. It does not cause the browsers libraries to be included in your bundle. +### logical + +The `logical` option can hold an object which lets you specify direction of the inline and block axes and will affect the +following features: + +- `logical-properties-and-values`: [PostCSS Logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme) +- `float-clear-logical-values`: [PostCSS Logical Float And Clear](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical#readme) +- `logical-resize`: [PostCSS Logical Resize](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize#readme) +- `logical-viewport-units`: [PostCSS Logical Viewport Units](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logica-viewport-unitsl#readme) + +It should have `blockDirection` and/or `inlineDirection` which can be any of the following: + +- `top-to-bottom` +- `bottom-to-top` +- `left-to-right` +- `right-to-left` + +```js +postcssPresetEnv({ + logical: { // instruct all logical plugins to set inline axis to right to left + inlineDirection: 'right-to-left', + }, +}); +``` + +```pcss +.element { + float: inline-start; + padding-inline-end: 10px; +} +``` + +Becomes : + +``` +.element { + float: right; + padding-left: 10px; +} +``` + +You can't mix two vertical directions or two horizontal directions so for example `top-to-bottom` and `right-to-left` are valid, but `top-to-bottom` and `bottom-to-top` are not. + +You might want to tweak these values if you are using a different writing system, such as Arabic, Hebrew or Chinese for example. ## Stability and Portability diff --git a/plugin-packs/postcss-preset-env/dist/index.cjs b/plugin-packs/postcss-preset-env/dist/index.cjs index 738dc84cd..7f0a6011d 100644 --- a/plugin-packs/postcss-preset-env/dist/index.cjs +++ b/plugin-packs/postcss-preset-env/dist/index.cjs @@ -1 +1 @@ -"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),r=require("postcss-initial"),i=require("postcss-pseudo-class-any-link"),a=require("css-blank-pseudo"),n=require("postcss-page-break"),c=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("postcss-custom-media"),f=require("postcss-custom-properties"),g=require("postcss-custom-selectors"),b=require("postcss-dir-pseudo-class"),h=require("@csstools/postcss-normalize-display-values"),N=require("postcss-double-position-gradients"),y=require("postcss-focus-visible"),k=require("postcss-focus-within"),v=require("@csstools/postcss-font-format-keywords"),w=require("postcss-font-variant"),q=require("postcss-gap-properties"),S=require("css-has-pseudo"),F=require("postcss-color-hex-alpha"),O=require("@csstools/postcss-hwb-function"),$=require("@csstools/postcss-ic-unit"),x=require("postcss-image-set-function"),P=require("@csstools/postcss-is-pseudo-class"),E=require("postcss-lab-function"),C=require("postcss-logical"),I=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),B=require("postcss-media-minmax"),U=require("@csstools/postcss-nested-calc"),_=require("postcss-nesting"),A=require("postcss-selector-not"),L=require("@csstools/postcss-oklab-function"),R=require("postcss-opacity-percentage"),j=require("postcss-overflow-shorthand"),M=require("postcss-replace-overflow-wrap"),D=require("postcss-place"),W=require("css-prefers-color-scheme"),V=require("postcss-color-rebeccapurple"),T=require("@csstools/postcss-scope-pseudo-class"),H=require("@csstools/postcss-stepped-value-functions"),z=require("@csstools/postcss-text-decoration-shorthand"),G=require("@csstools/postcss-trigonometric-functions"),J=require("@csstools/postcss-unset-value");const K={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},Z=["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=[],r=[];!1!==e.autoprefixer&&r.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?r.push(` ${s.id} (injected via options)`):r.push(` ${s.id}`),void 0!==K[s.id]&&t.push(s.id)})),r.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),r.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${K[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return"preserve"in s&&(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 ${o} (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 Q=Symbol("insertBefore"),X=Symbol("insertAfter"),Y=Symbol("insertOrder"),ss=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?Q:X,r=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let i=e[o];Array.isArray(i)||(i=[i]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const cs=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return cs.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,r){const i=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),i))return r.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(i.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return r.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[Q]||s[X]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ss],id:o,stage:6}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:ns.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,r,i){let a,n;return a=getOptionsForBrowsersByFeature(e,t,s,i),!0===o[t.id]?r&&(a=Object.assign({},a,r)):a=r?Object.assign({},a,r,o[t.id]):Object.assign({},a,o[t.id]),a.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in a&&(a.replace=a.preserve),"overflow-wrap-property"===t.id&&"preserve"in a&&(a.method=a.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(a):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(a):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:a,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,r){const i=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,n=Object(e.insertBefore),c=Object(e.insertAfter),p=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&r.log(`Using features with ${l} or more vendor implementations`);const u=stageFromOptions(e,r);2===u&&o&&!1===o.preserve&&(s=JSON.parse(JSON.stringify(s))).forEach((s=>{("blank-pseudo-class"===s.id||"prefers-color-scheme-query"===s.id)&&(s.stage=1)}));const m=prepareFeaturesList(s,n,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[Q]&&!s[X])||(l<=s.vendors_implementations||(i[s.id]?(r.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(r.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=u,o=a||!Z.includes(s.id),t=!1===i[s.id],n=i[s.id]?i[s.id]:e&&o;return t?r.log(` ${s.id} has been disabled by options`):e?o||r.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):n?r.log(` ${s.id} does not meet the required stage but has been enabled by options`):r.log(` ${s.id} with stage ${s.stage} has been disabled`),n})).map((e=>formatStagedFeature(s,p,i,e,o,r))),d=t(p,{ignoreUnknownVersions:!0});return m.filter((s=>{if(s.id in i)return i[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||r.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&this.logs.forEach((e=>s.warn(e))),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-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return ps.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=ps.map((s=>s.id)),r=ps.map((s=>s.packageName)),i=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=mostSimilar(s,t),n=mostSimilar(s,r);Math.min(a.distance,n.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):a.distance{const r=new Logger,i=Object(t),a=Object.keys(Object(i.features)),n=i.browsers,c=initializeSharedOptions(i),p=listFeatures(e,i,c,r),l=p.map((s=>s.plugin));!1!==i.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:n},i.autoprefixer))),l.push(o()),logFeaturesList(p,i,r);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(a,s,e),i.debug&&r.dumpLogs(e),r.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator; +"use strict";var s=require("autoprefixer"),e=require("cssdb"),o=require("@csstools/postcss-progressive-custom-properties"),t=require("browserslist"),i=require("postcss-initial"),r=require("postcss-pseudo-class-any-link"),a=require("css-blank-pseudo"),c=require("postcss-page-break"),n=require("@csstools/postcss-cascade-layers"),p=require("postcss-attribute-case-insensitive"),l=require("postcss-clamp"),u=require("@csstools/postcss-color-function"),m=require("postcss-color-functional-notation"),d=require("postcss-custom-media"),g=require("postcss-custom-properties"),f=require("postcss-custom-selectors"),b=require("postcss-dir-pseudo-class"),h=require("@csstools/postcss-normalize-display-values"),N=require("postcss-double-position-gradients"),v=require("@csstools/postcss-logical-float-and-clear"),y=require("postcss-focus-visible"),k=require("postcss-focus-within"),w=require("@csstools/postcss-font-format-keywords"),q=require("postcss-font-variant"),F=require("postcss-gap-properties"),S=require("css-has-pseudo"),O=require("postcss-color-hex-alpha"),$=require("@csstools/postcss-hwb-function"),x=require("@csstools/postcss-ic-unit"),P=require("postcss-image-set-function"),C=require("@csstools/postcss-is-pseudo-class"),E=require("postcss-lab-function"),I=require("postcss-logical"),B=require("@csstools/postcss-logical-resize"),U=require("@csstools/postcss-logical-viewport-units"),_=require("@csstools/postcss-media-queries-aspect-ratio-number-values"),L=require("postcss-media-minmax"),A=require("@csstools/postcss-nested-calc"),R=require("postcss-nesting"),j=require("postcss-selector-not"),M=require("@csstools/postcss-oklab-function"),D=require("postcss-opacity-percentage"),V=require("postcss-overflow-shorthand"),W=require("postcss-replace-overflow-wrap"),z=require("postcss-place"),T=require("css-prefers-color-scheme"),H=require("postcss-color-rebeccapurple"),G=require("@csstools/postcss-scope-pseudo-class"),J=require("@csstools/postcss-stepped-value-functions"),K=require("@csstools/postcss-text-decoration-shorthand"),Z=require("@csstools/postcss-trigonometric-functions"),Q=require("@csstools/postcss-unset-value");const X={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},Y=["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!==X[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}: ${X[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 ${o} (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 ss=Symbol("insertBefore"),es=Symbol("insertAfter"),os=Symbol("insertOrder"),ts=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?ss:es,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let r=e[o];Array.isArray(r)||(r=[r]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const us=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return us.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,r){const a=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),a))return r.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(a.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return r.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[ss]||s[es]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ts],id:o,stage:6}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:ls.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,r,a){let c,n;return c=getOptionsForBrowsersByFeature(e,t,s,r,a),!0===o[t.id]?i&&(c=Object.assign({},c,i)):c=i?Object.assign({},c,i,o[t.id]):Object.assign({},c,o[t.id]),c.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in c&&(c.replace=c.preserve),"overflow-wrap-property"===t.id&&"preserve"in c&&(c.method=c.preserve?"copy":"replace"),n=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(c):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(c):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:n,pluginOptions:c,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const r=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,c=Object(e.insertBefore),n=Object(e.insertAfter),p=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const u=stageFromOptions(e,i);2===u&&o&&!1===o.preserve&&(s=JSON.parse(JSON.stringify(s))).forEach((s=>{("blank-pseudo-class"===s.id||"prefers-color-scheme-query"===s.id)&&(s.stage=1)}));const m=prepareFeaturesList(s,c,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[ss]&&!s[es])||(l<=s.vendors_implementations||(r[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=u,o=a||!Y.includes(s.id),t=!1===r[s.id],c=r[s.id]?r[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):c?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),c})).map((t=>formatStagedFeature(s,p,r,t,o,e,i))),d=t(p,{ignoreUnknownVersions:!0});return m.filter((s=>{if(s.id in r)return r[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&this.logs.forEach((e=>s.warn(e))),this.resetLogger()}}var ms=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return ms.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=ms.map((s=>s.id)),i=ms.map((s=>s.packageName)),r=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=mostSimilar(s,t),c=mostSimilar(s,i);Math.min(a.distance,c.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):a.distance{const i=new Logger,r=Object(t),a=Object.keys(Object(r.features)),c=r.browsers,n=initializeSharedOptions(r),p=listFeatures(e,r,n,i),l=p.map((s=>s.plugin));!1!==r.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:c},r.autoprefixer))),l.push(o()),logFeaturesList(p,r,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(a,s,e),r.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0,module.exports=creator; diff --git a/plugin-packs/postcss-preset-env/dist/index.mjs b/plugin-packs/postcss-preset-env/dist/index.mjs index 7021962d3..4f5593d99 100644 --- a/plugin-packs/postcss-preset-env/dist/index.mjs +++ b/plugin-packs/postcss-preset-env/dist/index.mjs @@ -1 +1 @@ -import s from"autoprefixer";import e from"cssdb";import o from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import r from"postcss-initial";import i from"postcss-pseudo-class-any-link";import a from"css-blank-pseudo";import p from"postcss-page-break";import n from"@csstools/postcss-cascade-layers";import c from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"postcss-custom-media";import f from"postcss-custom-properties";import g from"postcss-custom-selectors";import b from"postcss-dir-pseudo-class";import h from"@csstools/postcss-normalize-display-values";import N from"postcss-double-position-gradients";import y from"postcss-focus-visible";import k from"postcss-focus-within";import v from"@csstools/postcss-font-format-keywords";import w from"postcss-font-variant";import S from"postcss-gap-properties";import F from"css-has-pseudo";import O from"postcss-color-hex-alpha";import $ from"@csstools/postcss-hwb-function";import x from"@csstools/postcss-ic-unit";import P from"postcss-image-set-function";import E from"@csstools/postcss-is-pseudo-class";import C from"postcss-lab-function";import I from"postcss-logical";import B from"@csstools/postcss-media-queries-aspect-ratio-number-values";import U from"postcss-media-minmax";import _ from"@csstools/postcss-nested-calc";import q from"postcss-nesting";import A from"postcss-selector-not";import L from"@csstools/postcss-oklab-function";import R from"postcss-opacity-percentage";import j from"postcss-overflow-shorthand";import M from"postcss-replace-overflow-wrap";import D from"postcss-place";import W from"css-prefers-color-scheme";import V from"postcss-color-rebeccapurple";import T from"@csstools/postcss-scope-pseudo-class";import H from"@csstools/postcss-stepped-value-functions";import z from"@csstools/postcss-text-decoration-shorthand";import G from"@csstools/postcss-trigonometric-functions";import J from"@csstools/postcss-unset-value";const K={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},Z=["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=[],r=[];!1!==e.autoprefixer&&r.push(" autoprefixer"),s.forEach((s=>{s.id.startsWith("before")||s.id.startsWith("after")?r.push(` ${s.id} (injected via options)`):r.push(` ${s.id}`),void 0!==K[s.id]&&t.push(s.id)})),r.sort(((s,e)=>s.localeCompare(e))),t.sort(((s,e)=>s.localeCompare(e))),r.forEach((s=>o.log(s))),t.length&&(o.log("These feature(s) need a browser library to work:"),t.forEach((s=>o.log(` ${s}: ${K[s]}`))))}}function initializeSharedOptions(s){if("preserve"in s){const e={};return"preserve"in s&&(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 ${o} (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 Q=Symbol("insertBefore"),X=Symbol("insertAfter"),Y=Symbol("insertOrder"),ss=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?Q:X,r=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let i=e[o];Array.isArray(i)||(i=[i]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const ns=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return ns.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,r){const i=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),i))return r.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(i.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return r.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[Q]||s[X]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ss],id:o,stage:6}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:ps.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,r,i){let a,p;return a=getOptionsForBrowsersByFeature(e,t,s,i),!0===o[t.id]?r&&(a=Object.assign({},a,r)):a=r?Object.assign({},a,r,o[t.id]):Object.assign({},a,o[t.id]),a.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in a&&(a.replace=a.preserve),"overflow-wrap-property"===t.id&&"preserve"in a&&(a.method=a.preserve?"copy":"replace"),p=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(a):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(a):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:p,pluginOptions:a,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,r){const i=Object(e.features),a="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,p=Object(e.insertBefore),n=Object(e.insertAfter),c=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&r.log(`Using features with ${l} or more vendor implementations`);const m=stageFromOptions(e,r);2===m&&o&&!1===o.preserve&&(s=JSON.parse(JSON.stringify(s))).forEach((s=>{("blank-pseudo-class"===s.id||"prefers-color-scheme-query"===s.id)&&(s.stage=1)}));const u=prepareFeaturesList(s,p,n).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[Q]&&!s[X])||(l<=s.vendors_implementations||(i[s.id]?(r.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(r.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=m,o=a||!Z.includes(s.id),t=!1===i[s.id],p=i[s.id]?i[s.id]:e&&o;return t?r.log(` ${s.id} has been disabled by options`):e?o||r.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?r.log(` ${s.id} does not meet the required stage but has been enabled by options`):r.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((e=>formatStagedFeature(s,c,i,e,o,r))),d=t(c,{ignoreUnknownVersions:!0});return u.filter((s=>{if(s.id in i)return i[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||r.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&this.logs.forEach((e=>s.warn(e))),this.resetLogger()}}var cs=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return cs.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=cs.map((s=>s.id)),r=cs.map((s=>s.packageName)),i=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const a=mostSimilar(s,t),p=mostSimilar(s,r);Math.min(a.distance,p.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):a.distance{const r=new Logger,i=Object(t),a=Object.keys(Object(i.features)),p=i.browsers,n=initializeSharedOptions(i),c=listFeatures(e,i,n,r),l=c.map((s=>s.plugin));!1!==i.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:p},i.autoprefixer))),l.push(o()),logFeaturesList(c,i,r);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(a,s,e),i.debug&&r.dumpLogs(e),r.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default}; +import s from"autoprefixer";import e from"cssdb";import o from"@csstools/postcss-progressive-custom-properties";import t from"browserslist";import i from"postcss-initial";import a from"postcss-pseudo-class-any-link";import r from"css-blank-pseudo";import p from"postcss-page-break";import c from"@csstools/postcss-cascade-layers";import n from"postcss-attribute-case-insensitive";import l from"postcss-clamp";import m from"@csstools/postcss-color-function";import u from"postcss-color-functional-notation";import d from"postcss-custom-media";import f from"postcss-custom-properties";import g from"postcss-custom-selectors";import b from"postcss-dir-pseudo-class";import h from"@csstools/postcss-normalize-display-values";import N from"postcss-double-position-gradients";import v from"@csstools/postcss-logical-float-and-clear";import y from"postcss-focus-visible";import k from"postcss-focus-within";import w from"@csstools/postcss-font-format-keywords";import F from"postcss-font-variant";import S from"postcss-gap-properties";import O from"css-has-pseudo";import $ from"postcss-color-hex-alpha";import x from"@csstools/postcss-hwb-function";import P from"@csstools/postcss-ic-unit";import C from"postcss-image-set-function";import E from"@csstools/postcss-is-pseudo-class";import I from"postcss-lab-function";import B from"postcss-logical";import U from"@csstools/postcss-logical-resize";import _ from"@csstools/postcss-logical-viewport-units";import q from"@csstools/postcss-media-queries-aspect-ratio-number-values";import L from"postcss-media-minmax";import A from"@csstools/postcss-nested-calc";import R from"postcss-nesting";import j from"postcss-selector-not";import M from"@csstools/postcss-oklab-function";import D from"postcss-opacity-percentage";import V from"postcss-overflow-shorthand";import W from"postcss-replace-overflow-wrap";import z from"postcss-place";import T from"css-prefers-color-scheme";import H from"postcss-color-rebeccapurple";import G from"@csstools/postcss-scope-pseudo-class";import J from"@csstools/postcss-stepped-value-functions";import K from"@csstools/postcss-text-decoration-shorthand";import Z from"@csstools/postcss-trigonometric-functions";import Q from"@csstools/postcss-unset-value";const X={"blank-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md","focus-visible-pseudo-class":"https://github.com/WICG/focus-visible","focus-within-pseudo-class":"https://github.com/jsxtools/focus-within/blob/master/README-BROWSER.md","has-pseudo-class":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md","prefers-color-scheme-query":"https://github.com/csstools/postcss-plugins/blob/main/plugins/css-prefers-color-scheme/README-BROWSER.md"},Y=["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!==X[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}: ${X[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 ${o} (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 ss=Symbol("insertBefore"),es=Symbol("insertAfter"),os=Symbol("insertOrder"),ts=Symbol("plugin");function getTransformedInsertions(s,e,o){if("insertBefore"!==o&&"insertAfter"!==o)return[];const t="insertBefore"===o?ss:es,i=[];for(const o in e){if(!Object.hasOwnProperty.call(e,o))continue;if(!s.find((s=>s.id===o)))continue;let a=e[o];Array.isArray(a)||(a=[a]);for(let s=0;sfeatureIsInsertedOrHasAPlugin(s))).sort(((s,e)=>featureIsLess(s,e)))}const ms=["and_chr","and_ff","and_qq","and_uc","android","baidu","chrome","edge","firefox","ie","ie_mob","ios_saf","kaios","op_mini","op_mob","opera","safari","samsung"];function getUnsupportedBrowsersByFeature(s){if(!s)return[];if(!("browser_support"in s))return["> 0%"];const e=[];return ms.forEach((o=>{if("op_mini"===o&&void 0===s.browser_support[o])return void e.push("op_mini all");const t=s.browser_support[o];"string"==typeof t&&/^[0-9|.]+$/.test(t)?e.push(`${o} < ${s.browser_support[o]}`):e.push(`${o} >= 1`)})),e}function getOptionsForBrowsersByFeature(s,e,o,i,a){const r=t(s,{ignoreUnknownVersions:!0});switch(e.id){case"is-pseudo-class":return{onComplexSelector:"warning"};case"nesting-rules":if(needsOptionFor(o.find((s=>"is-pseudo-class"===s.id)),r))return a.log('Disabling :is on "nesting-rules" due to lack of browser support.'),{noIsPseudoSelector:!0};return{};case"any-link-pseudo-class":if(r.find((s=>s.startsWith("ie ")||s.startsWith("edge "))))return a.log('Adding area[href] fallbacks for ":any-link" support in Edge and IE.'),{subFeatures:{areaHrefNeedsFixing:!0}};return{};case"logical-properties-and-values":case"float-clear-logical-values":case"logical-resize":case"logical-viewport-units":return"logical"in i?i.logical:{};default:return{}}}function needsOptionFor(s,e){const o=getUnsupportedBrowsersByFeature(s);return!!e.some((s=>t(o,{ignoreUnknownVersions:!0}).some((e=>e===s))))}function formatPolyfillableFeature(s){const e=getUnsupportedBrowsersByFeature(s);if(s[ss]||s[es]){let o=s.id;return o=s.insertBefore?`before-${o}`:`after-${o}`,{browsers:e,vendors_implementations:s.vendors_implementations,plugin:s[ts],id:o,stage:6}}return{browsers:e,vendors_implementations:s.vendors_implementations,plugin:ls.get(s.id),id:s.id,stage:s.stage}}function formatStagedFeature(s,e,o,t,i,a,r){let p,c;return p=getOptionsForBrowsersByFeature(e,t,s,a,r),!0===o[t.id]?i&&(p=Object.assign({},p,i)):p=i?Object.assign({},p,i,o[t.id]):Object.assign({},p,o[t.id]),p.enableProgressiveCustomProperties=!1,"all-property"===t.id&&"preserve"in p&&(p.replace=p.preserve),"overflow-wrap-property"===t.id&&"preserve"in p&&(p.method=p.preserve?"copy":"replace"),c=t.plugin.postcss&&"function"==typeof t.plugin?t.plugin(p):t.plugin&&t.plugin.default&&"function"==typeof t.plugin.default&&t.plugin.default.postcss?t.plugin.default(p):t.plugin,{browsers:t.browsers,vendors_implementations:t.vendors_implementations,plugin:c,pluginOptions:p,id:t.id}}function intOrZero(s){const e=parseInt(s,10);return Number.isNaN(e)?0:e}function listFeatures(s,e,o,i){const a=Object(e.features),r="enableClientSidePolyfills"in e&&e.enableClientSidePolyfills,p=Object(e.insertBefore),c=Object(e.insertAfter),n=e.browsers,l=clamp(0,intOrZero(e.minimumVendorImplementations),3);l>0&&i.log(`Using features with ${l} or more vendor implementations`);const m=stageFromOptions(e,i);2===m&&o&&!1===o.preserve&&(s=JSON.parse(JSON.stringify(s))).forEach((s=>{("blank-pseudo-class"===s.id||"prefers-color-scheme-query"===s.id)&&(s.stage=1)}));const u=prepareFeaturesList(s,p,c).map((s=>formatPolyfillableFeature(s))).filter((s=>0===l||(!(!s[ss]&&!s[es])||(l<=s.vendors_implementations||(a[s.id]?(i.log(` ${s.id} does not meet the required vendor implementations but has been enabled by options`),!0):(i.log(` ${s.id} with ${s.vendors_implementations} vendor implementations has been disabled`),!1)))))).filter((s=>{const e=s.stage>=m,o=r||!Y.includes(s.id),t=!1===a[s.id],p=a[s.id]?a[s.id]:e&&o;return t?i.log(` ${s.id} has been disabled by options`):e?o||i.log(` ${s.id} has been disabled by "enableClientSidePolyfills: false".`):p?i.log(` ${s.id} does not meet the required stage but has been enabled by options`):i.log(` ${s.id} with stage ${s.stage} has been disabled`),p})).map((t=>formatStagedFeature(s,n,a,t,o,e,i))),d=t(n,{ignoreUnknownVersions:!0});return u.filter((s=>{if(s.id in a)return a[s.id];const e=t(s.browsers,{ignoreUnknownVersions:!0}),o=d.some((s=>e.some((e=>e===s))));return o||i.log(`${s.id} disabled due to browser support`),o}))}class Logger{constructor(){this.logs=[]}log(s){this.logs.push(s)}resetLogger(){this.logs.length=0}dumpLogs(s){s&&this.logs.forEach((e=>s.warn(e))),this.resetLogger()}}var us=[{packageName:"css-blank-pseudo",id:"blank-pseudo-class",importName:"postcssBlankPseudo"},{packageName:"css-has-pseudo",id:"has-pseudo-class",importName:"postcssHasPseudo"},{packageName:"css-prefers-color-scheme",id:"prefers-color-scheme-query",importName:"postcssPrefersColorScheme"},{packageName:"postcss-attribute-case-insensitive",id:"case-insensitive-attributes",importName:"postcssAttributeCaseInsensitive"},{packageName:"postcss-clamp",id:"clamp",importName:"postcssClamp"},{packageName:"@csstools/postcss-color-function",id:"color-function",importName:"postcssColorFunction"},{packageName:"postcss-color-functional-notation",id:"color-functional-notation",importName:"postcssColorFunctionalNotation"},{packageName:"postcss-color-hex-alpha",id:"hexadecimal-alpha-notation",importName:"postcssColorHexAlpha"},{packageName:"postcss-color-rebeccapurple",id:"rebeccapurple-color",importName:"postcssColorRebeccapurple"},{packageName:"postcss-custom-media",id:"custom-media-queries",importName:"postcssCustomMedia"},{packageName:"postcss-custom-properties",id:"custom-properties",importName:"postcssCustomProperties"},{packageName:"postcss-custom-selectors",id:"custom-selectors",importName:"postcssCustomSelectors"},{packageName:"postcss-dir-pseudo-class",id:"dir-pseudo-class",importName:"postcssDirPseudoClass"},{packageName:"postcss-double-position-gradients",id:"double-position-gradients",importName:"postcssDoublePositionGradients"},{packageName:"postcss-focus-visible",id:"focus-visible-pseudo-class",importName:"postcssFocusVisible"},{packageName:"postcss-focus-within",id:"focus-within-pseudo-class",importName:"postcssFocusWithin"},{packageName:"@csstools/postcss-font-format-keywords",id:"font-format-keywords",importName:"postcssFontFormatKeywords"},{packageName:"postcss-font-variant",id:"font-variant-property",importName:"postcssFontVariant"},{packageName:"postcss-gap-properties",id:"gap-properties",importName:"postcssGapProperties"},{packageName:"@csstools/postcss-hwb-function",id:"hwb-function",importName:"postcssHWBFunction"},{packageName:"@csstools/postcss-ic-unit",id:"ic-unit",importName:"postcssICUnit"},{packageName:"postcss-image-set-function",id:"image-set-function",importName:"postcssImageSetFunction"},{packageName:"postcss-initial",id:"all-property",importName:"postcssInitial"},{packageName:"@csstools/postcss-is-pseudo-class",id:"is-pseudo-class",importName:"postcssIsPseudoClass"},{packageName:"@csstools/postcss-scope-pseudo-class",id:"scope-pseudo-class",importName:"postcssScopePseudoClass"},{packageName:"postcss-lab-function",id:"lab-function",importName:"postcssLabFunction"},{packageName:"postcss-logical",id:"logical-properties-and-values",importName:"postcssLogical"},{packageName:"@csstools/postcss-logical-float-and-clear",id:"float-clear-logical-values",importName:"postcssLogicalFloatAndClear"},{packageName:"@csstools/postcss-logical-resize",id:"logical-resize",importName:"postcssLogicalResize"},{packageName:"@csstools/postcss-logical-viewport-units",id:"logical-viewport-units",importName:"postcssLogicalViewportUnits"},{packageName:"postcss-media-minmax",id:"media-query-ranges",importName:"postcssMediaMinmax"},{packageName:"@csstools/postcss-media-queries-aspect-ratio-number-values",id:"media-queries-aspect-ratio-number-values",importName:"postcssMediaQueriesAspectRatioNumberValues"},{packageName:"postcss-nesting",id:"nesting-rules",importName:"postcssNesting"},{packageName:"@csstools/postcss-normalize-display-values",id:"display-two-values",importName:"postcssNormalizeDisplayValues"},{packageName:"@csstools/postcss-oklab-function",id:"oklab-function",importName:"postcssOKLabFunction"},{packageName:"postcss-opacity-percentage",id:"opacity-percentage",importName:"postcssOpacityPercentage"},{packageName:"postcss-overflow-shorthand",id:"overflow-property",importName:"postcssOverflowShorthand"},{packageName:"postcss-page-break",id:"break-properties",importName:"postcssPageBreak"},{packageName:"postcss-place",id:"place-properties",importName:"postcssPlace"},{packageName:"postcss-pseudo-class-any-link",id:"any-link-pseudo-class",importName:"postcssPseudoClassAnyLink"},{packageName:"postcss-replace-overflow-wrap",id:"overflow-wrap-property",importName:"postcssReplaceOverflowWrap"},{packageName:"postcss-selector-not",id:"not-pseudo-class",importName:"postcssSelectorNot"},{packageName:"@csstools/postcss-stepped-value-functions",id:"stepped-value-functions",importName:"postcssSteppedValueFunctions"},{packageName:"postcss-system-ui-font-family",importedPackage:"../patch/postcss-system-ui-font-family.mjs",id:"system-ui-font-family",importName:"postcssFontFamilySystemUI"},{packageName:"@csstools/postcss-unset-value",id:"unset-value",importName:"postcssUnsetValue"},{packageName:"@csstools/postcss-cascade-layers",id:"cascade-layers",importName:"postcssCascadeLayers"},{packageName:"@csstools/postcss-trigonometric-functions",id:"trigonometric-functions",importName:"postcssTrigonometricFunctions"},{packageName:"@csstools/postcss-nested-calc",id:"nested-calc",importName:"postcssNestedCalc"},{packageName:"@csstools/postcss-text-decoration-shorthand",id:"text-decoration-shorthand",importName:"postcssTextDecorationShorthand"}];function getPackageNamesToIds(){const s={};return us.forEach((e=>{s[e.packageName]=e.id})),s}function pluginIdHelp(s,e,o){const t=us.map((s=>s.id)),i=us.map((s=>s.packageName)),a=getPackageNamesToIds();s.forEach((s=>{if(t.includes(s))return;const r=mostSimilar(s,t),p=mostSimilar(s,i);Math.min(r.distance,p.distance)>10?e.warn(o`Unknown feature: "${s}", see the list of features https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md`):r.distance{const i=new Logger,a=Object(t),r=Object.keys(Object(a.features)),p=a.browsers,c=initializeSharedOptions(a),n=listFeatures(e,a,c,i),l=n.map((s=>s.plugin));!1!==a.autoprefixer&&l.push(s(Object.assign({overrideBrowserslist:p},a.autoprefixer))),l.push(o()),logFeaturesList(n,a,i);const internalPlugin=()=>({postcssPlugin:"postcss-preset-env",OnceExit:function(s,{result:e}){pluginIdHelp(r,s,e),a.debug&&i.dumpLogs(e),i.resetLogger()}});return internalPlugin.postcss=!0,{postcssPlugin:"postcss-preset-env",plugins:[...l,internalPlugin()]}};creator.postcss=!0;export{creator as default}; diff --git a/plugin-packs/postcss-preset-env/dist/options.d.ts b/plugin-packs/postcss-preset-env/dist/options.d.ts index 349b88099..dd1ee72d8 100644 --- a/plugin-packs/postcss-preset-env/dist/options.d.ts +++ b/plugin-packs/postcss-preset-env/dist/options.d.ts @@ -1,5 +1,11 @@ import type autoprefixer from 'autoprefixer'; import { pluginsOptions } from './plugins/plugins-options'; +export declare enum DirectionFlow { + TopToBottom = "top-to-bottom", + BottomToTop = "bottom-to-top", + RightToLeft = "right-to-left", + LeftToRight = "left-to-right" +} export type pluginOptions = { /** * Determine which CSS features to polyfill, @@ -63,4 +69,14 @@ export type pluginOptions = { * default: false */ debug?: boolean; + /** + * The `logical` object allows to configure all plugins related to logical document flow at once. + * It accepts the same options as each plugin: `inlineDirection` and `blockDirection`. + */ + logical?: { + /** Set the inline flow direction. default: left-to-right */ + inlineDirection?: DirectionFlow; + /** Set the block flow direction. default: top-to-bottom */ + blockDirection?: DirectionFlow; + }; }; diff --git a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts index 7be79c4be..013d7421e 100644 --- a/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts +++ b/plugin-packs/postcss-preset-env/dist/plugins/plugins-options.d.ts @@ -13,6 +13,7 @@ import type { pluginOptions as postcssCustomSelectors } from 'postcss-custom-sel import type { pluginOptions as postcssDirPseudoClass } from 'postcss-dir-pseudo-class'; import type { pluginOptions as postcssNormalizeDisplayValues } from '@csstools/postcss-normalize-display-values'; import type { pluginOptions as postcssDoublePositionGradients } from 'postcss-double-position-gradients'; +import type { pluginOptions as postcssLogicalFloatAndClear } from '@csstools/postcss-logical-float-and-clear'; import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible'; import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within'; import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords'; @@ -25,7 +26,9 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit'; import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function'; import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class'; import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function'; -import type { pluginOptions as postcssLogical } from '../types/postcss-logical/plugin-options'; +import type { pluginOptions as postcssLogical } from 'postcss-logical'; +import type { pluginOptions as postcssLogicalResize } from '@csstools/postcss-logical-resize'; +import type { pluginOptions as postcssLogicalViewportUnits } from '@csstools/postcss-logical-viewport-units'; import type { pluginOptions as postcssMediaQueriesAspectRatioNumberValues } from '@csstools/postcss-media-queries-aspect-ratio-number-values'; import type { pluginOptions as postcssMediaMinmax } from '../types/postcss-media-minmax/plugin-options'; import type { pluginOptions as postcssNestedCalc } from '@csstools/postcss-nested-calc'; @@ -75,6 +78,8 @@ export type pluginsOptions = { 'display-two-values'?: postcssNormalizeDisplayValues | boolean; /** plugin options for "postcss-double-position-gradients" */ 'double-position-gradients'?: postcssDoublePositionGradients | boolean; + /** plugin options for "@csstools/postcss-logical-float-and-clear" */ + 'float-clear-logical-values'?: postcssLogicalFloatAndClear | boolean; /** plugin options for "postcss-focus-visible" */ 'focus-visible-pseudo-class'?: postcssFocusVisible | boolean; /** plugin options for "postcss-focus-within" */ @@ -101,6 +106,10 @@ export type pluginsOptions = { 'lab-function'?: postcssLabFunction | boolean; /** plugin options for "postcss-logical" */ 'logical-properties-and-values'?: postcssLogical | boolean; + /** plugin options for "@csstools/postcss-logical-resize" */ + 'logical-resize'?: postcssLogicalResize | boolean; + /** plugin options for "@csstools/postcss-logical-viewport-units" */ + 'logical-viewport-units'?: postcssLogicalViewportUnits | boolean; /** plugin options for "@csstools/postcss-media-queries-aspect-ratio-number-values" */ 'media-queries-aspect-ratio-number-values'?: postcssMediaQueriesAspectRatioNumberValues | boolean; /** plugin options for "postcss-media-minmax" */ diff --git a/plugin-packs/postcss-preset-env/dist/types/postcss-logical/plugin-options.d.ts b/plugin-packs/postcss-preset-env/dist/types/postcss-logical/plugin-options.d.ts deleted file mode 100644 index 0f5b4789d..000000000 --- a/plugin-packs/postcss-preset-env/dist/types/postcss-logical/plugin-options.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** postcss-logical plugin options */ -export type pluginOptions = { - /** Preserve the original notation. default: false */ - preserve?: boolean; - /** Assume a direction for the document. default: null */ - dir?: 'ltr' | 'rtl'; -}; diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index b01ac57cb..ea709a458 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -34,6 +34,9 @@ "@csstools/postcss-hwb-function": "^1.0.2", "@csstools/postcss-ic-unit": "^1.0.1", "@csstools/postcss-is-pseudo-class": "^2.0.7", + "@csstools/postcss-logical-float-and-clear": "^1.0.0", + "@csstools/postcss-logical-resize": "^1.0.0", + "@csstools/postcss-logical-viewport-units": "^1.0.0", "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", "@csstools/postcss-nested-calc": "^1.0.0", "@csstools/postcss-normalize-display-values": "^1.0.1", diff --git a/plugin-packs/postcss-preset-env/scripts/plugins-data.json b/plugin-packs/postcss-preset-env/scripts/plugins-data.json index f3a3454d5..e5057da40 100644 --- a/plugin-packs/postcss-preset-env/scripts/plugins-data.json +++ b/plugin-packs/postcss-preset-env/scripts/plugins-data.json @@ -134,6 +134,21 @@ "id": "logical-properties-and-values", "importName": "postcssLogical" }, + { + "packageName": "@csstools/postcss-logical-float-and-clear", + "id": "float-clear-logical-values", + "importName": "postcssLogicalFloatAndClear" + }, + { + "packageName": "@csstools/postcss-logical-resize", + "id": "logical-resize", + "importName": "postcssLogicalResize" + }, + { + "packageName": "@csstools/postcss-logical-viewport-units", + "id": "logical-viewport-units", + "importName": "postcssLogicalViewportUnits" + }, { "packageName": "postcss-media-minmax", "id": "media-query-ranges", diff --git a/plugin-packs/postcss-preset-env/src/index.ts b/plugin-packs/postcss-preset-env/src/index.ts index 61826c771..86265d685 100644 --- a/plugin-packs/postcss-preset-env/src/index.ts +++ b/plugin-packs/postcss-preset-env/src/index.ts @@ -20,9 +20,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { const sharedOptions = initializeSharedOptions(options); const features = listFeatures(cssdb, options, sharedOptions, logger); - const plugins = features.map((feature) => { - return feature.plugin; - }); + const plugins = features.map((feature) => feature.plugin); if (options.autoprefixer !== false) { plugins.push( diff --git a/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs b/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs index 671fd0019..750c1e1a7 100644 --- a/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/format-feature.mjs @@ -33,41 +33,41 @@ export function formatPolyfillableFeature(feature) { }; } -export function formatStagedFeature(cssdbList, browsers, features, feature, sharedOptions, logger) { - let options; +export function formatStagedFeature(cssdbList, browsers, features, feature, sharedOptions, options, logger) { + let pluginOption; let plugin; - options = getOptionsForBrowsersByFeature(browsers, feature, cssdbList, logger); + pluginOption = getOptionsForBrowsersByFeature(browsers, feature, cssdbList, options, logger); if (features[feature.id] === true) { if (sharedOptions) { - options = Object.assign({}, options, sharedOptions); + pluginOption = Object.assign({}, pluginOption, sharedOptions); } } else { if (sharedOptions) { - options = Object.assign({}, options, sharedOptions, features[feature.id]); + pluginOption = Object.assign({}, pluginOption, sharedOptions, features[feature.id]); } else { - options = Object.assign({}, options, features[feature.id]); + pluginOption = Object.assign({}, pluginOption, features[feature.id]); } } // postcss-preset-env : option overrides - options.enableProgressiveCustomProperties = false; + pluginOption.enableProgressiveCustomProperties = false; // https://github.com/maximkoretskiy/postcss-initial#replace - if (feature.id === 'all-property' && 'preserve' in options) { - options.replace = options.preserve; + if (feature.id === 'all-property' && 'preserve' in pluginOption) { + pluginOption.replace = pluginOption.preserve; } // https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10 - if (feature.id === 'overflow-wrap-property' && 'preserve' in options) { - options.method = options.preserve ? 'copy' : 'replace'; + if (feature.id === 'overflow-wrap-property' && 'preserve' in pluginOption) { + pluginOption.method = pluginOption.preserve ? 'copy' : 'replace'; } if (feature.plugin.postcss && typeof feature.plugin === 'function') { - plugin = feature.plugin(options); + plugin = feature.plugin(pluginOption); } else if (feature.plugin && feature.plugin.default && typeof feature.plugin.default === 'function' && feature.plugin.default.postcss) { - plugin = feature.plugin.default(options); + plugin = feature.plugin.default(pluginOption); } else { plugin = feature.plugin; } @@ -76,7 +76,7 @@ export function formatStagedFeature(cssdbList, browsers, features, feature, shar browsers: feature.browsers, vendors_implementations: feature.vendors_implementations, plugin: plugin, - pluginOptions: options, + pluginOptions: pluginOption, id: feature.id, }; } diff --git a/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.mjs b/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.mjs index f1db958cf..0dbe0f2aa 100644 --- a/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/get-options-for-browsers-by-feature.mjs @@ -2,7 +2,7 @@ import browserslist from 'browserslist'; import getUnsupportedBrowsersByFeature from './get-unsupported-browsers-by-feature.mjs'; // add extra options for certain browsers by feature -export default function getOptionsForBrowsersByFeature(browsers, feature, cssdbList, logger) { +export default function getOptionsForBrowsersByFeature(browsers, feature, cssdbList, options, logger) { const supportedBrowsers = browserslist(browsers, { ignoreUnknownVersions: true }); switch (feature.id) { @@ -45,6 +45,17 @@ export default function getOptionsForBrowsersByFeature(browsers, feature, cssdbL } } + return {}; + case 'logical-properties-and-values': + case 'float-clear-logical-values': + case 'logical-resize': + case 'logical-viewport-units': + { + if ('logical' in options) { + return options.logical; + } + } + return {}; default: diff --git a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs index b892ad48d..e5a62b128 100644 --- a/plugin-packs/postcss-preset-env/src/lib/list-features.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/list-features.mjs @@ -93,7 +93,7 @@ export function listFeatures(cssdbList, options, sharedOptions, logger) { return isAllowedFeature; }).map((feature) => { - return formatStagedFeature(cssdbList, browsers, features, feature, sharedOptions, logger); + return formatStagedFeature(cssdbList, browsers, features, feature, sharedOptions, options, logger); }); // browsers supported by the configuration diff --git a/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs b/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs index fa46a98a5..7444c8aa4 100644 --- a/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs +++ b/plugin-packs/postcss-preset-env/src/lib/shared-options.mjs @@ -1,11 +1,7 @@ export function initializeSharedOptions(opts) { if ('preserve' in opts) { const sharedOptions = {}; - - if ('preserve' in opts) { - sharedOptions.preserve = opts.preserve; - } - + sharedOptions.preserve = opts.preserve; return sharedOptions; } diff --git a/plugin-packs/postcss-preset-env/src/options.ts b/plugin-packs/postcss-preset-env/src/options.ts index fad49438a..a9de6f868 100644 --- a/plugin-packs/postcss-preset-env/src/options.ts +++ b/plugin-packs/postcss-preset-env/src/options.ts @@ -1,6 +1,13 @@ import type autoprefixer from 'autoprefixer'; import { pluginsOptions } from './plugins/plugins-options'; +export enum DirectionFlow { + TopToBottom = 'top-to-bottom', + BottomToTop = 'bottom-to-top', + RightToLeft = 'right-to-left', + LeftToRight = 'left-to-right', +} + export type pluginOptions = { /** * Determine which CSS features to polyfill, @@ -73,4 +80,15 @@ export type pluginOptions = { * default: false */ debug?: boolean + + /** + * The `logical` object allows to configure all plugins related to logical document flow at once. + * It accepts the same options as each plugin: `inlineDirection` and `blockDirection`. + */ + logical?: { + /** Set the inline flow direction. default: left-to-right */ + inlineDirection?: DirectionFlow + /** Set the block flow direction. default: top-to-bottom */ + blockDirection?: DirectionFlow + } } diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs index 94d133417..34fc27466 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs @@ -13,6 +13,7 @@ import postcssCustomSelectors from 'postcss-custom-selectors'; import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values'; import postcssDoublePositionGradients from 'postcss-double-position-gradients'; +import postcssLogicalFloatAndClear from '@csstools/postcss-logical-float-and-clear'; import postcssFocusVisible from 'postcss-focus-visible'; import postcssFocusWithin from 'postcss-focus-within'; import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords'; @@ -26,6 +27,8 @@ import postcssImageSetFunction from 'postcss-image-set-function'; import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class'; import postcssLabFunction from 'postcss-lab-function'; import postcssLogical from 'postcss-logical'; +import postcssLogicalResize from '@csstools/postcss-logical-resize'; +import postcssLogicalViewportUnits from '@csstools/postcss-logical-viewport-units'; import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values'; import postcssMediaMinmax from 'postcss-media-minmax'; import postcssNestedCalc from '@csstools/postcss-nested-calc'; @@ -63,6 +66,7 @@ export const pluginsById = new Map( ['dir-pseudo-class', postcssDirPseudoClass], ['display-two-values', postcssNormalizeDisplayValues], ['double-position-gradients', postcssDoublePositionGradients], + ['float-clear-logical-values', postcssLogicalFloatAndClear], ['focus-visible-pseudo-class', postcssFocusVisible], ['focus-within-pseudo-class', postcssFocusWithin], ['font-format-keywords', postcssFontFormatKeywords], @@ -76,6 +80,8 @@ export const pluginsById = new Map( ['is-pseudo-class', postcssIsPseudoClass], ['lab-function', postcssLabFunction], ['logical-properties-and-values', postcssLogical], + ['logical-resize', postcssLogicalResize], + ['logical-viewport-units', postcssLogicalViewportUnits], ['media-queries-aspect-ratio-number-values', postcssMediaQueriesAspectRatioNumberValues], ['media-query-ranges', postcssMediaMinmax], ['nested-calc', postcssNestedCalc], diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs index a331cd0e8..4dadbaf80 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs @@ -134,6 +134,21 @@ export default [ 'id': 'logical-properties-and-values', 'importName': 'postcssLogical', }, + { + 'packageName': '@csstools/postcss-logical-float-and-clear', + 'id': 'float-clear-logical-values', + 'importName': 'postcssLogicalFloatAndClear', + }, + { + 'packageName': '@csstools/postcss-logical-resize', + 'id': 'logical-resize', + 'importName': 'postcssLogicalResize', + }, + { + 'packageName': '@csstools/postcss-logical-viewport-units', + 'id': 'logical-viewport-units', + 'importName': 'postcssLogicalViewportUnits', + }, { 'packageName': 'postcss-media-minmax', 'id': 'media-query-ranges', diff --git a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts index 4083e70e7..236d6de65 100644 --- a/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts +++ b/plugin-packs/postcss-preset-env/src/plugins/plugins-options.ts @@ -13,6 +13,7 @@ import type { pluginOptions as postcssCustomSelectors } from 'postcss-custom-sel import type { pluginOptions as postcssDirPseudoClass } from 'postcss-dir-pseudo-class'; import type { pluginOptions as postcssNormalizeDisplayValues } from '@csstools/postcss-normalize-display-values'; import type { pluginOptions as postcssDoublePositionGradients } from 'postcss-double-position-gradients'; +import type { pluginOptions as postcssLogicalFloatAndClear } from '@csstools/postcss-logical-float-and-clear'; import type { pluginOptions as postcssFocusVisible } from 'postcss-focus-visible'; import type { pluginOptions as postcssFocusWithin } from 'postcss-focus-within'; import type { pluginOptions as postcssFontFormatKeywords } from '@csstools/postcss-font-format-keywords'; @@ -25,7 +26,9 @@ import type { pluginOptions as postcssICUnit } from '@csstools/postcss-ic-unit'; import type { pluginOptions as postcssImageSetFunction } from 'postcss-image-set-function'; import type { pluginOptions as postcssIsPseudoClass } from '@csstools/postcss-is-pseudo-class'; import type { pluginOptions as postcssLabFunction } from 'postcss-lab-function'; -import type { pluginOptions as postcssLogical } from '../types/postcss-logical/plugin-options'; +import type { pluginOptions as postcssLogical } from 'postcss-logical'; +import type { pluginOptions as postcssLogicalResize } from '@csstools/postcss-logical-resize'; +import type { pluginOptions as postcssLogicalViewportUnits } from '@csstools/postcss-logical-viewport-units'; import type { pluginOptions as postcssMediaQueriesAspectRatioNumberValues } from '@csstools/postcss-media-queries-aspect-ratio-number-values'; import type { pluginOptions as postcssMediaMinmax } from '../types/postcss-media-minmax/plugin-options'; import type { pluginOptions as postcssNestedCalc } from '@csstools/postcss-nested-calc'; @@ -76,6 +79,8 @@ export type pluginsOptions = { 'display-two-values'?: postcssNormalizeDisplayValues | boolean /** plugin options for "postcss-double-position-gradients" */ 'double-position-gradients'?: postcssDoublePositionGradients | boolean + /** plugin options for "@csstools/postcss-logical-float-and-clear" */ + 'float-clear-logical-values'?: postcssLogicalFloatAndClear | boolean /** plugin options for "postcss-focus-visible" */ 'focus-visible-pseudo-class'?: postcssFocusVisible | boolean /** plugin options for "postcss-focus-within" */ @@ -102,6 +107,10 @@ export type pluginsOptions = { 'lab-function'?: postcssLabFunction | boolean /** plugin options for "postcss-logical" */ 'logical-properties-and-values'?: postcssLogical | boolean + /** plugin options for "@csstools/postcss-logical-resize" */ + 'logical-resize'?: postcssLogicalResize | boolean + /** plugin options for "@csstools/postcss-logical-viewport-units" */ + 'logical-viewport-units'?: postcssLogicalViewportUnits | boolean /** plugin options for "@csstools/postcss-media-queries-aspect-ratio-number-values" */ 'media-queries-aspect-ratio-number-values'?: postcssMediaQueriesAspectRatioNumberValues | boolean /** plugin options for "postcss-media-minmax" */ diff --git a/plugin-packs/postcss-preset-env/src/test/lib/format-staged-feature.mjs b/plugin-packs/postcss-preset-env/src/test/lib/format-staged-feature.mjs index 8ec0fed1c..75609b446 100644 --- a/plugin-packs/postcss-preset-env/src/test/lib/format-staged-feature.mjs +++ b/plugin-packs/postcss-preset-env/src/test/lib/format-staged-feature.mjs @@ -18,6 +18,7 @@ assert.deepStrictEqual( vendors_implementations: 1, }, undefined, + undefined, testLogger.logger, ), { @@ -52,6 +53,7 @@ assert.deepStrictEqual( vendors_implementations: 1, }, undefined, + undefined, testLogger.logger, ), { @@ -88,6 +90,43 @@ assert.deepStrictEqual( { shared: true, }, + undefined, + testLogger.logger, + ), + { + browsers: [ + 'ie >= 1', + ], + vendors_implementations: 1, + plugin: true, + pluginOptions: { + subFeatures: { + areaHrefNeedsFixing: true, + }, + enableProgressiveCustomProperties: false, + shared: true, + }, + id: 'any-link-pseudo-class', + }, +); + +assert.deepStrictEqual( + formatStagedFeature( + [], + ['ie >= 1'], + {}, + { + id: 'any-link-pseudo-class', + plugin: true, + browsers: [ + 'ie >= 1', + ], + vendors_implementations: 1, + }, + { + shared: true, + }, + undefined, testLogger.logger, ), { @@ -107,6 +146,7 @@ assert.deepStrictEqual( }, ); +// Logical does not get passed to a non-logical plugin assert.deepStrictEqual( formatStagedFeature( [], @@ -123,6 +163,11 @@ assert.deepStrictEqual( { shared: true, }, + { + logical: { + inlineDirection: 'right-to-left', + }, + }, testLogger.logger, ), { @@ -141,3 +186,54 @@ assert.deepStrictEqual( id: 'any-link-pseudo-class', }, ); + + +{ +// Logical gets passed to a logical plugin + const logicalPlugins = [ + 'logical-properties-and-values', + 'float-clear-logical-values', + 'logical-resize', + 'logical-viewport-units', + ]; + + for (const plugin of logicalPlugins) { + assert.deepStrictEqual( + formatStagedFeature( + [], + ['ie >= 1'], + {}, + { + id: plugin, + plugin: true, + browsers: [ + 'ie >= 1', + ], + vendors_implementations: 1, + }, + { + shared: true, + }, + { + logical: { + inlineDirection: 'right-to-left', + }, + }, + testLogger.logger, + ), + { + browsers: [ + 'ie >= 1', + ], + vendors_implementations: 1, + plugin: true, + pluginOptions: { + enableProgressiveCustomProperties: false, + shared: true, + inlineDirection: 'right-to-left', + }, + id: plugin, + }, + ); + } +} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts b/plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts deleted file mode 100644 index b672797f4..000000000 --- a/plugin-packs/postcss-preset-env/src/types/postcss-logical/index.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare module 'postcss-logical' { - /** postcss-logical plugin options */ - export type pluginOptions = { - /** Preserve the original notation. default: false */ - preserve?: boolean, - /** Assume a direction for the document. default: null */ - dir?: 'ltr' | 'rtl' - }; -} diff --git a/plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts b/plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts deleted file mode 100644 index ae080e6b5..000000000 --- a/plugin-packs/postcss-preset-env/src/types/postcss-logical/plugin-options.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** postcss-logical plugin options */ -export type pluginOptions = { - /** Preserve the original notation. default: false */ - preserve?: boolean, - /** Assume a direction for the document. default: null */ - dir?: 'ltr' | 'rtl' -}; 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 a70a2cfd7..573ccc0ad 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -31,11 +31,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 a70a2cfd7..573ccc0ad 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 @@ -31,11 +31,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 63cdda0ae..c92c1c8ea 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -24,11 +24,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index 06a84a29b..9b1f83b5c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -31,11 +31,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index 0366557f5..bca8608ab 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -31,11 +31,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index 0366557f5..bca8608ab 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -31,11 +31,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 37870645c..c25040ca1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -16,9 +16,18 @@ } .test-logical-properties-and-values { - margin-inline: auto; + margin-inline-start: 1px; + margin-inline-end: 2px; order: 3; - padding-block: 5px; + padding-block: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vi + 5px); } .test-nesting-rules { diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index 8a35683f5..aee0f6da9 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -32,11 +32,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 fc1d165e3..dd8bd73a8 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -30,11 +30,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 607f130a1..119e817a1 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -30,9 +30,19 @@ } .test-logical-properties-and-values { - margin-inline: auto; + margin-inline-start: 1px; + margin-inline-end: 2px; order: 3; - padding-block: 5px; + padding-block: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css new file mode 100644 index 000000000..93be626d6 --- /dev/null +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -0,0 +1,649 @@ +:root { + --order: 1; +} + +.test-custom-property-fallbacks { + --firebrick: rgb(179, 35, 35); +} + +@supports (color: color(display-p3 0 0 0)) { +.test-custom-property-fallbacks { + --firebrick: color(display-p3 0.64331 0.19245 0.16771); +} +} + +.test-custom-properties { + order: 1; + order: var(--order); +} + +.test-image-set-function { + background-image: url(img/test.png); + background-image: -webkit-image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); + background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x); + order: 2; +} + +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + +.test-image-set-function { + background-image: url(img/test-2x.png); +} +} + +.test-logical-properties-and-values { + margin-right: 1px; + margin-left: 2px; + order: 3; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); +} + +.test-nesting-rules { + order: 4; +} + +.test-nesting-rules p { + order: 5; + } + +.test-nesting-rules { + + order: 6; +} + +.test-nesting-rules, +#test-is-pseudo { + order: 7; +} + +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + +.test-nesting-rules, +#test-is-pseudo { + + order: 9; +} + +@media (max-width: 30em) { + .test-custom-media-queries { + order: 10; + } +} + +@media (min-width: 480px) and (max-width: 767px) { + .test-media-query-ranges { + order: 11; + } +} + +@media (prefers-color-scheme: dark) { + body { + background-color: black; + color: white; + } +} + +h1.test-custom-selectors { + order:12; +} + +h2.test-custom-selectors { + order:12; +} + +h3.test-custom-selectors { + order:12; +} + +h4.test-custom-selectors { + order:12; +} + +h5.test-custom-selectors { + order:12; +} + +h6.test-custom-selectors { + order:12; +} + +.test-case-insensitive-attributes[frame=hsides],.test-case-insensitive-attributes[frame=Hsides],.test-case-insensitive-attributes[frame=hSides],.test-case-insensitive-attributes[frame=HSides],.test-case-insensitive-attributes[frame=hsIdes],.test-case-insensitive-attributes[frame=HsIdes],.test-case-insensitive-attributes[frame=hSIdes],.test-case-insensitive-attributes[frame=HSIdes],.test-case-insensitive-attributes[frame=hsiDes],.test-case-insensitive-attributes[frame=HsiDes],.test-case-insensitive-attributes[frame=hSiDes],.test-case-insensitive-attributes[frame=HSiDes],.test-case-insensitive-attributes[frame=hsIDes],.test-case-insensitive-attributes[frame=HsIDes],.test-case-insensitive-attributes[frame=hSIDes],.test-case-insensitive-attributes[frame=HSIDes],.test-case-insensitive-attributes[frame=hsidEs],.test-case-insensitive-attributes[frame=HsidEs],.test-case-insensitive-attributes[frame=hSidEs],.test-case-insensitive-attributes[frame=HSidEs],.test-case-insensitive-attributes[frame=hsIdEs],.test-case-insensitive-attributes[frame=HsIdEs],.test-case-insensitive-attributes[frame=hSIdEs],.test-case-insensitive-attributes[frame=HSIdEs],.test-case-insensitive-attributes[frame=hsiDEs],.test-case-insensitive-attributes[frame=HsiDEs],.test-case-insensitive-attributes[frame=hSiDEs],.test-case-insensitive-attributes[frame=HSiDEs],.test-case-insensitive-attributes[frame=hsIDEs],.test-case-insensitive-attributes[frame=HsIDEs],.test-case-insensitive-attributes[frame=hSIDEs],.test-case-insensitive-attributes[frame=HSIDEs],.test-case-insensitive-attributes[frame=hsideS],.test-case-insensitive-attributes[frame=HsideS],.test-case-insensitive-attributes[frame=hSideS],.test-case-insensitive-attributes[frame=HSideS],.test-case-insensitive-attributes[frame=hsIdeS],.test-case-insensitive-attributes[frame=HsIdeS],.test-case-insensitive-attributes[frame=hSIdeS],.test-case-insensitive-attributes[frame=HSIdeS],.test-case-insensitive-attributes[frame=hsiDeS],.test-case-insensitive-attributes[frame=HsiDeS],.test-case-insensitive-attributes[frame=hSiDeS],.test-case-insensitive-attributes[frame=HSiDeS],.test-case-insensitive-attributes[frame=hsIDeS],.test-case-insensitive-attributes[frame=HsIDeS],.test-case-insensitive-attributes[frame=hSIDeS],.test-case-insensitive-attributes[frame=HSIDeS],.test-case-insensitive-attributes[frame=hsidES],.test-case-insensitive-attributes[frame=HsidES],.test-case-insensitive-attributes[frame=hSidES],.test-case-insensitive-attributes[frame=HSidES],.test-case-insensitive-attributes[frame=hsIdES],.test-case-insensitive-attributes[frame=HsIdES],.test-case-insensitive-attributes[frame=hSIdES],.test-case-insensitive-attributes[frame=HSIdES],.test-case-insensitive-attributes[frame=hsiDES],.test-case-insensitive-attributes[frame=HsiDES],.test-case-insensitive-attributes[frame=hSiDES],.test-case-insensitive-attributes[frame=HSiDES],.test-case-insensitive-attributes[frame=hsIDES],.test-case-insensitive-attributes[frame=HsIDES],.test-case-insensitive-attributes[frame=hSIDES],.test-case-insensitive-attributes[frame=HSIDES] { + order: 13; +} + +.test-rebeccapurple-color { + color: #639; + order: 14; +} + +.test-hexadecimal-alpha-notation { + background-color: rgba(243,243,243,0.95294); + color: rgba(0,0,0,0.2); + order: 15; +} + +.test-color-functional-notation { + color: rgba(178, 34, 34, 0.5); + order: 16; +} + +.test-lab-function { + background-color: rgb(179, 35, 35); + background-color: color(display-p3 0.64331 0.19245 0.16771); + color: rgba(179, 34, 35, 0.5); + color: color(display-p3 0.64368 0.19188 0.16791 / 50%); + order: 17; +} + +.test-system-ui-font-family { + font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + order: 18; +} + +.test-font-variant-property { + font-feature-settings: "smcp"; + font-variant-caps: small-caps; + order: 19; +} + +.test-all-property { + animation: none 0s ease 0s 1 normal none running; + -webkit-backface-visibility: visible; + backface-visibility: visible; + background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; + border: medium none currentColor; + border-collapse: separate; + -o-border-image: none; + border-image: none; + border-radius: 0; + border-spacing: 0; + bottom: auto; + box-shadow: none; + box-sizing: content-box; + caption-side: top; + clear: none; + clip: auto; + color: #000; + -moz-columns: auto; + columns: auto; + -moz-column-count: auto; + column-count: auto; + -moz-column-fill: balance; + column-fill: balance; + -moz-column-gap: normal; + column-gap: normal; + -moz-column-rule: medium none currentColor; + column-rule: medium none currentColor; + -moz-column-span: 1; + column-span: 1; + -moz-column-width: auto; + column-width: auto; + content: normal; + counter-increment: none; + counter-reset: none; + cursor: auto; + direction: ltr; + display: inline; + empty-cells: show; + float: none; + font-family: serif; + font-size: medium; + font-style: normal; + font-variant: normal; + font-weight: normal; + font-stretch: normal; + line-height: normal; + height: auto; + -webkit-hyphens: none; + hyphens: none; + left: auto; + letter-spacing: normal; + list-style: disc outside none; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + opacity: 1; + orphans: 2; + outline: medium none invert; + overflow: visible; + overflow-x: visible; + overflow-y: visible; + padding: 0; + page-break-after: auto; + page-break-before: auto; + page-break-inside: auto; + perspective: none; + perspective-origin: 50% 50%; + position: static; + right: auto; + -moz-tab-size: 8; + -o-tab-size: 8; + tab-size: 8; + table-layout: auto; + text-align: left; + -moz-text-align-last: auto; + text-align-last: auto; + -webkit-text-decoration: none; + text-decoration: none; + text-indent: 0; + text-shadow: none; + text-transform: none; + top: auto; + transform: none; + transform-origin: 50% 50% 0; + transform-style: flat; + transition: none 0s ease 0s; + unicode-bidi: normal; + vertical-align: baseline; + visibility: visible; + white-space: normal; + widows: 2; + width: auto; + word-spacing: normal; + z-index: auto; + all: initial; + order: 20; +} + +.test-matches-pseudo-class:matches(:first-child, .special) { + order: 21; +} + +.test-not-pseudo-class:not(:first-child):not(.special) { + order: 22; +} + +.test-any-link-pseudo-class:link, .test-any-link-pseudo-class:visited, area[href].test-any-link-pseudo-class { + order: 23; +} + +.test-any-link-pseudo-class:-moz-any-link { + order: 23; +} + +.test-any-link-pseudo-class:any-link { + order: 23; +} + +[dir="rtl"] .test-dir-pseudo-class { + order: 24; +} + +.test-overflow-wrap-property { + order: 25; + word-wrap: break-word; +} + +.test-focus-visible-pseudo-class:focus-visible { + order: 26; +} + +.test-double-position-gradients { + background-image: conic-gradient(yellowgreen 40%, gold 0deg,gold 75%, #f06 0deg); + 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; +} + +.a:focus { + order: 27; +} + +.a:hover { + order: 27; +} + +.b:focus { + order: 27; +} + +.b:hover { + order: 27; +} + +.a.c > .b + .d { + order: 28; +} + +.test-hwb-function { + background-color: rgba(0, 195, 255, .5); +} + +.test-opacity-percent { + opacity: 0.42; +} + +.clamp-same-unit { + width: max(10px, min(64px, 80px)); +} + +.complex-clamp { + width: max(calc(100% - 10px), min(min(10px, 100%), max(40px, 4em))); +} + +.clamp-different-units { + width: max(10%, min(2px, 4rem)); +} + +.mixed-clamp { + grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr); + margin: max(1rem, min(2%, 3rem)) 4vh; +} + +.calc-clamp { + margin: 0 40px 0 calc(-1 * max(32px, min(16vw, 64px))); +} + +.multiple-calc-clamp { + margin: calc(-1 * max(1px, min(2vw, 3px))) calc(-1 * max(4px, min(5vw, 6px))); +} + +.nested-clamp { + font-size: max(max(1rem, min(2vw, 3rem)), min(4vw, 5rem)); +} + +@font-face { + font-family: 'A'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url(a) format("woff2"); +} + +.block-flow { + display: block; + display: block flow; +} + +.block-flow-root { + display: flow-root; + display: block flow-root; +} + +.inline-flow { + display: inline; + display: inline flow; +} + +.inline-flow-root { + display: inline-block; + display: inline flow-root; +} + +.run-in-flow { + display: run-in; + display: run-in flow; +} + +.list-item-block-flow { + display: list-item; + display: list-item block flow; +} + +.inline-flow-list-item { + display: inline list-item; + display: inline flow list-item; +} + +.block-flex { + display: flex; + display: block flex; +} + +.inline-flex { + display: inline-flex; + display: inline flex; +} + +.block-grid { + display: grid; + display: block grid; +} + +.inline-grid { + display: inline-grid; + display: inline grid; +} + +.inline-ruby { + display: ruby; + display: inline ruby; +} + +.block-table { + display: table; + display: block table; +} + +.inline-table { + display: inline-table; + display: inline table; +} + +.table-cell-flow { + display: table-cell; + display: table-cell flow; +} + +.table-caption-flow { + display: table-caption; + display: table-caption flow; +} + +.ruby-base-flow { + display: ruby-base; + display: ruby-base flow; +} + +.ruby-text-flow { + display: ruby-text; + display: ruby-text flow; +} + +.logical-float { + float: right; +} + +.color-function { + prop-1: rgb(0,132,94); + prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; + prop-3: rgba(7,3,1,1); + prop-4: rgba(7,3,1,calc(33 / 22)); + prop-5: rgb(255,255,255); +} + +.oklab { + color-1: rgb(73, 71, 69); + color-1: color(display-p3 0.28515 0.27983 0.27246); + color-2: rgba(121, 34, 67, 1); + color-2: color(display-p3 0.43853 0.16014 0.26019 / 1); + color-3: rgba(121, 34, 67, .5); + color-3: color(display-p3 0.43853 0.16014 0.26019 / .5); + color-4: rgba(121, 34, 67, 1); + color-4: color(display-p3 0.43853 0.16014 0.26019 / 100%); + color-5: rgba(121, 34, 67, 0.5); + color-5: color(display-p3 0.43853 0.16014 0.26019 / 50%); + color-6: rgb(177, 102, 126); + color-6: color(display-p3 0.65225 0.41303 0.49110); + color-7: oklab(60% 0.1 0 foo); + color-8: rgb(125, 35, 41); + color-8: color(display-p3 0.45163 0.16556 0.17021); + color-9: rgb(198, 93, 7); + color-9: color(display-p3 0.72414 0.38678 0.14879); + color-10: rgb(157, 147, 24); + color-10: color(display-p3 0.60930 0.57658 0.20615); + color-11: rgb(104, 166, 57); + color-11: color(display-p3 0.46287 0.64491 0.28775); + color-12: rgb(98, 172, 239); + color-12: color(display-p3 0.45207 0.66555 0.91656); +} + +.oklch { + color-1: rgb(126, 37, 15); + color-1: color(display-p3 0.45368 0.16978 0.09411); + color-2: rgba(126, 37, 15, 1); + color-2: color(display-p3 0.45368 0.16978 0.09411 / 1); + color-3: rgba(126, 37, 15, .5); + color-3: color(display-p3 0.45368 0.16978 0.09411 / .5); + color-4: rgba(126, 37, 15, 1); + color-4: color(display-p3 0.45368 0.16978 0.09411 / 100%); + color-5: rgba(126, 37, 15, 0.5); + color-5: color(display-p3 0.45368 0.16978 0.09411 / 50%); + color-6: rgb(197, 84, 124); + color-6: color(display-p3 0.71738 0.35446 0.48551); + + color-7: rgb(0, 152, 131); + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: rgb(0, 152, 131); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: rgb(0, 152, 131); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: rgb(0, 152, 131); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: rgb(0, 152, 131); + color-11: color(display-p3 0.19244 0.58461 0.51559); + + color-12: rgb(188, 101, 59); + + color-12: color(display-p3 0.69260 0.41373 0.26821); + color-13: rgb(188, 101, 59); + color-13: color(display-p3 0.69260 0.41373 0.26821); + color-14: rgb(188, 101, 59); + color-14: color(display-p3 0.69260 0.41373 0.26821); + color-15: rgb(188, 101, 59); + color-15: color(display-p3 0.69260 0.41373 0.26821); + color-16: rgb(188, 101, 59); + color-16: color(display-p3 0.69260 0.41373 0.26821); + color-17: oklch(60% 0.1250 0.785398unknown); +} + +.ic-unit { + --value-2ic: initial; + text-indent: 2em; + content: var(--value-2ic); + left: 2em; + left: var(--non-existing, 2em); + width: calc(8em + 20px); + height: 10px; + margin: 0.5em 1em .2em; + padding: 2 ic; +} + +.unset { + clip: auto; + clip: initial; +} + +.mod { + padding: 8px 3px 1px calc(3px + 50%); + transform: rotate(-50deg); + width: 2px; +} + +.rem { + padding: 8px 3px 1px calc(3px + 50%); + transform: rotate(-50deg); +} + +.round { + top: 3px; + right: 3px; + bottom: 3px; + left: 2px; + padding-left: 2px; +} + +.trigonometric { + left: 0.70711; + left: 0.70711; + left: 1; + left: 30deg; + left: 60deg; + left: 84.29deg; + left: -45deg; + left: 90deg; + left: 135deg; + left: 0.90533; +} + +.trigonometric-ignore-not-a-function { + left: sin; + left: cos; + left: tan; + left: asin; + left: acos; + left: atan; + left: atan2; +} + +.trigonometric-ignore-no-arguments { + left: sin(); + left: cos(); + left: tan(); + left: asin(); + left: acos(); + left: atan(); + left: atan2(); +} + +[data-view-size=m] .view { + background: red; +} + +.nested-calc { + order: calc(1 * (8 / 3 + (5 * 10))); + order: calc(1 * calc(8 / 3 + calc(5 * 10))); +} + +.text-decoration-shorthand { + text-decoration: overline; + -webkit-text-decoration: overline wavy pink; + text-decoration: overline wavy pink; + text-decoration-thickness: 3px; +} + +.stage__container { + right: 1rem; + right: var(--size, 1rem); +} + +:root { + content: "plain :scope"; +} + +@scope (.foo) { + :scope { + content: ":scope in @scope"; + } +} + +:root { + @scope (.foo) { + content: ":scope in @scope, but with nesting"; + } +} + +@media (min-aspect-ratio: 177/100) { + /* media query aspect ratio : */ +} 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 1a3505d2d..8641cd536 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -34,12 +34,21 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; -ms-flex-order: 3; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 89fb6d330..cc7e379ea 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 @@ -32,11 +32,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 ae7cd400a..70771a672 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 @@ -17,9 +17,20 @@ } .test-logical-properties-and-values { - margin-inline: auto; + -webkit-margin-start: 1px; + margin-inline-start: 1px; + -webkit-margin-end: 2px; + margin-inline-end: 2px; order: 3; - padding-block: 5px; + padding-block: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vi + 5px); } .test-nesting-rules { 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 1bd41ce6a..84b676c56 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 @@ -31,11 +31,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 e977adb1f..019e66568 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 @@ -50,15 +50,28 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: -webkit-calc(10vw + 5px); + width: -moz-calc(10vw + 5px); + width: calc(10vw + 5px); + width: -webkit-calc(10vi + 5px); + width: -moz-calc(10vi + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 3b079b4fd..e79f3ca96 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -24,9 +24,19 @@ } .test-logical-properties-and-values { - margin-inline: auto; + margin-inline-start: 1px; + margin-inline-end: 2px; order: 3; - padding-block: 5px; + padding-block: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { @@ -279,7 +289,7 @@ } .logical-float { - float: inline-start; + float: left; } .color-function { 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 4b21eabf7..b9856b563 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 @@ -30,11 +30,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 a4df52f8b..3386d5aba 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 @@ -30,9 +30,19 @@ } .test-logical-properties-and-values { - margin-inline: auto; + margin-inline-start: 1px; + margin-inline-end: 2px; order: 3; - padding-block: 5px; + padding-block: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 78bee2214..132a17700 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -32,11 +32,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 aade3f8db..4a8f4d564 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 @@ -32,11 +32,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { 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 d452f1dca..69427e3c9 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 @@ -26,11 +26,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: horizontal; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { @@ -423,7 +432,7 @@ } .logical-float { - float: left; + float: inline-start; } .color-function { 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 efb561cd7..9f04ed902 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 @@ -18,11 +18,20 @@ } .test-logical-properties-and-values { - margin-left: auto; - margin-right: auto; + margin-left: 1px; + margin-right: 2px; order: 3; - padding-top: 5px; - padding-bottom: 5px; + padding-top: 4px; + padding-bottom: 4px; +} + +.test-logical-resize { + resize: inline; +} + +.test-logical-viewport-units { + width: calc(10vw + 5px); + width: calc(10vi + 5px); } .test-nesting-rules { @@ -395,7 +404,7 @@ } .logical-float { - float: left; + float: inline-start; } .color-function { diff --git a/plugins/postcss-logical/CHANGELOG.md b/plugins/postcss-logical/CHANGELOG.md index 1245c8e58..6c10d130a 100644 --- a/plugins/postcss-logical/CHANGELOG.md +++ b/plugins/postcss-logical/CHANGELOG.md @@ -7,7 +7,7 @@ - Added: Support for `block-size`, `inline-size` and `caption-side`. - Removed: Support for the `logical` keyword within `margin`, `padding`, `border-width`, `border-style`, `border-color` properties. (major) - Removed support for `preserve` option. Changes are no longer preserved (major). -- Removed support for transforming `float` and `clear` properties. (major) +- Removed support for transforming `float`, `clear` and `resize` properties. (major) - Updated: The plugin now requires block and inline direction to be configured (uses `top-to-bottom` and `left-to-right` respectively) and no longer introduces `:dir` (major). ### 5.0.4 (February 5, 2022)