graphQuery with content relationship form a slice, and adding styling to a prismic component

Prismic Administrative Support
,
1

Hello there,

Thank you for this wonderful tool

I'm struggling with 2 things

1- fetching content relationship from a slice, I created a reusable project type page and added a hero slice to it, and on my homepage I have another slice called projects that has a content relationship item with links to each project

hero slice mocks

[
	{
		"__TYPE__": "SharedSliceContent",
		"variation": "default",
		"primary": {
			"title": {
				"__TYPE__": "FieldContent",
				"value": "temperature",
				"type": "Text"
			},
			"image": {
				"__TYPE__": "ImageContent",
				"origin": {
					"id": "main",
					"url": "https://images.unsplash.com/photo-1606248897732-2c5ffe759c04",
					"width": 4000,
					"height": 4000
				},
				"url": "https://images.unsplash.com/photo-1606248897732-2c5ffe759c04",
				"width": 4000,
				"height": 4000,
				"edit": {
					"zoom": 1,
					"crop": {
						"x": 0,
						"y": 0
					},
					"background": "transparent"
				},
				"thumbnails": {}
			}
		},
		"items": [
			{
				"__TYPE__": "GroupItemContent",
				"value": [
					[
						"label",
						{
							"__TYPE__": "FieldContent",
							"value": "ago",
							"type": "Text"
						}
					],
					[
						"content",
						{
							"__TYPE__": "FieldContent",
							"value": "news",
							"type": "Text"
						}
					]
				]
			}
		]
	}
]

and on my home

	const page = await client.getByUID('page', 'home', {
		graphQuery: `
			{
				project {
					slices {
						...on hero {
							variation {
								...on default {
									primary {
										title
										image
									}
								}
							}
						}
					}
				}
			}
		`
	});

It doesn't seem to be working correctly

2- adding additional styling to a prismic component

<PrismicLink class="link" field={data.link} aria-label={data..label}>
    {data.label}
</PrismicLink>

<style>
  .link {
    color: cyan;
  }
</style>

svelt will show

Unused CSS selector ".link"svelte(css-unused-selector)

<element class="link">

what is the solution for this ? what is the proper way to add a class to add additional styling to any prismic component be a link or an image or whatever

3

Hey @nilenarrator,

For #1, could you share the API response that you receive for that query?

For #2, the problem is that Svelte doesn't recognize the component as an HTML element, so it doesn't know that the .link class is being used. (And Svelte might tree-shake the selector so that the style doesn't work.) To solve this, you can use the :global() pseudo-selector:

<style>
:global(.link) {
  color: cyan;
}
</style>

However, this will break .link out of your component-scoped styles. If you still want .link to be scoped, you can nest it:

<div>
  <PrismicLink class="link" field={data.link} aria-label={data..label}>
      {data.label}
  </PrismicLink>
</div>

<style>
  div :global(.link) {
    color: cyan;
  }
</style>

Svelte will generate CSS that scopes the div but leaves .link unscoped, something like:

div.svelte-1nou5i2 .link {
  color: cyan;
}

I hope that helps!

Sam