From 37cb2fc02a03754d454b243579bc55e55cf72904 Mon Sep 17 00:00:00 2001 From: Calvin Liang Date: Tue, 4 Oct 2022 09:56:11 -0700 Subject: [PATCH] fix object styles not escaped (#4887) * fix object styles not escaped * fix `shouldEscape` not passed down * add tests * fix package name * fix pnpm-lock * add changeset --- .changeset/swift-moles-crash.md | 5 +++ .../astro/src/runtime/server/render/util.ts | 4 +-- .../astro/test/astro-object-style.test.js | 32 +++++++++++++++++++ .../fixtures/astro-object-style/package.json | 8 +++++ .../src/components/Span.astro | 1 + .../src/pages/component.astro | 10 ++++++ .../astro-object-style/src/pages/index.astro | 7 ++++ pnpm-lock.yaml | 6 ++++ 8 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 .changeset/swift-moles-crash.md create mode 100644 packages/astro/test/astro-object-style.test.js create mode 100644 packages/astro/test/fixtures/astro-object-style/package.json create mode 100644 packages/astro/test/fixtures/astro-object-style/src/components/Span.astro create mode 100644 packages/astro/test/fixtures/astro-object-style/src/pages/component.astro create mode 100644 packages/astro/test/fixtures/astro-object-style/src/pages/index.astro diff --git a/.changeset/swift-moles-crash.md b/.changeset/swift-moles-crash.md new file mode 100644 index 0000000000..655f57a126 --- /dev/null +++ b/.changeset/swift-moles-crash.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +fix object styles not escaped diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts index 31a6bf21a7..a95ef16f87 100644 --- a/packages/astro/src/runtime/server/render/util.ts +++ b/packages/astro/src/runtime/server/render/util.ts @@ -72,7 +72,7 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the // support "class" from an expression passed into an element (#782) if (key === 'class:list') { - const listValue = toAttributeString(serializeListValue(value)); + const listValue = toAttributeString(serializeListValue(value), shouldEscape); if (listValue === '') { return ''; } @@ -81,7 +81,7 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the // support object styles for better JSX compat if (key === 'style' && !(value instanceof HTMLString) && typeof value === 'object') { - return markHTMLString(` ${key}="${toStyleString(value)}"`); + return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`); } // support `className` for better JSX compat diff --git a/packages/astro/test/astro-object-style.test.js b/packages/astro/test/astro-object-style.test.js new file mode 100644 index 0000000000..adcc43bd9c --- /dev/null +++ b/packages/astro/test/astro-object-style.test.js @@ -0,0 +1,32 @@ +import { expect } from 'chai'; +import * as cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Object style', async () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ root: './fixtures/astro-object-style/' }); + await fixture.build(); + }); + + it('Passes style attributes as expected to elements', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + expect($('[style="background-color:green"]')).to.have.lengthOf(1); + expect($('[style="background-color:red"]')).to.have.lengthOf(1); + expect($('[style="background-color:blue"]')).to.have.lengthOf(1); + expect($(`[style='background-image:url("a")']`)).to.have.lengthOf(1); + }); + + it('Passes style attributes as expected to components', async () => { + const html = await fixture.readFile('/component/index.html'); + const $ = cheerio.load(html); + + expect($('[style="background-color:green"]')).to.have.lengthOf(1); + expect($('[style="background-color:red"]')).to.have.lengthOf(1); + expect($('[style="background-color:blue"]')).to.have.lengthOf(1); + expect($(`[style='background-image:url("a")']`)).to.have.lengthOf(1); + }); +}); diff --git a/packages/astro/test/fixtures/astro-object-style/package.json b/packages/astro/test/fixtures/astro-object-style/package.json new file mode 100644 index 0000000000..140e51f2c8 --- /dev/null +++ b/packages/astro/test/fixtures/astro-object-style/package.json @@ -0,0 +1,8 @@ +{ + "name": "@test/astro-object-style", + "version": "0.0.0", + "private": true, + "dependencies": { + "astro": "workspace:*" + } +} diff --git a/packages/astro/test/fixtures/astro-object-style/src/components/Span.astro b/packages/astro/test/fixtures/astro-object-style/src/components/Span.astro new file mode 100644 index 0000000000..bfadf035c5 --- /dev/null +++ b/packages/astro/test/fixtures/astro-object-style/src/components/Span.astro @@ -0,0 +1 @@ + diff --git a/packages/astro/test/fixtures/astro-object-style/src/pages/component.astro b/packages/astro/test/fixtures/astro-object-style/src/pages/component.astro new file mode 100644 index 0000000000..5499903471 --- /dev/null +++ b/packages/astro/test/fixtures/astro-object-style/src/pages/component.astro @@ -0,0 +1,10 @@ +--- +import Component from '../components/Span.astro' +--- + + + + + + + diff --git a/packages/astro/test/fixtures/astro-object-style/src/pages/index.astro b/packages/astro/test/fixtures/astro-object-style/src/pages/index.astro new file mode 100644 index 0000000000..9ab066a5c2 --- /dev/null +++ b/packages/astro/test/fixtures/astro-object-style/src/pages/index.astro @@ -0,0 +1,7 @@ + + + + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7ae52e065..2fe99b52eb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1426,6 +1426,12 @@ importers: dependencies: astro: link:../../.. + packages/astro/test/fixtures/astro-object-style: + specifiers: + astro: workspace:* + dependencies: + astro: link:../../.. + packages/astro/test/fixtures/astro-page-directory-url: specifiers: astro: workspace:*