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 all commits
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
71 changes: 71 additions & 0 deletions src/runtime/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
// prettier-ignore
import Duomo from "./runtime"

export function localStoragePreference() {
if (!(Duomo.localStorageKey in window.localStorage)) {
return null
}
const value = window.localStorage[Duomo.localStorageKey]
if (value !== "light" && value !== "dark") {
return null
}
return value
}

// prettier-ignore
export function matchMediaPreference() {
if (!("matchMedia" in window)) {
return null
}
const matches = window.matchMedia("(prefers-color-scheme: dark)").matches
const value = ({
false: "light",
true: "dark",
} as { [key: string]: string })["" + matches]
return value
}

// prettier-ignore
export function isKeyDownDarkMode(e: KeyboardEvent) {
const ok = (
!e.ctrlKey &&
!e.altKey &&
(e.key.toLowerCase() === "`" || e.keyCode === 192)
)
return ok
}

// prettier-ignore
export function isKeyDownDebugMode(e: KeyboardEvent) {
const ok = (
e.ctrlKey &&
!e.altKey &&
(e.key.toLowerCase() === "`" || e.keyCode === 192)
)
return ok
}

// prettier-ignore
export function parseDurationMs(durStr : string){
let [numStr, unit] = durStr.trim().split(/(ms|s|m)$/);
if(!numStr){
throw new Error(`parseDurationMs: expected \`ms\`, \`s\`, or \`m\`; durStr=${durStr}`)
}

let n = +numStr;
switch (unit) {
case 'ms':
// No-op
break;
case 's':
n *= 1000;
break;
case 'm':
n *= 1000 * 60;
break;
default:
// No-op
break;
}
return n;
}
63 changes: 13 additions & 50 deletions src/runtime/runtime.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import * as helper from './helpers'

declare global {
interface Window {
Duomo: Runtime
Expand All @@ -20,51 +22,6 @@ interface Runtime {
init(env?: Env, options?: RuntimeOptions): () => void
}

// prettier-ignore
function localStoragePreference() {
if (!(Duomo.localStorageKey in window.localStorage)) {
return null
}
const value = window.localStorage[Duomo.localStorageKey]
if (value !== "light" && value !== "dark") {
return null
}
return value
}

// prettier-ignore
function matchMediaPreference() {
if (!("matchMedia" in window)) {
return null
}
const matches = window.matchMedia("(prefers-color-scheme: dark)").matches
const value = ({
false: "light",
true: "dark",
} as { [key: string]: string })["" + matches]
return value
}

// prettier-ignore
function isKeyDownDarkMode(e: KeyboardEvent) {
const ok = (
!e.ctrlKey &&
!e.altKey &&
(e.key.toLowerCase() === "`" || e.keyCode === 192)
)
return ok
}

// prettier-ignore
function isKeyDownDebugMode(e: KeyboardEvent) {
const ok = (
e.ctrlKey &&
!e.altKey &&
(e.key.toLowerCase() === "`" || e.keyCode === 192)
)
return ok
}

class Duomo implements Runtime {
static localStorageKey = "duomo-theme-preference"

Expand All @@ -77,6 +34,7 @@ class Duomo implements Runtime {
// Tracks whether dark mode was set once; for FOUC.
// FOUC: Flash Of Unstyled Content.
#didInitDarkMode: boolean = false
#shouldNoOpDarkMode: boolean = false

#deferrers: (() => void)[] = []

Expand All @@ -95,8 +53,8 @@ class Duomo implements Runtime {

this.#html = document.documentElement

const lsPref = localStoragePreference()
const mmPref = matchMediaPreference()
const lsPref = helper.localStoragePreference()
const mmPref = helper.matchMediaPreference()
if (lsPref || mmPref) {
this.setDarkMode((lsPref || mmPref) === "dark")
}
Expand All @@ -115,14 +73,14 @@ class Duomo implements Runtime {
// `keydown` handlers.
if (env === "development") {
const handleDarkMode = (e: KeyboardEvent) => {
if (isKeyDownDarkMode(e)) {
if (helper.isKeyDownDarkMode(e)) {
this.toggleDarkMode()
}
}
document.addEventListener("keydown", handleDarkMode)
this.#deferrers.push(() => document.removeEventListener("keydown", handleDarkMode))
const handleDebugMode = (e: KeyboardEvent) => {
if (isKeyDownDebugMode(e)) {
if (helper.isKeyDownDebugMode(e)) {
this.toggleDebugMode()
}
}
Expand All @@ -144,7 +102,10 @@ class Duomo implements Runtime {
return this.#darkMode
}
setDarkMode(mode: boolean) {
if (this.#shouldNoOpDarkMode) return;
this.#darkMode = mode

const durValue = getComputedStyle(document.documentElement).getPropertyValue('--default-theme-transition-duration');

const toggle = (mode: boolean) => {
const action = !mode
Expand All @@ -160,12 +121,14 @@ class Duomo implements Runtime {
this.#didInitDarkMode = true
return
} else {
this.#shouldNoOpDarkMode = true
this.#html!.setAttribute("data-theme-effect", "true")
setTimeout(() => {
toggle(mode)
setTimeout(() => {
this.#html!.removeAttribute("data-theme-effect")
}, 300)
this.#shouldNoOpDarkMode = false
}, helper.parseDurationMs(durValue))
}, 25)
}
}
Expand Down
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
14 changes: 14 additions & 0 deletions src/sass/getters/ranges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use "../configuration" as conf;
@use "../utils";
@use 'sass:list';

// TODO: Add support for `bar`?
// Then we can have `bar` and `cap`.
Expand Down Expand Up @@ -52,3 +53,16 @@
@function percent-range() {
Copy link
Owner

Choose a reason for hiding this comment

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

In theory we can delete percent-range right? Decimal-range is supposed to do all of this for us, I think. A percent-range in theory is just like, 0 to 100% or like decimal-range(0, 100) with a percent sign. Maybe we can add a third parameter that enables support for percentage-based values instead? This isn’t something for you to worry about, but yeah, the idea is to have one getter that deals with all decimal-based incrementing.

@return conf.$percent-range;
}

@function decimal-range($begin, $multiply) {
$list: ();
@each $range in conf.$percent-range {
$list: list.append($list, $range * $multiply);
@if ($begin) {
$list: list.append($list, ($range * $multiply) + $begin);
} @else {
$list: list.append($list, $range * $multiply);
}
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;
}
10 changes: 10 additions & 0 deletions tests/getters/ranges.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* @jest-environment node
*/
declare function sass(data: string): string
declare function errSass(testStr: string): Function

test("integration", () => {
const css = sass(`
Expand Down Expand Up @@ -49,3 +50,12 @@ $end: -1;
}
`.trim())
})

//test decimal-range
test("integration", () => {
expect(errSass(`decimal-range(0, 0.1)`)).toThrowError("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")
Copy link
Owner

Choose a reason for hiding this comment

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

This is great. I would just add some code to check that this works the same for negative values. Nice work!

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")
})