From b0363188af47be23b77045b14ea9fc5d3e146bc2 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 15:29:13 +0800 Subject: [PATCH 01/27] fix: fix `transition:name` can be unicode --- .../astro/src/runtime/server/transition.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 9d039da9dfad..a26a53851e1a 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -7,6 +7,9 @@ import type { } from '../../@types/astro.js'; import { fade, slide } from '../../transitions/index.js'; import { markHTMLString } from './escape.js'; +import { Logger } from '../../core/logger/core.js'; +import { nodeLogDestination } from '../../core/logger/node.js'; +import { bold } from 'kleur/colors'; const transitionNameMap = new WeakMap(); function incrementTransitionNumber(result: SSRResult) { @@ -25,7 +28,26 @@ export function createTransitionScope(result: SSRResult, hash: string) { // Ensure animationName is a valid CSS identifier function toValidIdent(name: string): string { - return name.replace(/[^a-zA-Z0-9\-\_]/g, '_').replace(/^\_+|\_+$/g, ''); + if (/^[a-zA-Z0-9_-]*$/.test(name)) { + return name; + } + const logger = new Logger({ + dest: nodeLogDestination, + level: 'warn', + }); + logger.warn( + null, + `Your transition:name ${bold(name)} is not a valid CSS identifier. It will be escaped.` + ); + const result = []; + for (const char of name) { + if (/[a-zA-Z0-9_-]/.test(char)) { + result.push(char); + } else { + result.push(`-\\${char.charCodeAt(0).toString(16)}-`); + } + } + return result.join(''); } type Entries> = Iterable<[keyof T, T[keyof T]]>; From a11088241e0673548d367376a1eb546990b36734 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 15:50:01 +0800 Subject: [PATCH 02/27] delete prefix - --- packages/astro/src/runtime/server/transition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index a26a53851e1a..e44beb60aa57 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -44,7 +44,7 @@ function toValidIdent(name: string): string { if (/[a-zA-Z0-9_-]/.test(char)) { result.push(char); } else { - result.push(`-\\${char.charCodeAt(0).toString(16)}-`); + result.push(`\\${char.charCodeAt(0).toString(16)}-`); } } return result.join(''); From 14d1bb04eefc7cec921df9e992d7eb657601549f Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 15:58:44 +0800 Subject: [PATCH 03/27] use for func --- packages/astro/src/runtime/server/transition.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index e44beb60aa57..89df272098a4 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -39,15 +39,16 @@ function toValidIdent(name: string): string { null, `Your transition:name ${bold(name)} is not a valid CSS identifier. It will be escaped.` ); - const result = []; - for (const char of name) { - if (/[a-zA-Z0-9_-]/.test(char)) { - result.push(char); + let result = ""; + for (let i = 0; i < name.length; i++) { + if (/[a-zA-Z0-9_-]/.test(name[i])) { + result += name[i]; } else { - result.push(`\\${char.charCodeAt(0).toString(16)}-`); + const suffix = i< name.length - 1 ? '-' : ''; + result += `\\${name[i].charCodeAt(0).toString(16)}${suffix}`; } } - return result.join(''); + return result; } type Entries> = Iterable<[keyof T, T[keyof T]]>; From 089b72122e05eb9f668e905043ebe9e13e181666 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 16:14:59 +0800 Subject: [PATCH 04/27] add changeset --- .changeset/cold-bobcats-shave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cold-bobcats-shave.md diff --git a/.changeset/cold-bobcats-shave.md b/.changeset/cold-bobcats-shave.md new file mode 100644 index 000000000000..ac8d2556f4d7 --- /dev/null +++ b/.changeset/cold-bobcats-shave.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +fix(view-transition): escaped unicode `transition:name` From 1a95c23d2bd6d4c3615981696c101b4f639abc62 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 17:07:38 +0800 Subject: [PATCH 05/27] Update .changeset/cold-bobcats-shave.md Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- .changeset/cold-bobcats-shave.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/cold-bobcats-shave.md b/.changeset/cold-bobcats-shave.md index ac8d2556f4d7..ac05fde494f4 100644 --- a/.changeset/cold-bobcats-shave.md +++ b/.changeset/cold-bobcats-shave.md @@ -2,4 +2,4 @@ "astro": patch --- -fix(view-transition): escaped unicode `transition:name` +Applies the correct escaping to identifiers used with `transition:name`. From bd86a014c9638b5364bc48ddd61f753e3cb43a19 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 19:07:35 +0800 Subject: [PATCH 06/27] fix review issue --- .../astro/src/runtime/server/transition.ts | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 89df272098a4..6035752aa8b1 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -28,24 +28,19 @@ export function createTransitionScope(result: SSRResult, hash: string) { // Ensure animationName is a valid CSS identifier function toValidIdent(name: string): string { - if (/^[a-zA-Z0-9_-]*$/.test(name)) { + if (/^[0-9]|^-[0-9]/.test(name)) { + throw new Error("Your transition:name is not a valid CSS identifier."); + } + if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { return name; } - const logger = new Logger({ - dest: nodeLogDestination, - level: 'warn', - }); - logger.warn( - null, - `Your transition:name ${bold(name)} is not a valid CSS identifier. It will be escaped.` - ); let result = ""; - for (let i = 0; i < name.length; i++) { - if (/[a-zA-Z0-9_-]/.test(name[i])) { - result += name[i]; + for (const char of name) { + if (/[a-zA-Z0-9_-]/.test(char)) { + result += char; } else { - const suffix = i< name.length - 1 ? '-' : ''; - result += `\\${name[i].charCodeAt(0).toString(16)}${suffix}`; + const suffix = char === name[name.length - 1] ? "" : "-"; + result += `\\${char.codePointAt(0)!.toString(16)}${suffix}`; } } return result; From 980722dd86783a0583bfa729f9d2cc55f06ad925 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 19:44:59 +0800 Subject: [PATCH 07/27] fix review issue --- packages/astro/src/runtime/server/transition.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 6035752aa8b1..8b7af2e4a02e 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -28,8 +28,12 @@ export function createTransitionScope(result: SSRResult, hash: string) { // Ensure animationName is a valid CSS identifier function toValidIdent(name: string): string { - if (/^[0-9]|^-[0-9]/.test(name)) { - throw new Error("Your transition:name is not a valid CSS identifier."); + // can't start with a number, - + number, or -- + if (/^[0-9]|^-[0-9]|^--/.test(name)) { + throw new Error("Your transition:name is not a valid CSS identifier."); + } + if (['unset', 'initial', 'inherit', 'none' ].includes(name)) { + throw new Error(`Your transition:name cannot be ${name}.`); } if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { return name; @@ -39,7 +43,7 @@ function toValidIdent(name: string): string { if (/[a-zA-Z0-9_-]/.test(char)) { result += char; } else { - const suffix = char === name[name.length - 1] ? "" : "-"; + const suffix = char === name[name.length - 1] ? "" : "\\ "; result += `\\${char.codePointAt(0)!.toString(16)}${suffix}`; } } From f87373d31189561c7dc154165770ef2b9063cf74 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 19:52:37 +0800 Subject: [PATCH 08/27] add comment --- packages/astro/src/runtime/server/transition.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 8b7af2e4a02e..118673e00667 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -32,6 +32,7 @@ function toValidIdent(name: string): string { if (/^[0-9]|^-[0-9]|^--/.test(name)) { throw new Error("Your transition:name is not a valid CSS identifier."); } + // can't be a CSS keyword if (['unset', 'initial', 'inherit', 'none' ].includes(name)) { throw new Error(`Your transition:name cannot be ${name}.`); } From c739fccd53e50f6435437d5a59b4a6fd93c573e0 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 20:13:23 +0800 Subject: [PATCH 09/27] add \ to regex --- packages/astro/src/runtime/server/transition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 118673e00667..76d32eb22037 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -41,7 +41,7 @@ function toValidIdent(name: string): string { } let result = ""; for (const char of name) { - if (/[a-zA-Z0-9_-]/.test(char)) { + if (/[a-zA-Z0-9_\\-]/.test(char)) { result += char; } else { const suffix = char === name[name.length - 1] ? "" : "\\ "; From 2f681c5510077cc2bea7cc3cf362420da1434997 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 20:30:10 +0800 Subject: [PATCH 10/27] fix some issue --- packages/astro/src/runtime/server/transition.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 76d32eb22037..64be7e9b0d7e 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -30,11 +30,11 @@ export function createTransitionScope(result: SSRResult, hash: string) { function toValidIdent(name: string): string { // can't start with a number, - + number, or -- if (/^[0-9]|^-[0-9]|^--/.test(name)) { - throw new Error("Your transition:name is not a valid CSS identifier."); + throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); } // can't be a CSS keyword if (['unset', 'initial', 'inherit', 'none' ].includes(name)) { - throw new Error(`Your transition:name cannot be ${name}.`); + throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); } if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { return name; @@ -44,7 +44,8 @@ function toValidIdent(name: string): string { if (/[a-zA-Z0-9_\\-]/.test(char)) { result += char; } else { - const suffix = char === name[name.length - 1] ? "" : "\\ "; + // TODO handle $ and other special characters + const suffix = char === name[name.length - 1] ? "" : "\ "; result += `\\${char.codePointAt(0)!.toString(16)}${suffix}`; } } From 679664376bb3c59e5b10c95008bd7e08ca58c362 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 20:33:02 +0800 Subject: [PATCH 11/27] delete unused import --- packages/astro/src/runtime/server/transition.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 64be7e9b0d7e..ffe3efcf02d7 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -7,9 +7,6 @@ import type { } from '../../@types/astro.js'; import { fade, slide } from '../../transitions/index.js'; import { markHTMLString } from './escape.js'; -import { Logger } from '../../core/logger/core.js'; -import { nodeLogDestination } from '../../core/logger/node.js'; -import { bold } from 'kleur/colors'; const transitionNameMap = new WeakMap(); function incrementTransitionNumber(result: SSRResult) { From e585d300781254ee1b431ac5b2f6b2977e1f1d9a Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 20:46:06 +0800 Subject: [PATCH 12/27] remove a rule --- packages/astro/src/runtime/server/transition.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index ffe3efcf02d7..fadfcb0506d5 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -29,10 +29,6 @@ function toValidIdent(name: string): string { if (/^[0-9]|^-[0-9]|^--/.test(name)) { throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); } - // can't be a CSS keyword - if (['unset', 'initial', 'inherit', 'none' ].includes(name)) { - throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); - } if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { return name; } From cf196f50c34c491afc533a0765edbaf22bb22b88 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 21:29:32 +0800 Subject: [PATCH 13/27] remove valid rule -- --- packages/astro/src/runtime/server/transition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index fadfcb0506d5..0572c3ae952e 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -26,7 +26,7 @@ export function createTransitionScope(result: SSRResult, hash: string) { // Ensure animationName is a valid CSS identifier function toValidIdent(name: string): string { // can't start with a number, - + number, or -- - if (/^[0-9]|^-[0-9]|^--/.test(name)) { + if (/^[0-9]|^-[0-9]/.test(name)) { throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); } if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { From b0db3f41e47b5f8717ef7ead153c64632b17dd91 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:01:55 +0800 Subject: [PATCH 14/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 0572c3ae952e..b1264e64ee3a 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -25,7 +25,7 @@ export function createTransitionScope(result: SSRResult, hash: string) { // Ensure animationName is a valid CSS identifier function toValidIdent(name: string): string { - // can't start with a number, - + number, or -- + // can't start with a number, - + number if (/^[0-9]|^-[0-9]/.test(name)) { throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); } From 5309f8c133da43341296b7c31fc0b39d0463ef2c Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:02:06 +0800 Subject: [PATCH 15/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index b1264e64ee3a..dd83389a79e2 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -27,7 +27,7 @@ export function createTransitionScope(result: SSRResult, hash: string) { function toValidIdent(name: string): string { // can't start with a number, - + number if (/^[0-9]|^-[0-9]/.test(name)) { - throw new Error(`Your transition:name ${name} is not a valid CSS identifier.`); + throw new Error(`Your transition:name ${name} is not a valid CSS identifier as it starts with ${name.substring(0,2)}.`); } if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { return name; From 5fd1ef4452a4295a50a74125a871abe7d5c9a316 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:02:15 +0800 Subject: [PATCH 16/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index dd83389a79e2..1f2d96cbc294 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -33,6 +33,7 @@ function toValidIdent(name: string): string { return name; } let result = ""; + let wasHexEscaped = false; for (const char of name) { if (/[a-zA-Z0-9_\\-]/.test(char)) { result += char; From 4d45e7701cfacf16413072f3e4de2bf06800654c Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:02:24 +0800 Subject: [PATCH 17/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 1f2d96cbc294..4f8795326b4e 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -35,6 +35,10 @@ function toValidIdent(name: string): string { let result = ""; let wasHexEscaped = false; for (const char of name) { + if (/[0-9a-fA-F]/.test(char) && wasHexEscaped) { + result += " "; + } + wasHexEscaped = false; if (/[a-zA-Z0-9_\\-]/.test(char)) { result += char; } else { From 5897f7dd594ecb58abb7b1d9b18b61cb258c2f5e Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:02:35 +0800 Subject: [PATCH 18/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 4f8795326b4e..4bcae8d9cae4 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -41,6 +41,7 @@ function toValidIdent(name: string): string { wasHexEscaped = false; if (/[a-zA-Z0-9_\\-]/.test(char)) { result += char; + continue; } else { // TODO handle $ and other special characters const suffix = char === name[name.length - 1] ? "" : "\ "; From 9d1ee0444641b5852793a97f5f996f7458866835 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:02:45 +0800 Subject: [PATCH 19/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 4bcae8d9cae4..79fc342e9aa3 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -46,7 +46,6 @@ function toValidIdent(name: string): string { // TODO handle $ and other special characters const suffix = char === name[name.length - 1] ? "" : "\ "; result += `\\${char.codePointAt(0)!.toString(16)}${suffix}`; - } } return result; } From 495661f95c4787bd9fbcaec76d47ca6e4cca2f13 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Thu, 25 Jan 2024 23:02:51 +0800 Subject: [PATCH 20/27] Update transition.ts Co-authored-by: Martin Trapp <94928215+martrapp@users.noreply.github.com> --- packages/astro/src/runtime/server/transition.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 79fc342e9aa3..00648ffff08d 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -43,9 +43,16 @@ function toValidIdent(name: string): string { result += char; continue; } else { - // TODO handle $ and other special characters - const suffix = char === name[name.length - 1] ? "" : "\ "; - result += `\\${char.codePointAt(0)!.toString(16)}${suffix}`; + const code = char.codePointAt(0) + if (code === undefined) { + throw new Error(`Your transition:name ${name} is not a valid CSS identifier as it contains undefined code points`); + } + if (code < 0x20 || code >= 0x7f) { + result += `\\${code.toString(16)}`; + wasHexEscaped = true; + } else { + result += `\\${char}`; + } } return result; } From e1a09462c41b8245c029129f585c6c76379535de Mon Sep 17 00:00:00 2001 From: liruifengv Date: Fri, 26 Jan 2024 08:39:43 +0800 Subject: [PATCH 21/27] format --- .../astro/src/runtime/server/transition.ts | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 00648ffff08d..87d25c49541d 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -27,31 +27,39 @@ export function createTransitionScope(result: SSRResult, hash: string) { function toValidIdent(name: string): string { // can't start with a number, - + number if (/^[0-9]|^-[0-9]/.test(name)) { - throw new Error(`Your transition:name ${name} is not a valid CSS identifier as it starts with ${name.substring(0,2)}.`); + throw new Error( + `Your transition:name ${name} is not a valid CSS identifier as it starts with ${name.substring( + 0, + 2 + )}.` + ); } if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { return name; } - let result = ""; + let result = ''; let wasHexEscaped = false; - for (const char of name) { + for (const char of name) { if (/[0-9a-fA-F]/.test(char) && wasHexEscaped) { - result += " "; + result += ' '; } wasHexEscaped = false; if (/[a-zA-Z0-9_\\-]/.test(char)) { result += char; continue; } else { - const code = char.codePointAt(0) - if (code === undefined) { - throw new Error(`Your transition:name ${name} is not a valid CSS identifier as it contains undefined code points`); - } - if (code < 0x20 || code >= 0x7f) { - result += `\\${code.toString(16)}`; - wasHexEscaped = true; - } else { - result += `\\${char}`; + const code = char.codePointAt(0); + if (code === undefined) { + throw new Error( + `Your transition:name ${name} is not a valid CSS identifier as it contains undefined code points` + ); + } + if (code < 0x20 || code >= 0x7f) { + result += `\\${code.toString(16)}`; + wasHexEscaped = true; + } else { + result += `\\${char}`; + } } } return result; From 19542583041bd8796b3b781622d282033454ea88 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Fri, 26 Jan 2024 09:36:46 +0800 Subject: [PATCH 22/27] use cssesc to escape name --- packages/astro/package.json | 2 ++ .../astro/src/runtime/server/transition.ts | 31 ++----------------- pnpm-lock.yaml | 10 ++++++ 3 files changed, 14 insertions(+), 29 deletions(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index ce8dae159bf7..538243b443f1 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -134,6 +134,7 @@ "clsx": "^2.0.0", "common-ancestor-path": "^1.0.1", "cookie": "^0.6.0", + "cssesc": "^3.0.0", "debug": "^4.3.4", "deterministic-object-hash": "^2.0.1", "devalue": "^4.3.2", @@ -191,6 +192,7 @@ "@types/common-ancestor-path": "^1.0.2", "@types/connect": "^3.4.38", "@types/cookie": "^0.5.4", + "@types/cssesc": "^3.0.2", "@types/debug": "^4.1.12", "@types/diff": "^5.0.8", "@types/dlv": "^1.1.4", diff --git a/packages/astro/src/runtime/server/transition.ts b/packages/astro/src/runtime/server/transition.ts index 87d25c49541d..3b8254b542ee 100644 --- a/packages/astro/src/runtime/server/transition.ts +++ b/packages/astro/src/runtime/server/transition.ts @@ -7,6 +7,7 @@ import type { } from '../../@types/astro.js'; import { fade, slide } from '../../transitions/index.js'; import { markHTMLString } from './escape.js'; +import cssesc from 'cssesc'; const transitionNameMap = new WeakMap(); function incrementTransitionNumber(result: SSRResult) { @@ -34,35 +35,7 @@ function toValidIdent(name: string): string { )}.` ); } - if (/^[a-zA-Z0-9_\\-]*$/.test(name)) { - return name; - } - let result = ''; - let wasHexEscaped = false; - for (const char of name) { - if (/[0-9a-fA-F]/.test(char) && wasHexEscaped) { - result += ' '; - } - wasHexEscaped = false; - if (/[a-zA-Z0-9_\\-]/.test(char)) { - result += char; - continue; - } else { - const code = char.codePointAt(0); - if (code === undefined) { - throw new Error( - `Your transition:name ${name} is not a valid CSS identifier as it contains undefined code points` - ); - } - if (code < 0x20 || code >= 0x7f) { - result += `\\${code.toString(16)}`; - wasHexEscaped = true; - } else { - result += `\\${char}`; - } - } - } - return result; + return cssesc(name, { isIdentifier: true }); } type Entries> = Iterable<[keyof T, T[keyof T]]>; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53147bf4e68e..58751a940271 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -551,6 +551,9 @@ importers: cookie: specifier: ^0.6.0 version: 0.6.0 + cssesc: + specifier: ^3.0.0 + version: 3.0.0 debug: specifier: ^4.3.4 version: 4.3.4(supports-color@8.1.1) @@ -712,6 +715,9 @@ importers: '@types/cookie': specifier: ^0.5.4 version: 0.5.4 + '@types/cssesc': + specifier: ^3.0.2 + version: 3.0.2 '@types/debug': specifier: ^4.1.12 version: 4.1.12 @@ -7351,6 +7357,10 @@ packages: resolution: {integrity: sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==} dev: true + /@types/cssesc@3.0.2: + resolution: {integrity: sha512-Qii6nTRktvtI380EloxH/V7MwgrYxkPgBI+NklUjQuhzgAd1AqT3QDJd+eD+0doRADgfwvtagLRo7JFa7aMHXg==} + dev: true + /@types/debug@4.1.12: resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} dependencies: From 01a0453cbfc658ff6590c08e1c2a386863fd9855 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Fri, 26 Jan 2024 10:25:19 +0800 Subject: [PATCH 23/27] test: add e2e test --- .../src/pages/transition-name.astro | 13 +++++++ packages/astro/e2e/view-transitions.test.js | 36 +++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/transition-name.astro diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/transition-name.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/transition-name.astro new file mode 100644 index 000000000000..8092ba384957 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/transition-name.astro @@ -0,0 +1,13 @@ +--- +import Layout from '../components/Layout.astro'; +--- + +
front-end
+
开源
+
开a源
+
c开a源c
+
オープンソース
+
开$源
+
开.源
+
🐎👱❤
+ diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 0da1010b281e..b531506bc1b5 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -1227,4 +1227,40 @@ test.describe('View Transitions', () => { expect(loads.length, 'There should only be 1 page load').toEqual(1); }); + + test('transition:name should be escaped correctly', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/transition-name')); + await expect(page.locator('#one'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + 'front-end' + ); + await expect(page.locator('#two'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + '\\5F00\\6E90' + ); + await expect(page.locator('#three'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + '\\5F00 a\\6E90' + ); + await expect(page.locator('#four'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + 'c\\5F00 a\\6E90 c' + ); + await expect(page.locator('#five'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + '\\30AA\\30FC\\30D7\\30F3\\30BD\\30FC\\30B9' + ); + await expect(page.locator('#six'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + '\\5F00\\$\\6E90' + ); + await expect(page.locator('#seven'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + '\\5F00\\.\\6E90' + ); + await expect(page.locator('#eight'), 'should be escaped correctly').toHaveCSS( + 'view-transition-name', + '\\1F40E\\1F471\\2764' + ); + }); }); From 1a9fd7a4126292e16a5792b59b30d6bc06011f57 Mon Sep 17 00:00:00 2001 From: liruifengv Date: Fri, 26 Jan 2024 13:57:01 +0800 Subject: [PATCH 24/27] add charset for layout --- .../e2e/fixtures/view-transitions/src/components/Layout.astro | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro index ef82078e78f5..8643f273fd51 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/Layout.astro @@ -22,6 +22,7 @@ const { link } = Astro.props as Props; +