michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Pass in scoped class name to child components (#579)

Browse source 
* Pass in scoped class name to child components

If a class is being passed into child components, pass in the scoped class name as well.

* Adds the changeset
This commit is contained in:
Matthew Phillips 2021-06-29 16:40:30 -04:00 committed by GitHub
parent f721275f33
commit 1e735bb331
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eighty-dogs-notice.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Allows passing in a class to a child component which will be scoped

11
packages/astro/src/compiler/transform/styles.ts
View file

@ -196,8 +196,15 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr
html: {
InlineComponent: {
enter(node) {
if (node.name !== 'Markdown') return;
injectScopedClassAttribute(node, scopedClass, '$scope');
if (node.name === 'Markdown') {
injectScopedClassAttribute(node, scopedClass, '$scope');
}
for(let attr of node.attributes) {
if(attr.name === 'class') {
injectScopedClassAttribute(node, scopedClass, 'class');
break;
}
}
},
},
Element: {

13
packages/astro/test/astro-styles-ssr.test.js
View file

@ -133,4 +133,17 @@ StylesSSR('Astro scoped styles skipped without <style>', async ({ runtime }) =>
assert.type($('#no-scope').attr('class'), 'undefined', `Astro component without <style> should not include scoped class`);
});
StylesSSR('Astro scoped styles can be passed to child components', async ({ runtime }) => {
const result = await runtime.load('/');
const $ = doc(result.contents);
let scopedClass;
$('style').html().replace(/outer\.(astro-[A-Za-z0-9-]+)/, (match, p1) => {
scopedClass = p1;
return match;
});
assert.match($('#passed-in').attr('class'), `outer ${scopedClass}`);
});
StylesSSR.run();

3
packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro vendored
View file

@ -1,6 +1,8 @@
---
let blue = true;
let visible = true;
const { class: cn } = Astro.props;
---
<style>
@ -21,3 +23,4 @@ let visible = true;
<div id="dynamic-class" class={blue ? 'blue' : 'notblue'}>I change colors</div>
{visible && <div id="dynamic-vis" class="visible">I disappear</div>}
<div id="colon-class" class="color:blue">I am blue</div>
<div id="passed-in" class={cn}>This was passed in</div>

5
packages/astro/test/fixtures/astro-styles-ssr/src/pages/index.astro vendored
View file

@ -18,11 +18,14 @@ import SvelteScoped from '../components/SvelteScoped.svelte';
margin-right: auto;
max-width: 1200px;
}
.outer {
color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<AstroComponent />
<AstroComponent class="outer" />
<AstroComponentNone />
<ReactCSS />
<ReactModules />