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

JIT: Replace @tailwind screens with @tailwind variants #4356

Merged
merged 2 commits into from May 14, 2021

Conversation

@adamwathan
Copy link
Contributor

@adamwathan adamwathan commented May 14, 2021

This PR adds a @tailwind variants directive as a replacement for the existing @tailwind screens directive.

The @tailwind screens directive has historically been used to control where responsive variants are inserted into the stylesheet. By default we append to the end, but there are some situations where you want to control it, so you have always been able to optionally stick @tailwind screens in your stylesheet and we use that as the insertion point if it exists:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

/* This will come _after_ the responsive variants now */
.foo {
  color: black;
}

In the JIT engine, there is no real difference between responsive variants or hover/focus/etc. variants — everything is simply a "variant" and all variants are grouped together, unlike in the classic engine where non-responsive variants are grouped per utility.

With this change, the name @tailwind screens no longer feels appropriate, so this PR adds @tailwind variants which does the exact same thing but is better named.

This will probably just sit around quietly as a sort of undocumented thing until 3.0 where we can push this as the recommended name, and deprecate the old one explicitly by showing a warning in the console.

@codecov-commenter
Copy link

@codecov-commenter codecov-commenter commented May 14, 2021

Codecov Report

Merging #4356 (2d0ac89) into master (87df93d) will increase coverage by 0.04%.
The diff coverage is 71.42%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #4356      +/-   ##
==========================================
+ Coverage   71.80%   71.84%   +0.04%     
==========================================
  Files         220      220              
  Lines        4802     4806       +4     
  Branches      802      805       +3     
==========================================
+ Hits         3448     3453       +5     
+ Misses       1268     1267       -1     
  Partials       86       86              
Impacted Files Coverage Δ
src/jit/lib/normalizeTailwindDirectives.js 71.42% <42.85%> (ø)
src/jit/index.js 61.90% <100.00%> (ø)
src/jit/lib/expandTailwindAtRules.js 83.58% <100.00%> (+2.23%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 87df93d...2d0ac89. Read the comment docs.

@adamwathan adamwathan merged commit 23da6b6 into master May 14, 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 replace-screens-with-variants-jit branch May 14, 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

2 participants