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.

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

[Todo] percent-range() -> decimal-range() #267

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

[Todo] percent-range() -> decimal-range() #267

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3310d5f
Debounce dark mode to prevent weird color bugs
devjoylee Jan 10, 2021
2ca3c19
Get a duration element from css
devjoylee Jan 11, 2021
f5e0681
Create a helper.js
devjoylee Jan 11, 2021
dcc2fc6
Fix a type and a file name
devjoylee Jan 11, 2021
c684113
decimal-range function with a test
devjoylee Jan 11, 2021
ed863a2
Move functions from runtime to helpers
devjoylee Jan 11, 2021
0e153b0
Use decimal-range function
devjoylee Jan 12, 2021
8ed9abf
Update ranges.scss
devjoylee Jan 12, 2021
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
43 changes: 11 additions & 32 deletions src/sass/core/letter-spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,24 @@
@use "../mixins";
@use "../utils";

// TODO: Change to `percent-range`.
//
// prettier-ignore
$-range: (
-0.1,
-0.09,
-0.08,
-0.075,
-0.07,
-0.06,
-0.05,
-0.04,
-0.03,
-0.025,
-0.02,
-0.01,
0,
0.01,
0.02,
0.025,
0.03,
0.04,
0.05,
0.06,
0.07,
0.075,
0.08,
0.09,
0.1,
);

