From b22b11ca52780d48d38c6016502fa2dce14d81d7 Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:07:32 -0400 Subject: [PATCH 1/9] change animation names and add aliases --- src/props.animations.css | 30 ++++++++++++++++++------------ src/props.animations.js | 40 ++++++++++++++++++++++------------------ 2 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/props.animations.css b/src/props.animations.css index 603555a9..3735821b 100644 --- a/src/props.animations.css +++ b/src/props.animations.css @@ -1,5 +1,7 @@ @import 'props.media.css'; +@import 'props.supports.css'; + :where(html) { --animation-fade-in: fade-in .5s var(--ease-3); --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); @@ -9,12 +11,16 @@ --animation-scale-down: scale-down .5s var(--ease-3); --animation-slide-out-up: slide-out-up .5s var(--ease-3); --animation-slide-out-down: slide-out-down .5s var(--ease-3); - --animation-slide-out-right: slide-out-right .5s var(--ease-3); - --animation-slide-out-left: slide-out-left .5s var(--ease-3); + --animation-slide-out-end: slide-out-end .5s var(--ease-3); + --animation-slide-out-right: var(--animation-slide-out-end); + --animation-slide-out-start: slide-out-start .5s var(--ease-3); + --animation-slide-out-left: var(--animation-slide-out-start); --animation-slide-in-up: slide-in-up .5s var(--ease-3); --animation-slide-in-down: slide-in-down .5s var(--ease-3); - --animation-slide-in-right: slide-in-right .5s var(--ease-3); - --animation-slide-in-left: slide-in-left .5s var(--ease-3); + --animation-slide-in-end: slide-in-end .5s var(--ease-3); + --animation-slide-in-right: var(--animation-slide-in-end); + --animation-slide-in-start: slide-in-start .5s var(--ease-3); + --animation-slide-in-left: var(--animation-slide-in-start); --animation-shake-x: shake-x .75s var(--ease-out-5); --animation-shake-y: shake-y .75s var(--ease-out-5); --animation-spin: spin 2s linear infinite; @@ -53,11 +59,11 @@ @keyframes slide-out-down { to { transform: translateY(100%) } } -@keyframes slide-out-right { - to { transform: translateX(100%) } +@keyframes slide-out-end { + to { transform: translateX(calc(100% * var(--isLTR))) } } -@keyframes slide-out-left { - to { transform: translateX(-100%) } +@keyframes slide-out-start { + to { transform: translateX(calc(-100% * var(--isLTR))) } } @keyframes slide-in-up { from { transform: translateY(100%) } @@ -65,11 +71,11 @@ @keyframes slide-in-down { from { transform: translateY(-100%) } } -@keyframes slide-in-right { - from { transform: translateX(-100%) } +@keyframes slide-in-end { + from { transform: translateX(calc(-100% * var(--isLTR))) } } -@keyframes slide-in-left { - from { transform: translateX(100%) } +@keyframes slide-in-start { + from { transform: translateX(calc(100% * var(--isLTR))) } } @keyframes shake-x { 0%, 100% { transform: translateX(0%) } diff --git a/src/props.animations.js b/src/props.animations.js index 5ba7d050..99737184 100644 --- a/src/props.animations.js +++ b/src/props.animations.js @@ -55,16 +55,18 @@ export default { @keyframes slide-out-down { to { transform: translateY(100%) } }`, - "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)", - "--animation-slide-out-right-@": ` -@keyframes slide-out-right { - to { transform: translateX(100%) } -}`, - "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)", - "--animation-slide-out-left-@": ` -@keyframes slide-out-left { - to { transform: translateX(-100%) } -}`, +"--animation-slide-out-end": "slide-out-end .5s var(--ease-3)", +"--animation-slide-out-end-@": ` +@keyframes slide-out-end { + to { transform: translateX(calc(100% * var(--isLTR))) } +}`, + "--animation-slide-out-right": "var(--animation-slide-out-end)", + "--animation-slide-out-start": "slide-out-start .5s var(--ease-3)", + "--animation-slide-out-start-@": ` +@keyframes slide-out-start { + to { transform: translateX(calc(-100% * var(--isLTR))) } +}`, + "--animation-slide-out-left": "var(--animation-slide-out-start)", "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)", "--animation-slide-in-up-@": ` @keyframes slide-in-up { @@ -75,16 +77,18 @@ export default { @keyframes slide-in-down { from { transform: translateY(-100%) } }`, - "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)", - "--animation-slide-in-right-@": ` -@keyframes slide-in-right { - from { transform: translateX(-100%) } + "--animation-slide-in-end": "slide-in-end .5s var(--ease-3)", + "--animation-slide-in-end-@": ` +@keyframes slide-in-end { + from { transform: translateX(calc(-100% * var(--isLTR))) } }`, - "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)", - "--animation-slide-in-left-@": ` -@keyframes slide-in-left { - from { transform: translateX(100%) } + "--animation-slide-in-right": "var(--animation-slide-in-end)", + "--animation-slide-in-start": "slide-in-start .5s var(--ease-3)", + "--animation-slide-in-start-@": ` +@keyframes slide-in-start { + from { transform: translateX(calc(100% * var(--isLTR))) } }`, + "--animation-slide-in-left": "var(--animation-slide-in-start)", "--animation-shake-x": "shake-x .75s var(--ease-out-5)", "--animation-shake-x-@": ` @keyframes shake-x { From e12ff608ba358a4e93ae14c481baf3731151af1a Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:07:59 -0400 Subject: [PATCH 2/9] modify ltr/rtl detection to bypass postcss issues --- src/props.supports.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/props.supports.css b/src/props.supports.css index 051818c3..7004f1a8 100644 --- a/src/props.supports.css +++ b/src/props.supports.css @@ -8,9 +8,16 @@ :where(html) { --isLTR: 1; --isRTL: -1; - + &:dir(rtl) { + /* PostCSS compiles this to [dir="rtl"] :where(html) for older browsers, which doesn't work */ + --isLTR: -1; + --isRTL: 1; + } + + &[dir="rtl"] { + /* Force the dir attribute selector to attach to :where(html) */ --isLTR: -1; --isRTL: 1; } -} +} \ No newline at end of file From 1dd9242afa30d5a1ce65f1ed6fd4ac1a478a6d1c Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:08:16 -0400 Subject: [PATCH 3/9] update number of props in test --- test/basic.test.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/basic.test.cjs b/test/basic.test.cjs index 6aaa5805..ee816316 100644 --- a/test/basic.test.cjs +++ b/test/basic.test.cjs @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs') const OPtokens = require('../open-props.tokens.json') test('Should have an all included import', t => { - t.is(Object.keys(OpenProps).length, 1612) + t.is(Object.keys(OpenProps).length, 1620) }) test('Import should have animations', async t => { From cf60881e025f554b03878f75e346da9c51005d62 Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:09:19 -0400 Subject: [PATCH 4/9] add supports stylesheet to index and animations, allow animation props to reuse previously named animations --- build/props.js | 1 + build/to-stylesheet.js | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/build/props.js b/build/props.js index fc8a4f06..4505b90c 100644 --- a/build/props.js +++ b/build/props.js @@ -145,6 +145,7 @@ buildPropsStylesheet({ // gen index.css const entry = fs.createWriteStream(`../src/${pfx}index.css`) entry.write(`@import 'props.media.css'; +@import 'props.supports.css'; `) Object.keys(mainbundle).forEach(filename => { entry.write(`@import '${filename}';\n`) diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js index 2d0afd51..ab850418 100644 --- a/build/to-stylesheet.js +++ b/build/to-stylesheet.js @@ -9,6 +9,10 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => { file.write(`@import 'props.media.css';\n\n`) } + if(filename.includes('animations')) { + file.write(`@import 'props.supports.css';\n\n`) + } + if (filename.includes('shadows')) { let dark_propsMeta = `` let dark_props = Object.entries(props) @@ -40,7 +44,9 @@ ${dark_propsMeta} if (prop.includes('animation')) { let keyframes = props[`${prop}-@`] - appendedMeta += keyframes + if(keyframes != undefined) { + appendedMeta += keyframes + } } if (prefix && prefix !== "''") { From 20200100d2a9b4743117831c74822b5aa24b7d1c Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:10:08 -0400 Subject: [PATCH 5/9] checkin updated index.css --- src/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.css b/src/index.css index 7e7683ff..b41115df 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,5 @@ @import 'props.media.css'; +@import 'props.supports.css'; @import 'props.fonts.css'; @import 'props.sizes.css'; @import 'props.easing.css'; From 394d6d81944aa598bb95adbd9ff5ae55cf985cb5 Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:10:19 -0400 Subject: [PATCH 6/9] update prop names in docsite --- docsite/index.css | 4 ++-- docsite/index.html | 26 +++++++++++++------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docsite/index.css b/docsite/index.css index c6f8bf60..e22ca418 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -1386,10 +1386,10 @@ input[type="range"] { } .shake-fade-combo { - --animation-slide-left-fade-in-shake-y: + --animation-slide-start-fade-in-shake-y: var(--animation-shake-y), var(--animation-fade-in), - var(--animation-slide-in-left); + var(--animation-slide-in-start); } .push-out-combo { diff --git a/docsite/index.html b/docsite/index.html index 88418d6a..2592d624 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2443,8 +2443,8 @@
The Props
--animation-fade-{in,out}-bloom --animation-shake-{x,y} - --animation-slide-out-{up,down,left,right} - --animation-slide-in-{up,down,left,right} + --animation-slide-out-{up,down,start,end} + --animation-slide-in-{up,down,start,end} --animation-spin --animation-ping @@ -2463,7 +2463,7 @@
Keyframe Effect Examples
to { opacity: 1 } } - @keyframes op-slide-out-right { + @keyframes op-slide-out-end { to { transform: translateX(100%) } } @@ -2584,8 +2584,8 @@
Slide Out Down
-
-
Slide Out Right
+
+
Slide Out End
-
-
Slide Out Left
+
+
Slide Out Start
-
-
Slide In Right
+
+
Slide In End
-
-
Slide In Left
+
+
Slide In Start
From c81c420f65144271a47aeeae1c0084e212eac25c Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:13:29 -0400 Subject: [PATCH 7/9] stylesheet formatting --- build/to-stylesheet.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js index ab850418..f5c0067b 100644 --- a/build/to-stylesheet.js +++ b/build/to-stylesheet.js @@ -5,11 +5,10 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => { let appendedMeta = '' - if (filename.includes('shadows') || filename.includes('animations')) { + if (filename.includes('shadows')) { file.write(`@import 'props.media.css';\n\n`) - } - - if(filename.includes('animations')) { + } else if(filename.includes('animations')) { + file.write(`@import 'props.media.css';\n`) file.write(`@import 'props.supports.css';\n\n`) } From f737f66ed5a72aa006a5ba2048ecb404e884b4f1 Mon Sep 17 00:00:00 2001 From: Ryan Mitchell Date: Fri, 29 Sep 2023 15:14:04 -0400 Subject: [PATCH 8/9] stylesheet formatting --- src/props.animations.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/props.animations.css b/src/props.animations.css index 3735821b..9141e743 100644 --- a/src/props.animations.css +++ b/src/props.animations.css @@ -1,5 +1,4 @@ @import 'props.media.css'; - @import 'props.supports.css'; :where(html) { From 8d84136862991ee7b68b320aabe2027b68321760 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Fri, 29 Sep 2023 16:07:04 -0700 Subject: [PATCH 9/9] update tests --- test/basic.test.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/basic.test.cjs b/test/basic.test.cjs index 917fe983..3586eca5 100644 --- a/test/basic.test.cjs +++ b/test/basic.test.cjs @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs') const OPtokens = require('../open-props.tokens.json') test('Should have an all included import', t => { - t.is(Object.keys(OpenProps).length, 1642) + t.is(Object.keys(OpenProps).length, 1650) }) test('Import should have animations', async t => {