Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

馃悰 BUG: Inline styles in Astro components are not processed with @snowpack/plugin-postcss #1234

Closed
jasikpark opened this issue Aug 25, 2021 · 5 comments
Closed

馃悰 BUG: Inline styles in Astro components are not processed with @snowpack/plugin-postcss #1234

jasikpark opened this issue Aug 25, 2021 · 5 comments
Projects
馃悰 Bug Tracker

Comments

@jasikpark
Copy link
Contributor

jasikpark commented Aug 25, 2021 •
edited

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

While trying to get the container queries polyfill setup with Astro as a PostCSS plugin, I wanted to use container query syntax in the inline style tags, ex:

src/pages/index.astro 
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Astro with PostCSS</title>
	<script async defer src="https://unpkg.com/cqfill"></script>
</head>

<style>
body {
	padding: 1rem;
	font-family: "Rubik";
	line-height: 1.4;
}

.test-wrapper {
	contain: layout inline-size;
	resize: horizontal;
	overflow: auto;
	margin: 1rem auto;
	outline: solid 1px grey;
	outline-offset: 4px;
}

.card {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	gap: 1rem;
}

.card__thumb {
	aspect-ratio: 1 / 1;
	flex: 0 0 150px;
	min-height: 150px;
	background-color: #4caf4c;
	border-radius: 7px;
}

.card__title {
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	text-align: center;
}

.card__content {
	flex: 1;
}

@container (min-width: 400px) {
	.card {
		flex-direction: row;
	}

	.card__thumb {
		flex: 0 0 100px;
		min-height: 100px;
		align-self: flex-start;
	}
}

@container (min-width: 600px) {
	.card__thumb {
		flex: 0 0 150px;
		min-height: 150px;
	}
}

@container (min-width: 800px) {
	.card {
		position: relative;
		justify-content: center;
		align-items: center;
		min-height: 350px;
	}

	.card__thumb {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.25;
	}

	.card__content {
		position: relative;
		flex: unset;
	}

	.card__title {
		font-weight: bold;
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}

	.card__desc {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		color: #222;
	}
}

.note {
	padding: 1rem;
	margin-top: 1rem;
	text-align: center;
}

</style>

<body>
	<h1>Astro with PostCSS</h1>

	<div class="test-wrapper" style="width: 320px">
		<div class="card">
			<div class="card__thumb"></div>
			<div class="card__content">
				<h3 class="card__title">
					Inspect Element As A Way To Feed Your Curiosity
				</h3>
				<p class="card__desc">
					One of the best gifts we have as front-end developers is inspect
					element.
				</p>
			</div>
		</div>
	</div>

	<div class="note">
		<p>This is a demo from the <a href="http://ishadeed.com/article/say-hello-to-css-container-queries/">container queries</a> article by Ahmad Shadeed</p>
	</div>
</body>

</html>

Which does not produce the PostCSS processed syntax, while importing the CSS import "./global.css"; works perfectly fine in @jonathantneal's example.

Steps to Reproduce

Compare @jonathantneal's working example:

Link to Minimal Reproducible Example (Optional)

https://codesandbox.io/s/github/jasikpark/astro-with-postcss/tree/main/
@matthewp matthewp added this to Needs Triage in 馃悰 Bug Tracker via automation Aug 26, 2021
@matthewp
Copy link
Contributor

Hey @jasikpark, I think the reason here is that the snowpack plugin is only used by CSS files that are loaded through snowpack. In this case the styles are completely handled by Astro internally. It does use post-css, just not through the snowpack plugin.

That being said, we probably do want to support container queries here. How is it that container queries are working in that example, since it doesn't use post-css plugin? CSS compilation happens here: https://github.com/snowpackjs/astro/blob/0f0cc2b9d83ffeee125b85c95d2d51080f21074d/packages/astro/src/compiler/transform/styles.ts . So if we need to add a post-css plugin that's the place to do it.

I'm going to mark this as accepted even though the solution isn't clear to me yet.

@matthewp matthewp moved this from Needs Triage to Accepted in 馃悰 Bug Tracker Aug 27, 2021
@matthewp
Copy link
Contributor

Talked about this on Discord and it sounds like adding this plugin to our internal postcss is the way to go for now, https://discord.com/channels/830184174198718474/845430950191038464/880911997745635388

@jasikpark are you interested in working on this?

@jasikpark
Copy link
Contributor Author

For sure! I suppose I'll also have to check out @FredKSchott's branch that explores going gungho on allowing full postcss integration 馃槅

@FredKSchott
Copy link
Member

please do! You could probably tackle this and #1279 at the same time!

@FredKSchott
Copy link
Member

Thanks for the report! We believe that this has been fixed in astro v0.21, going out today. Let us know if you can still reproduce the issue after updating to v0.21 and we'll be happy to take a look.

馃悰 Bug Tracker automation moved this from Accepted to Done Nov 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
No open projects
馃悰 Bug Tracker
Done
Milestone
No milestone
Development

No branches or pull requests
3 participants
@matthewp @FredKSchott @jasikpark