mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Update style attribute behavior for better object support (#7542)
This commit is contained in:
parent
19c2d43ea4
commit
cdc28326cf
6 changed files with 32 additions and 11 deletions
5
.changeset/giant-crews-tell.md
Normal file
5
.changeset/giant-crews-tell.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix bug when using `define:vars` with a `style` object
|
|
@ -113,7 +113,7 @@
|
||||||
"test:e2e:match": "playwright test -g"
|
"test:e2e:match": "playwright test -g"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/compiler": "^1.5.0",
|
"@astrojs/compiler": "^1.5.3",
|
||||||
"@astrojs/internal-helpers": "^0.1.1",
|
"@astrojs/internal-helpers": "^0.1.1",
|
||||||
"@astrojs/language-server": "^1.0.0",
|
"@astrojs/language-server": "^1.0.0",
|
||||||
"@astrojs/markdown-remark": "^2.2.1",
|
"@astrojs/markdown-remark": "^2.2.1",
|
||||||
|
|
|
@ -90,8 +90,13 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
|
||||||
}
|
}
|
||||||
|
|
||||||
// support object styles for better JSX compat
|
// support object styles for better JSX compat
|
||||||
if (key === 'style' && !(value instanceof HTMLString) && typeof value === 'object') {
|
if (key === 'style' && !(value instanceof HTMLString)) {
|
||||||
return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
|
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
|
// support `className` for better JSX compat
|
||||||
|
|
|
@ -53,6 +53,17 @@ describe('Directives', async () => {
|
||||||
expect($('h1').attr('style').toString()).to.include('--textColor: red;');
|
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 () => {
|
it('set:html', async () => {
|
||||||
const html = await fixture.readFile('/set-html/index.html');
|
const html = await fixture.readFile('/set-html/index.html');
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
|
|
|
@ -36,7 +36,7 @@ let undef: undefined;
|
||||||
<script id="inline-5" define:vars={{ undef }}>
|
<script id="inline-5" define:vars={{ undef }}>
|
||||||
console.log(undef);
|
console.log(undef);
|
||||||
</script>
|
</script>
|
||||||
|
<div id="compound-style" style={{ color: `var(--fg)` }}></div>
|
||||||
<Title />
|
<Title />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -485,8 +485,8 @@ importers:
|
||||||
packages/astro:
|
packages/astro:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler':
|
'@astrojs/compiler':
|
||||||
specifier: ^1.5.0
|
specifier: ^1.5.3
|
||||||
version: 1.5.0
|
version: 1.5.3
|
||||||
'@astrojs/internal-helpers':
|
'@astrojs/internal-helpers':
|
||||||
specifier: ^0.1.1
|
specifier: ^0.1.1
|
||||||
version: link:../internal-helpers
|
version: link:../internal-helpers
|
||||||
|
@ -5490,14 +5490,14 @@ packages:
|
||||||
sisteransi: 1.0.5
|
sisteransi: 1.0.5
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/@astrojs/compiler@1.5.0:
|
/@astrojs/compiler@1.5.3:
|
||||||
resolution: {integrity: sha512-k04X/7nlMklU0HQUScxbCTf5n8/Vr+0U0bawb9QWulWxd6qJf3FmBrNATgTYiltjB4pc5HBqmmttAfFi7m4lLg==}
|
resolution: {integrity: sha512-/HSFkJ+Yv+WUWSq0QVsIlhBKam5VUpGV+s8MvPguC/krHmw4Ww9TIgmfJSvV8/BN0sHJB7pCgf7yInae1zb+TQ==}
|
||||||
|
|
||||||
/@astrojs/language-server@1.0.0:
|
/@astrojs/language-server@1.0.0:
|
||||||
resolution: {integrity: sha512-oEw7AwJmzjgy6HC9f5IdrphZ1GVgfV/+7xQuyf52cpTiRWd/tJISK3MsKP0cDkVlfodmNABNFnAaAWuLZEiiiA==}
|
resolution: {integrity: sha512-oEw7AwJmzjgy6HC9f5IdrphZ1GVgfV/+7xQuyf52cpTiRWd/tJISK3MsKP0cDkVlfodmNABNFnAaAWuLZEiiiA==}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 1.5.0
|
'@astrojs/compiler': 1.5.3
|
||||||
'@jridgewell/trace-mapping': 0.3.18
|
'@jridgewell/trace-mapping': 0.3.18
|
||||||
'@vscode/emmet-helper': 2.8.8
|
'@vscode/emmet-helper': 2.8.8
|
||||||
events: 3.3.0
|
events: 3.3.0
|
||||||
|
@ -15194,7 +15194,7 @@ packages:
|
||||||
resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==}
|
resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==}
|
||||||
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 1.5.0
|
'@astrojs/compiler': 1.5.3
|
||||||
prettier: 2.8.8
|
prettier: 2.8.8
|
||||||
sass-formatter: 0.7.6
|
sass-formatter: 0.7.6
|
||||||
dev: true
|
dev: true
|
||||||
|
@ -15203,7 +15203,7 @@ packages:
|
||||||
resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==}
|
resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==}
|
||||||
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@astrojs/compiler': 1.5.0
|
'@astrojs/compiler': 1.5.3
|
||||||
prettier: 2.8.8
|
prettier: 2.8.8
|
||||||
sass-formatter: 0.7.6
|
sass-formatter: 0.7.6
|
||||||
synckit: 0.8.5
|
synckit: 0.8.5
|
||||||
|
|
Loading…
Reference in a new issue