windicss
fix: Incorrect duration and animate utilities (close #404)
Description π
This pull request fixes the problems described in #404.
Added a test that ensures these invalid usages do not generate CSS rules.
Background π
It seems that processing < tokens opened up the door for a new category of bugs in utilities that were created prior to the change supporting <sm and similar variants. A similar bug is #403.
Perhaps instead of only fixing it at the utility level on a case-by-case basis, these tokens should not be interpreted as utilities in the first place:
// extract.ts line 61
const matches = !className.startsWith('<') && className.match(/\w+/);
However, the duration.value case suggests that the regex in the plugin utils should be more strict, as . should only occur if there's also a - in the token, as in ml-1.5. Am I missing a case here?
Test Case
Before
.\<transition {
-webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, filter, backdrop-filter;
-o-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-box-shadow, transform, -webkit-transform, filter, backdrop-filter;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-duration: 150ms;
-o-transition-duration: 150ms;
transition-duration: 150ms;
}
.\.duration {
-webkit-transition-duration: 150ms;
-o-transition-duration: 150ms;
transition-duration: 150ms;
}
.duration {
-webkit-transition-duration: 150ms;
-o-transition-duration: 150ms;
transition-duration: 150ms;
}
.duration\.value {
-webkit-transition-duration: 150ms;
-o-transition-duration: 150ms;
transition-duration: 150ms;
}
.\<animate {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
After
No CSS rules
Codecov Report
Merging #405 (a2c85d2) into main (4368925) will increase coverage by
0.01%. The diff coverage is100.00%.
@@ Coverage Diff @@
## main #405 +/- ##
==========================================
+ Coverage 88.20% 88.22% +0.01%
==========================================
Files 56 56
Lines 4782 4788 +6
Branches 1029 1032 +3
==========================================
+ Hits 4218 4224 +6
Misses 301 301
Partials 263 263
| Impacted Files | Coverage Ξ | |
|---|---|---|
| src/lib/utilities/dynamic.ts | 94.32% <100.00%> (+0.03%) |
:arrow_up: |
Continue to review full report at Codecov.
Legend - Click here to learn more
Ξ = absolute <relative> (impact),ΓΈ = not affected,? = missing dataPowered by Codecov. Last update 4368925...a2c85d2. Read the comment docs.
I think we might need a better solutions to this. Ideally, . and < is only used in .dark and <sm, for other utilities, we should not have them detected.
Agreed. The only change that would be desirable anyway is the one for duration (similar to the change in https://github.com/windicss/windicss/commit/6e94892772c712aa866ae3e78e830efd18206eb4).
Feel free to modify this PR, the added test should be useful to prevent regressions.
Ideally, the plugin does not even send these invalid tokens to the compiler, but the compiler could also filter them out in a first pass in extract.ts.
