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

Add screen function #4318

Merged
merged 1 commit into from May 11, 2021
Merged

Add screen function #4318

merged 1 commit into from May 11, 2021

Conversation

@adamwathan
Copy link
Contributor

@adamwathan adamwathan commented May 11, 2021

This PR adds a new screen function to complement the existing theme function:

/* Input */
@media screen(sm) {
  ...
}

/* Output */
@media (min-width: 640px) {
  ...
}

This isn't really that useful on its own (we already have the @screen directive) but it's a useful part of solving the bigger problem of making Tailwind CSS more easily compatible with postcss-nested and postcss-nesting.

Adding this function will make it possible for us to release our own wrapper libraries around those two plugins that make them behave properly with Tailwind.

This is necessary for postcss-nesting because it doesn't support the ability to bubble custom at-rules, and necessary for postcss-nested because it has been migrated to the new visitor API which causes it to run in a non-deterministic order relative to other plugins, forcing Tailwind to be "nesting-aware" if it were to ever work properly. postcss-nested also has several bugs that cause bubbling to not work correctly in several situations for custom at-rules.

By providing this helper function, we can write wrappers around those libraries that translate @screen sm to @media screen(sm), which will make bubbling work correctly. The wrappers can also be used to force the plugins to run in a deterministic order by wrapping the visitor API implementations with a layer that only uses Once rather than node type events.

@adamwathan adamwathan merged commit 7991646 into master May 11, 2021
3 checks passed
3 checks passed
@github-actions
build (12)
Details
@github-actions
build (14)
Details
@github-actions
build (16)
Details
@adamwathan adamwathan deleted the screen-function branch May 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant