Svelte CSS

Article.css

/*

	I have an Article component, that has the following child components:
		- Heading
		- Paragraph
		- Quote
		- Image
		- Gallery
		- Embed

	The Article component sets the base typographic styles for all child components
	(font sizes, font-weights, line heights, etc.)

	Each of these child components has a `.block` class, and for Quote, Image,
	Gallery, & Embed, editors can set a block width (S, M, L, XL) in the CMS,
	which is applied using one of the `.block--width-x` classes below.

*/

/* Here's an example of how that looks with :global() */

.Article__body {
	font-size: 1.2rem;
}

.Article__body :global(h1),
.Article__body :global(h2),
.Article__body :global(h3),
.Article__body :global(h4),
.Article__body :global(h5),
.Article__body :global(h6) {
	font-weight: normal;
}

.Article__body :global(h1) {
	font-size: 2rem;
}

.Article__body :global(h2) {
	font-size: 1.8rem;
	letter-spacing: 0.01em;
	margin: 4rem 0 3rem;
}

.Article__body :global(h3) {
	font-size: 1.4rem;
}

.Article__body :global(h4) {
	font-size: 1.2rem;
}

.Article__body :global(h5) {
	font-size: 1rem;
}

.Article__body :global(h6) {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.Article__body :global(p) {
	line-height: 1.2;
}

.Article__body :global(ol),
.Article__body :global(ul) {
	padding-left: 1em;
}

.Article__body :global(li) {
  margin-bottom: 1em;
  line-height: 1.5;
  padding-left: 1em;
}

.Article__body :global(.block) {
	width: 100%;
	max-width: 40rem;
	margin: 2rem auto;
	padding: 1rem;
}

.Article__body :global(.block--width-S) {
	max-width: 30rem;
}

.Article__body :global(.block--width-M) {
	max-width: 40rem;
}

.Article__body :global(.block--width-L) {
	max-width: 70rem;
}

.Article__body :global(.block--width-XL) {
	max-width: 100%;
}





/* Here's the same example, without having to repeat :global() everywhere */

.Article__body {
	font-size: 1.2rem;
}

@cascade .Article__body {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: normal;
	}

	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.8rem;
		letter-spacing: 0.01em;
		margin: 4rem 0 3rem;
	}

	h3 {
		font-size: 1.4rem;
	}

	h4 {
		font-size: 1.2rem;
	}

	h5 {
		font-size: 1rem;
	}

	h6 {
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.01em;
	}

	p {
		line-height: 1.2;
	}

	ol,
	ul {
		padding-left: 1em;
	}

	li {
	  margin-bottom: 1em;
	  line-height: 1.5;
	  padding-left: 1em;
	}

	.block {
		width: 100%;
		max-width: 40rem;
		margin: 2rem auto;
		padding: 1rem;
	}

	.block--width-S {
		max-width: 30rem;
	}

	.block--width-M {
		max-width: 40rem;
	}

	.block--width-L {
		max-width: 70rem;
	}

	.block--width-XL {
		max-width: 100%;
	}
}

globals.css

/*
	Here is an example of importing global styles into _layout.html

	This doesn't work without first rewriting or transforming every selector
	in src/scss/globals.scss:
*/


@import 'src/scss/globals';

/* But this works without having to touch that file: */

@global {
	@import 'src/scss/globals';
}