Skip to content

Commit

Permalink
Support negative scale values
Browse files Browse the repository at this point in the history
  • Loading branch information
adamwathan committed Dec 6, 2021
1 parent a834b20 commit c48e629
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 16 deletions.
34 changes: 19 additions & 15 deletions src/corePlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -503,27 +503,31 @@ export let corePlugins = {
],
{ supportsNegativeValues: true }
),
scale: createUtilityPlugin('scale', [
scale: createUtilityPlugin(
'scale',
[
'scale',
[
['@defaults transform', {}],
'--tw-scale-x',
'--tw-scale-y',
['transform', 'var(--tw-transform)'],
],
],
[
[
'scale-x',
[['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
'scale',
[
['@defaults transform', {}],
'--tw-scale-x',
'--tw-scale-y',
['transform', 'var(--tw-transform)'],
],
],
[
'scale-y',
[['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
[
'scale-x',
[['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
],
[
'scale-y',
[['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
],
],
],
]),
{ supportsNegativeValues: true }
),

transform: ({ addBase, addUtilities }) => {
addBase({
Expand Down
5 changes: 5 additions & 0 deletions tests/basic-usage.test.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
.skew-y-12,
.skew-x-12,
.scale-95,
.-scale-x-100,
.transform {
--tw-translate-x: 0;
--tw-translate-y: 0;
Expand Down Expand Up @@ -359,6 +360,10 @@
--tw-scale-y: 0.95;
transform: var(--tw-transform);
}
.-scale-x-100 {
--tw-scale-x: -1;
transform: var(--tw-transform);
}
.transform {
transform: var(--tw-transform);
}
Expand Down
2 changes: 1 addition & 1 deletion tests/basic-usage.test.html
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
"
></div>
<div class="rotate-3"></div>
<div class="scale-95"></div>
<div class="scale-95 -scale-x-100"></div>
<div class="skew-y-12 skew-x-12"></div>
<div class="space-x-4 space-y-3 space-x-reverse space-y-reverse"></div>
<div class="stroke-current"></div>
Expand Down

0 comments on commit c48e629

Please sign in to comment.