Skip to content

PostCSS Stepped Value Functions #356

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.

Sign up for GitHub

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

Merged
Antonio-Laguna merged 22 commits into from
May 2, 2022
Merged

PostCSS Stepped Value Functions #356

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
10a32ae
WIP
Antonio-Laguna Apr 30, 2022
7378594
Fixing tests and TypeScript node conversion
Antonio-Laguna Apr 30, 2022
9fb728d
Adding round & more tests
Antonio-Laguna Apr 30, 2022
02379a2
Update plugins/postcss-stepped-value-functions/src/mod.ts
Antonio-Laguna May 1, 2022
06e7c26
Update plugins/postcss-stepped-value-functions/src/rem.ts
Antonio-Laguna May 1, 2022
d100775
Update plugins/postcss-stepped-value-functions/src/round.ts
Antonio-Laguna May 1, 2022
06effc5
Update plugins/postcss-stepped-value-functions/src/utils.ts
Antonio-Laguna May 1, 2022
84edcb0
Updating docs and examples
Antonio-Laguna May 1, 2022
19215e3
Ensuring values are there on mod
Antonio-Laguna May 1, 2022
566d718
More tests
Antonio-Laguna May 1, 2022
073640a
More complex
Antonio-Laguna May 1, 2022
3c84d99
Somewhat legit but broken
Antonio-Laguna May 1, 2022
c75c6af
Merge branch 'main' into feature/stepped-value-functions
Antonio-Laguna May 1, 2022
3e4b9f3
Linting
Antonio-Laguna May 1, 2022
81630fe
Linking to CSSDB
Antonio-Laguna May 1, 2022
ea6287c
Updating labeler
Antonio-Laguna May 1, 2022
07c7e4f
Updating meta
Antonio-Laguna May 1, 2022
3913df3
Sorting this too
Antonio-Laguna May 1, 2022
db00658
Update plugins/postcss-stepped-value-functions/docs/README.md
Antonio-Laguna May 2, 2022
bf5dcc6
Update plugins/postcss-stepped-value-functions/package.json
Antonio-Laguna May 2, 2022
622a4c1
Update plugins/postcss-stepped-value-functions/docs/README.md
Antonio-Laguna May 2, 2022
7995c8a
Regenerating docs
Antonio-Laguna May 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
More tests
  • Loading branch information
