diff options
Diffstat (limited to '')
| -rw-r--r-- | .changeset/giant-crews-tell.md | 5 | ||||
| -rw-r--r-- | packages/astro/package.json | 2 | ||||
| -rw-r--r-- | packages/astro/src/runtime/server/render/util.ts | 9 | ||||
| -rw-r--r-- | packages/astro/test/astro-directives.test.js | 11 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro | 2 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 14 |
6 files changed, 32 insertions, 11 deletions
diff --git a/.changeset/giant-crews-tell.md b/.changeset/giant-crews-tell.md new file mode 100644 index 000000000..c4fe8b89f --- /dev/null +++ b/.changeset/giant-crews-tell.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix bug when using `define:vars` with a `style` object diff --git a/packages/astro/package.json b/packages/astro/package.json index 6e4ccdd2d..821d63509 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -113,7 +113,7 @@ "test:e2e:match": "playwright test -g" }, "dependencies": { - "@astrojs/compiler": "^1.5.0", + "@astrojs/compiler": "^1.5.3", "@astrojs/internal-helpers": "^0.1.1", "@astrojs/language-server": "^1.0.0", "@astrojs/markdown-remark": "^2.2.1", diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts index 182700976..6c5080367 100644 --- a/packages/astro/src/runtime/server/render/util.ts +++ b/packages/astro/src/runtime/server/render/util.ts @@ -90,8 +90,13 @@ 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}="${toAttributeString(toStyleString(value), shouldEscape)}"`); + if (key === 'style' && !(value instanceof HTMLString)) { + if (Array.isArray(value) && value.length === 2) { + return markHTMLString(` ${key}="${toAttributeString(`${toStyleString(value[0])};${value[1]}`, shouldEscape)}"`); + } + if (typeof value === 'object') { + return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`); + } } // support `className` for better JSX compat diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js index 9afbbbe97..9b90d59bf 100644 --- a/packages/astro/test/astro-directives.test.js +++ b/packages/astro/test/astro-directives.test.js @@ -53,6 +53,17 @@ describe('Directives', async () => { expect($('h1').attr('style').toString()).to.include('--textColor: red;'); }); + it('Properly handles define:vars on style elements with style object', async () => { + const html = await fixture.readFile('/define-vars/index.html'); + const $ = cheerio.load(html); + + // All styles should be bundled + expect($('style')).to.have.lengthOf(0); + + // Inject style attribute on top-level element in page + expect($('#compound-style').attr('style').toString()).to.include('color:var(--fg);--fg: black;--bg: white;'); + }); + it('set:html', async () => { const html = await fixture.readFile('/set-html/index.html'); const $ = cheerio.load(html); diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro index 47ec64fb7..108a12035 100644 --- a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro +++ b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro @@ -36,7 +36,7 @@ let undef: undefined; <script id="inline-5" define:vars={{ undef }}> console.log(undef); </script> - + <div id="compound-style" style={{ color: `var(--fg)` }}></div> <Title /> </body> </html> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0611eadc1..6e4710f9d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -485,8 +485,8 @@ importers: packages/astro: dependencies: '@astrojs/compiler': - specifier: ^1.5.0 - version: 1.5.0 + specifier: ^1.5.3 + version: 1.5.3 '@astrojs/internal-helpers': specifier: ^0.1.1 version: link:../internal-helpers @@ -5490,14 +5490,14 @@ packages: sisteransi: 1.0.5 dev: false - /@astrojs/compiler@1.5.0: - resolution: {integrity: sha512-k04X/7nlMklU0HQUScxbCTf5n8/Vr+0U0bawb9QWulWxd6qJf3FmBrNATgTYiltjB4pc5HBqmmttAfFi7m4lLg==} + /@astrojs/compiler@1.5.3: + resolution: {integrity: sha512-/HSFkJ+Yv+WUWSq0QVsIlhBKam5VUpGV+s8MvPguC/krHmw4Ww9TIgmfJSvV8/BN0sHJB7pCgf7yInae1zb+TQ==} /@astrojs/language-server@1.0.0: resolution: {integrity: sha512-oEw7AwJmzjgy6HC9f5IdrphZ1GVgfV/+7xQuyf52cpTiRWd/tJISK3MsKP0cDkVlfodmNABNFnAaAWuLZEiiiA==} hasBin: true dependencies: - '@astrojs/compiler': 1.5.0 + '@astrojs/compiler': 1.5.3 '@jridgewell/trace-mapping': 0.3.18 '@vscode/emmet-helper': 2.8.8 events: 3.3.0 @@ -15194,7 +15194,7 @@ packages: resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==} engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'} dependencies: - '@astrojs/compiler': 1.5.0 + '@astrojs/compiler': 1.5.3 prettier: 2.8.8 sass-formatter: 0.7.6 dev: true @@ -15203,7 +15203,7 @@ packages: resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==} engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'} dependencies: - '@astrojs/compiler': 1.5.0 + '@astrojs/compiler': 1.5.3 prettier: 2.8.8 sass-formatter: 0.7.6 synckit: 0.8.5 |