diff --git a/plugins/postcss-rebase-url/CHANGELOG.md b/plugins/postcss-rebase-url/CHANGELOG.md index fcd787d16..25c9764ad 100644 --- a/plugins/postcss-rebase-url/CHANGELOG.md +++ b/plugins/postcss-rebase-url/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Rebase URL +### Unreleased (patch) + +- Do not rebase `url()` values in `initial-value` declarations for `@property`. + ### 1.0.1 _September 2, 2023_ diff --git a/plugins/postcss-rebase-url/dist/index.cjs b/plugins/postcss-rebase-url/dist/index.cjs index 0a83fdc55..059f8baa2 100644 --- a/plugins/postcss-rebase-url/dist/index.cjs +++ b/plugins/postcss-rebase-url/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/css-tokenizer"),r=require("@csstools/css-parser-algorithms"),t=require("path");const s=/^([-_a-z0-9]+:)?\/\//i;function rebase(e,r,i){if(e.startsWith("data:"))return!1;if(s.test(e))return!1;if(e.startsWith("/"))return e;if(e.startsWith("#"))return e;try{const r=new URL(e);if(r.port||r.protocol)return!1}catch{}const o=t.posix.resolve(t.posix.join(r,e));return t.posix.relative(i,o)}function serializeString(e){let r="";for(const t of e){const e=t.codePointAt(0);if(void 0!==e)switch(e){case 0:r+=String.fromCodePoint(65533);break;case 127:r+=`\\${e.toString(16)}`;break;case 34:case 39:case 92:r+=`\\${t}`;break;default:if(1<=e&&e<=31){r+=`\\${e.toString(16)} `;break}r+=t}else r+=String.fromCodePoint(65533)}return r}function normalizedDir(e){return t.parse(t.resolve(e.trim())).dir.split(t.sep).join(t.posix.sep)}const i=/url\(/i,o=/url/i,creator=()=>({postcssPlugin:"postcss-rebase-url",prepare(){const t=new WeakSet,s=new Set;return{Once(e){e.walkAtRules(/property/i,(e=>{if(!e.nodes)return;const r=e.nodes.find((e=>{if("decl"===e.type&&/syntax/i.test(e.prop))return!0}));r&&//i.test(r.value)&&s.add(e.params.trim())}))},Declaration(n,{result:a}){var u;if(t.has(n))return;if(n.variable&&!s.has(n.prop))return;const{from:l}=a.opts;if(!l)return;if(null==(u=n.source)||!u.input.from)return;if(!i.test(n.value))return;const c=normalizedDir(l),p=n.source.input.from.trim();if(!p)return;const f=normalizedDir(p),d=r.parseCommaSeparatedListOfComponentValues(e.tokenize({css:n.value})),v=r.replaceComponentValues(d,(t=>{if(r.isTokenNode(t)&&t.value[0]===e.TokenType.URL){const e=rebase(t.value[4].value.trim(),f,c);if(e)return t.value[4].value=e,t.value[1]=`url(${serializeString(e)})`,t}if(r.isFunctionNode(t)&&o.test(t.getName()))for(const s of t.value)if(!r.isWhitespaceNode(s)&&!r.isCommentNode(s)&&r.isTokenNode(s)&&s.value[0]===e.TokenType.String){const e=rebase(s.value[4].value.trim(),f,c);if(e)return s.value[4].value=e,s.value[1]=`"${serializeString(e)}"`,t;break}})),m=r.stringify(v);m!==n.value&&(n.value=m,t.add(n))}}}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("@csstools/css-tokenizer"),r=require("@csstools/css-parser-algorithms"),t=require("path");const i=/^([-_a-z0-9]+:)?\/\//i;function rebase(e,r,s){if(e.startsWith("data:"))return!1;if(i.test(e))return!1;if(e.startsWith("/"))return e;if(e.startsWith("#"))return e;try{const r=new URL(e);if(r.port||r.protocol)return!1}catch{}const o=t.posix.resolve(t.posix.join(r,e));return t.posix.relative(s,o)}function serializeString(e){let r="";for(const t of e){const e=t.codePointAt(0);if(void 0!==e)switch(e){case 0:r+=String.fromCodePoint(65533);break;case 127:r+=`\\${e.toString(16)}`;break;case 34:case 39:case 92:r+=`\\${t}`;break;default:if(1<=e&&e<=31){r+=`\\${e.toString(16)} `;break}r+=t}else r+=String.fromCodePoint(65533)}return r}function normalizedDir(e){return t.parse(t.resolve(e.trim())).dir.split(t.sep).join(t.posix.sep)}const s=/^initial-value$/i,o=/^property$/i,n=/^syntax$/i,a=/url\(/i,u=/^url$/i,l=//i,creator=()=>({postcssPlugin:"postcss-rebase-url",prepare(){const t=new WeakSet,i=new Set;return{Once(e){e.walkAtRules(o,(e=>{if(!e.nodes)return;const r=e.nodes.find((e=>{if("decl"===e.type&&n.test(e.prop))return!0}));r&&l.test(r.value)&&i.add(e.params.trim())}))},Declaration(n,{result:l}){var c,p;if(t.has(n))return;if(n.variable&&!i.has(n.prop))return;if(s.test(n.prop)&&"atrule"===(null==(c=n.parent)?void 0:c.type)&&o.test(n.parent.name))return;const{from:f}=l.opts;if(!f)return;if(null==(p=n.source)||!p.input.from)return;if(!a.test(n.value))return;const v=normalizedDir(f),d=n.source.input.from.trim();if(!d)return;const m=normalizedDir(d),k=r.parseCommaSeparatedListOfComponentValues(e.tokenize({css:n.value})),g=r.replaceComponentValues(k,(t=>{if(r.isTokenNode(t)&&t.value[0]===e.TokenType.URL){const e=rebase(t.value[4].value.trim(),m,v);if(e)return t.value[4].value=e,t.value[1]=`url(${serializeString(e)})`,t}if(r.isFunctionNode(t)&&u.test(t.getName()))for(const i of t.value)if(!r.isWhitespaceNode(i)&&!r.isCommentNode(i)&&r.isTokenNode(i)&&i.value[0]===e.TokenType.String){const e=rebase(i.value[4].value.trim(),m,v);if(e)return i.value[4].value=e,i.value[1]=`"${serializeString(e)}"`,t;break}})),S=r.stringify(g);S!==n.value&&(n.value=S,t.add(n))}}}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-rebase-url/dist/index.mjs b/plugins/postcss-rebase-url/dist/index.mjs index 2354e48be..15bc7c5a3 100644 --- a/plugins/postcss-rebase-url/dist/index.mjs +++ b/plugins/postcss-rebase-url/dist/index.mjs @@ -1 +1 @@ -import{tokenize as r,TokenType as e}from"@csstools/css-tokenizer";import{parseCommaSeparatedListOfComponentValues as t,replaceComponentValues as s,isTokenNode as i,isFunctionNode as o,isWhitespaceNode as a,isCommentNode as n,stringify as u}from"@csstools/css-parser-algorithms";import l from"path";const c=/^([-_a-z0-9]+:)?\/\//i;function rebase(r,e,t){if(r.startsWith("data:"))return!1;if(c.test(r))return!1;if(r.startsWith("/"))return r;if(r.startsWith("#"))return r;try{const e=new URL(r);if(e.port||e.protocol)return!1}catch{}const s=l.posix.resolve(l.posix.join(e,r));return l.posix.relative(t,s)}function serializeString(r){let e="";for(const t of r){const r=t.codePointAt(0);if(void 0!==r)switch(r){case 0:e+=String.fromCodePoint(65533);break;case 127:e+=`\\${r.toString(16)}`;break;case 34:case 39:case 92:e+=`\\${t}`;break;default:if(1<=r&&r<=31){e+=`\\${r.toString(16)} `;break}e+=t}else e+=String.fromCodePoint(65533)}return e}function normalizedDir(r){return l.parse(l.resolve(r.trim())).dir.split(l.sep).join(l.posix.sep)}const f=/url\(/i,p=/url/i,creator=()=>({postcssPlugin:"postcss-rebase-url",prepare(){const l=new WeakSet,c=new Set;return{Once(r){r.walkAtRules(/property/i,(r=>{if(!r.nodes)return;const e=r.nodes.find((r=>{if("decl"===r.type&&/syntax/i.test(r.prop))return!0}));e&&//i.test(e.value)&&c.add(r.params.trim())}))},Declaration(v,{result:m}){var d;if(l.has(v))return;if(v.variable&&!c.has(v.prop))return;const{from:g}=m.opts;if(!g)return;if(null==(d=v.source)||!d.input.from)return;if(!f.test(v.value))return;const b=normalizedDir(g),S=v.source.input.from.trim();if(!S)return;const h=normalizedDir(S),k=t(r({css:v.value})),z=s(k,(r=>{if(i(r)&&r.value[0]===e.URL){const e=rebase(r.value[4].value.trim(),h,b);if(e)return r.value[4].value=e,r.value[1]=`url(${serializeString(e)})`,r}if(o(r)&&p.test(r.getName()))for(const t of r.value)if(!a(t)&&!n(t)&&i(t)&&t.value[0]===e.String){const e=rebase(t.value[4].value.trim(),h,b);if(e)return t.value[4].value=e,t.value[1]=`"${serializeString(e)}"`,r;break}})),x=u(z);x!==v.value&&(v.value=x,l.add(v))}}}});creator.postcss=!0;export{creator as default}; +import{tokenize as r,TokenType as e}from"@csstools/css-tokenizer";import{parseCommaSeparatedListOfComponentValues as t,replaceComponentValues as i,isTokenNode as s,isFunctionNode as o,isWhitespaceNode as a,isCommentNode as n,stringify as u}from"@csstools/css-parser-algorithms";import l from"path";const c=/^([-_a-z0-9]+:)?\/\//i;function rebase(r,e,t){if(r.startsWith("data:"))return!1;if(c.test(r))return!1;if(r.startsWith("/"))return r;if(r.startsWith("#"))return r;try{const e=new URL(r);if(e.port||e.protocol)return!1}catch{}const i=l.posix.resolve(l.posix.join(e,r));return l.posix.relative(t,i)}function serializeString(r){let e="";for(const t of r){const r=t.codePointAt(0);if(void 0!==r)switch(r){case 0:e+=String.fromCodePoint(65533);break;case 127:e+=`\\${r.toString(16)}`;break;case 34:case 39:case 92:e+=`\\${t}`;break;default:if(1<=r&&r<=31){e+=`\\${r.toString(16)} `;break}e+=t}else e+=String.fromCodePoint(65533)}return e}function normalizedDir(r){return l.parse(l.resolve(r.trim())).dir.split(l.sep).join(l.posix.sep)}const f=/^initial-value$/i,p=/^property$/i,v=/^syntax$/i,m=/url\(/i,d=/^url$/i,g=//i,creator=()=>({postcssPlugin:"postcss-rebase-url",prepare(){const l=new WeakSet,c=new Set;return{Once(r){r.walkAtRules(p,(r=>{if(!r.nodes)return;const e=r.nodes.find((r=>{if("decl"===r.type&&v.test(r.prop))return!0}));e&&g.test(e.value)&&c.add(r.params.trim())}))},Declaration(v,{result:g}){var b,S;if(l.has(v))return;if(v.variable&&!c.has(v.prop))return;if(f.test(v.prop)&&"atrule"===(null==(b=v.parent)?void 0:b.type)&&p.test(v.parent.name))return;const{from:h}=g.opts;if(!h)return;if(null==(S=v.source)||!S.input.from)return;if(!m.test(v.value))return;const $=normalizedDir(h),k=v.source.input.from.trim();if(!k)return;const z=normalizedDir(k),x=t(r({css:v.value})),w=i(x,(r=>{if(s(r)&&r.value[0]===e.URL){const e=rebase(r.value[4].value.trim(),z,$);if(e)return r.value[4].value=e,r.value[1]=`url(${serializeString(e)})`,r}if(o(r)&&d.test(r.getName()))for(const t of r.value)if(!a(t)&&!n(t)&&s(t)&&t.value[0]===e.String){const e=rebase(t.value[4].value.trim(),z,$);if(e)return t.value[4].value=e,t.value[1]=`"${serializeString(e)}"`,r;break}})),y=u(w);y!==v.value&&(v.value=y,l.add(v))}}}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-rebase-url/src/index.ts b/plugins/postcss-rebase-url/src/index.ts index 5a078108b..f134af837 100644 --- a/plugins/postcss-rebase-url/src/index.ts +++ b/plugins/postcss-rebase-url/src/index.ts @@ -1,4 +1,4 @@ -import type { PluginCreator, Declaration } from 'postcss'; +import type { PluginCreator, Declaration, AtRule } from 'postcss'; import { TokenType, tokenize } from '@csstools/css-tokenizer'; import { isCommentNode, isFunctionNode, isTokenNode, isWhitespaceNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; import { rebase } from './rebase'; @@ -8,8 +8,12 @@ import { normalizedDir } from './normalized-dir'; /** postcss-rebase-url plugin options */ export type pluginOptions = never; +const INITIAL_VALUE_PROPERTY = /^initial-value$/i; +const PROPERTY_NAME = /^property$/i; +const SYNTAX_PROPERTY = /^syntax$/i; const URL_FUNCTION_CALL = /url\(/i; -const URL_FUNCTION_NAME = /url/i; +const URL_FUNCTION_NAME = /^url$/i; +const URL_SYNTAX = //i; const creator: PluginCreator = () => { return { @@ -20,13 +24,13 @@ const creator: PluginCreator = () => { return { Once(root) { - root.walkAtRules(/property/i, (atRule) => { + root.walkAtRules(PROPERTY_NAME, (atRule) => { if (!atRule.nodes) { return; } const syntaxDescriptor = atRule.nodes.find((x) => { - if (x.type === 'decl' && /syntax/i.test(x.prop)) { + if (x.type === 'decl' && SYNTAX_PROPERTY.test(x.prop)) { return true; } }) as Declaration | undefined; @@ -35,7 +39,7 @@ const creator: PluginCreator = () => { return; } - if (//i.test(syntaxDescriptor.value)) { + if (URL_SYNTAX.test(syntaxDescriptor.value)) { registeredPropsWithURL_Type.add(atRule.params.trim()); } }); @@ -49,6 +53,14 @@ const creator: PluginCreator = () => { return; } + if ( + INITIAL_VALUE_PROPERTY.test(decl.prop) && + decl.parent?.type === 'atrule' && + PROPERTY_NAME.test((decl.parent as AtRule).name) + ) { + return; + } + const { from: fromEntryPoint } = result.opts; if (!fromEntryPoint) { return; diff --git a/plugins/postcss-rebase-url/test/basic.expect.css b/plugins/postcss-rebase-url/test/basic.expect.css index a7f75f6c6..29c7f537e 100644 --- a/plugins/postcss-rebase-url/test/basic.expect.css +++ b/plugins/postcss-rebase-url/test/basic.expect.css @@ -47,10 +47,17 @@ initial-value: none; } +@property --background-image--strictly-typed-with-initial-value { + syntax: ' | none'; + inherits: true; + initial-value: url('./green.png#initial'); +} + .box { --background-image--strictly-typed: url(imports/green.png#1); --background-image--loosely-typed: url(./green.png#2); --background-image--untyped: url(./green.png#3); + --background-image--strictly-typed-with-initial-value: url(imports/green.png#4); } .root { diff --git a/plugins/postcss-rebase-url/test/imports/props.css b/plugins/postcss-rebase-url/test/imports/props.css index e5345dbf8..594a19c98 100644 --- a/plugins/postcss-rebase-url/test/imports/props.css +++ b/plugins/postcss-rebase-url/test/imports/props.css @@ -10,8 +10,15 @@ initial-value: none; } +@property --background-image--strictly-typed-with-initial-value { + syntax: ' | none'; + inherits: true; + initial-value: url('./green.png#initial'); +} + .box { --background-image--strictly-typed: url(./green.png#1); --background-image--loosely-typed: url(./green.png#2); --background-image--untyped: url(./green.png#3); + --background-image--strictly-typed-with-initial-value: url(./green.png#4); }