@Antonio-Laguna
Antonio-Laguna committed May 1, 2022
commit 566d71815faff4ad1780960e1c4831156dea2e10
2 changes: 1 addition & 1 deletion plugins/postcss-stepped-value-functions/.tape.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ postcssTape(plugin)({
options: {
onInvalid: 'warn'
},
warnings: 5,
warnings: 15,
},
'basic:preserve-true': {
message: 'supports { preserve: true } usage',
Expand Down
16 changes: 16 additions & 0 deletions plugins/postcss-stepped-value-functions/test/basic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.mod {
padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%);
transform: rotate(mod(-140deg, -90deg));
width: mod(mod(-18px, 5px), 5px);
}

.rem {
Expand All @@ -12,6 +13,7 @@
font-size: mod(-18px, 5px);
width: rem(-18px, 5px);
transform: rotateX(mod(140deg, -90deg)) rotateY(rem(140deg, -90deg));
height: rem(mod(mod(-18px, 5px), 5px), 2px);
}

.round {
Expand All @@ -30,6 +32,11 @@
inset: round(to-zero, 15px, 4px);
}

.round-complex {
left: round(nearest, mod(-18px, 5px), 2px);
top: round(nearest, mod(mod(-18px, 5px), 5px), 2px);
}

.invalid {
font-size: mod(18px, 5rem);
width: rem(var(--foo), 5px);
Expand All @@ -39,4 +46,13 @@
inset: round(something, 15px, 4px);
margin-top: round(nearest, 15px, 4px, 50px);
margin-bottom: round(nearest, 15px, 4%);
font-size: mod;
font-size: mod();
font-size: mod(1px);
font-size: rem;
font-size: rem();
font-size: rem(1px);
font-size: round;
font-size: round();
font-size: round(1px);
}
16 changes: 16 additions & 0 deletions plugins/postcss-stepped-value-functions/test/basic.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.mod {
padding: 8px 3px 1px calc(3px + 50%);
transform: rotate(-50deg);
width: 2px;
}

.rem {
Expand All @@ -12,6 +13,7 @@
font-size: 2px;
width: -3px;
transform: rotateX(-40deg) rotateY(50deg);
height: 0;
}

.round {
Expand All @@ -30,6 +32,11 @@
inset: 12px;
}

.round-complex {
left: 2px;
top: 2px;
}

.invalid {
font-size: mod(18px, 5rem);
width: rem(var(--foo), 5px);
Expand All @@ -39,4 +46,13 @@
inset: round(something, 15px, 4px);
margin-top: round(nearest, 15px, 4px, 50px);
margin-bottom: round(nearest, 15px, 4%);
font-size: mod;
font-size: mod();
font-size: mod(1px);
font-size: rem;
font-size: rem();
font-size: rem(1px);
font-size: round;
font-size: round();
font-size: round(1px);
}
16 changes: 16 additions & 0 deletions plugins/postcss-stepped-value-functions/test/basic.on-invalid-warn.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.mod {
padding: 8px 3px 1px calc(3px + 50%);
transform: rotate(-50deg);
width: 2px;
}

.rem {
Expand All @@ -12,6 +13,7 @@
font-size: 2px;
width: -3px;
transform: rotateX(-40deg) rotateY(50deg);
height: 0;
}

.round {
Expand All @@ -30,6 +32,11 @@
inset: 12px;
}

.round-complex {
left: 2px;
top: 2px;
}

.invalid {
font-size: mod(18px, 5rem);
width: rem(var(--foo), 5px);
Expand All @@ -39,4 +46,13 @@
inset: round(something, 15px, 4px);
margin-top: round(nearest, 15px, 4px, 50px);
margin-bottom: round(nearest, 15px, 4%);
font-size: mod;
font-size: mod();
font-size: mod(1px);
font-size: rem;
font-size: rem();
font-size: rem(1px);
font-size: round;
font-size: round();
font-size: round(1px);
}
23 changes: 23 additions & 0 deletions plugins/postcss-stepped-value-functions/test/basic.preserve-true.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
padding: 8px mod(18px, 5px) 1px calc(mod(15px, 6px) + 50%);
transform: rotate(-50deg);
transform: rotate(mod(-140deg, -90deg));
width: 2px;
width: mod(2px, 5px);
width: mod(mod(-18px, 5px), 5px);
}

.rem {
Expand All @@ -19,6 +22,9 @@
width: rem(-18px, 5px);
transform: rotateX(-40deg) rotateY(50deg);
transform: rotateX(mod(140deg, -90deg)) rotateY(rem(140deg, -90deg));
height: 0;
height: rem(mod(2px, 5px), 2px);
height: rem(mod(mod(-18px, 5px), 5px), 2px);
}

.round {
Expand Down Expand Up @@ -47,6 +53,14 @@
inset: round(to-zero, 15px, 4px);
}

.round-complex {
left: 2px;
left: round(nearest, mod(-18px, 5px), 2px);
top: 2px;
top: round(nearest, mod(2px, 5px), 2px);
top: round(nearest, mod(mod(-18px, 5px), 5px), 2px);
}

.invalid {
font-size: mod(18px, 5rem);
width: rem(var(--foo), 5px);
Expand All @@ -57,4 +71,13 @@
inset: round(something, 15px, 4px);
margin-top: round(nearest, 15px, 4px, 50px);
margin-bottom: round(nearest, 15px, 4%);
font-size: mod;
font-size: mod();
font-size: mod(1px);
font-size: rem;
font-size: rem();
font-size: rem(1px);
font-size: round;
font-size: round();
font-size: round(1px);
}