// NOTE: Do not use `em($rv)`.
//
// - 0.1 + em -> 0.01em
// - em(0.1) -> 0.00625em
//
@mixin letter-spacing($variants...) {
@include mixins.compose($variants) using ($composed) {
@each $rv in $-range {
@each $rv in get.decimal-range(0, -0.1) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you did here. There’s a small utility you can use to combine these loops. So you can use utils.list-of (I think that’s what it’s called, you can double-check the utils folder). It will create a new list from two separate lists. So you should be able to refactor this to be like: utils.list-of(get.decimal-range(0, -0.1), get.decimal-range(0, 0.1)) and that will enable you to only have to have one loop instead of two.

The get.n() function just tells you in a number is negative or positive. So if we have separate loops, we have to have get.n() for the negative loop. So you don’t to worry about negative values when you combine loops. That is handled automatically.

// $rv : -0.1, -0.09, -0.08, -0.075, -0.07, -0.06, -0.05, -0.04, -0.03, -0.025, -0.02, -0.01, 0
.#{get.n($rv)}tracking-#{utils.escape(get.abs($rv * 100))} {
@include mixins.variants($composed...) {
letter-spacing: $rv + em;
}
}
}

@each $rv in get.decimal-range(0, 0.1) {
// $rv : 0 0.01, 0.02, 0.025, 0.03, 0.04, 0.05, 0.06, 0.07, 0.075, 0.08, 0.09, 0.1,
.#{get.n($rv)}tracking-#{utils.escape(get.abs($rv * 100))} {
@include mixins.variants($composed...) {
letter-spacing: $rv + em;
Expand Down
24 changes: 3 additions & 21 deletions src/sass/core/line-height.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,11 @@
@use "../mixins";
@use "../utils";

// TODO: Change to `percent-range`.
//
// prettier-ignore
$-range: (
1,
1.1,
1.2,
1.25,
1.3,
1.4,
1.5,
1.6,
1.7,
1.75,
1.8,
1.9,
2,
);

@mixin line-height($variants...) {
@include mixins.compose($variants) using ($composed) {
@each $rv in $-range {
.leading-#{$rv * 100} {
// $rv : 1, 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2
@each $rv in get.decimal-range(1, 1) {
.leading-#{($rv * 100)} {
@include mixins.variants($composed...) {
line-height: $rv;
}
Expand Down
20 changes: 11 additions & 9 deletions src/sass/core/transform.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,6 @@ $-translate-range: (
100,
);

// TODO: Change to `percent-range`.
//
// prettier-ignore
$-scale-range: (
0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1,
1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2,
);

$-origin-opts: (
top: top,
top-right: top right,
Expand Down Expand Up @@ -63,7 +55,17 @@ $-origin-opts: (
}
}

@each $rv in $-scale-range {
@each $rv in get.decimal-range(0, 1) {
// $rv : 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1,
.scale-#{get.abs($rv * 100)} {
@include mixins.variants($composed...) {
--transform-scale: #{$rv};
}
}
}

@each $rv in get.decimal-range(1, 1) {
// $rv : 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2,
.scale-#{get.abs($rv * 100)} {
@include mixins.variants($composed...) {
--transform-scale: #{$rv};
Copy link
Collaborator Author

@devjoylee devjoylee Jan 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$-scale-range values which is deleted, increase by 0.1 from 0 to 2.

// 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1, 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2,

My decimal-range() function, however, can make only from 0 to 1.

get.decimal-range(0.1) // 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1

So I created two different @each The first one starts from 0, the second starts from 1.

And I want to combine these two @each as they have same code inside. Can I do like this?

@for $i from 0 through 1 {
  @each $rv in get.decimal-range(0, $i) {
			.scale-#{get.abs($rv * 100)} {
				@include mixins.variants($composed...) {
					--transform-scale: #{$rv};
				}
			}
}

Or is there better way to do it making the values from 0 to 2?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well the basic idea is that we can do something like utils.list-of(decimal-range(...), decimal-range(...)). That way decimal ranges only worry about incrementing from like 0 to 1, or 1 to 2, but doesn’t go from 0 to 2. That’s probably how I would get around this.

Expand Down
22 changes: 2 additions & 20 deletions src/sass/core/transition.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,6 @@
@use "../mixins";
@use "../utils";

// TODO: Change to `percent-range`.
//
// prettier-ignore
$-range: (
0,
100,
200,
250,
300,
400,
500,
600,
700,
750,
800,
900,
1000,
);

@mixin transition($variants...) {
@each $variant in $variants {
// TODO: https://github.com/zaydek/duomo/issues/244.
Expand All @@ -36,7 +17,8 @@ $-range: (
}
}

@each $rv in $-range {
@each $rv in get.decimal-range(0, 1000) {
// $rv : 0, 100, 200, 250, 300, 400, 500, 600, 700, 750, 800, 900, 1000,
.duration-#{$rv} {
@include mixins.variants($variant) {
--transition-duration: #{$rv + ms};
Expand Down
9 changes: 5 additions & 4 deletions src/sass/getters/ranges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,11 @@
$list: ();
@each $range in conf.$percent-range {
$list: list.append($list, $range * $end);
@if ($begin) {
$list: list.append($list, ($range * $end) + $begin);
} @else {
$list: list.append($list, $range * $end);
}
Copy link
Collaborator Author

@devjoylee devjoylee Jan 12, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rename $end to $multiply

// range example
If $begin is 1 -> 1, 1.1, 1.2, 1.25, 1.3, 1.4, 1.5, 1.6, 1.7, 1.75, 1.8, 1.9, 2,
if $begin is 0 -> 0, 0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good. We should write some tests to make sure this works exactly as we expect. Oh I just noticed you wrote some tests! 😆 Congrats!

}
@return $list;
}
// decimal-range(0, 0.1); // -> (0, 0.01, 0.02, 0.025, 0.03, ...)
// decimal-range(0, 1); // -> (0, 0.1, 0.2, 0.25, 0.3, ...)
// decimal-range(0, 10); // -> (0, 1, 2, 2.5, 3, ...)
// decimal-range(0, 100); // -> (0, 10, 20, 25, 30, ...)
1 change: 1 addition & 0 deletions tests/getters/ranges.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,5 @@ test("integration", () => {
expect(errSass(`decimal-range(0, 1)`)).toThrowError("0 0.1 0.2 0.25 0.3 0.4 0.5 0.6 0.7 0.75 0.8 0.9 1")
expect(errSass(`decimal-range(0, 10)`)).toThrowError("0 1 2 2.5 3 4 5 6 7 7.5 8 9 10")
expect(errSass(`decimal-range(0, 100)`)).toThrowError("0 10 20 25 30 40 50 60 70 75 80 90 100")
expect(errSass(`decimal-range(1, 1)`)).toThrowError("1 1.1 1.2 1.25 1.3 1.4 1.5 1.6 1.7 1.75 1.8 1.9 2")
})