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.

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

Already on GitHub? Sign in to your account

refactor: removing unused css #853

Merged
merged 1 commit into from Dec 8, 2022
Merged

refactor: removing unused css #853

merged 1 commit into from Dec 8, 2022

Conversation

cossssmin
Copy link
Member

This PR tries to fixes a bug with removing unused CSS, where some selectors were being removed even if they were part of a media query or pseudo, like in #852.

Tricky one because it doesn't creep up when you use the regular utility first approach, so this worked as expected:

<div class="dark:bg-slate-900"></div>

However when composing classes, like with Tailwind's @apply, the class would have been wrongfully removed from the HTML:

/* src/css/utilities.css */

.primary-text-color {
  @apply text-gray-100;
  @apply dark:text-gray-800 !important;
}
<extends src="src/layouts/main.html">
  <block name="template">
    <div class="primary-text-color">test</div>
  </block>
</extends>

The <style> tag in the compiled HTML would have looked like this:

<html>
<head>
	<style>
	  @media (prefers-color-scheme: dark) {
	    .primary-text-color {
	      color: #1f2937 !important;
	    }
	  }
	  :root {
	    color-scheme: light dark;
	  }
	</style>
</head>
<body>
  <!-- The div is missing the .primary-text-color class! -->
  <div style="color: #f3f4f6">test</div>
</body>
</html>

@cossssmin cossssmin merged commit 079097e into next Dec 8, 2022
@cossssmin cossssmin deleted the fix/css-cleanup branch December 8, 2022 22:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant