test: transform

ifiokjr · May 30, 2023 · 23953ae · 23953ae
1 parent 844974f
commit 23953ae
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 12 deletions.
diff --git a/crates/skribble_core/src/lib.rs b/crates/skribble_core/src/lib.rs
@@ -8,8 +8,6 @@ pub use config::*;
 pub use constants::*;
 pub use css::*;
 pub use error::*;
-pub use indexmap::indexmap as map;
-pub use indexmap::indexset as set;
 pub use macros::*;
 pub use plugin::*;
 pub use runner::*;

diff --git a/crates/skribble_preset/src/__tests.rs b/crates/skribble_preset/src/__tests.rs
@@ -27,9 +27,10 @@ fn default_can_be_added_to_runner() -> AnyEmptyResult {
 #[case("chained-modifiers", &["rtl:required:hover:bg:$primary"])]
 #[case("font-size", &["font-size:$xs", "font-size:$8xl"])]
 #[case("important", &["(important):font-size:$xs", "(important):font-size:$8xl"])]
-#[case("darken", &["(darken==005):bg:red100", "(darken=5%):bg:pink900", "(darken==050):bg:primary", "(darken=50%):bg:secondary"])]
-#[case("lighten", &["(lighten==005):bg:red100", "(lighten=5%):bg:pink900", "(lighten==050):bg:primary", "(lighten=50%):bg:secondary"])]
-#[case("alpha", &["(alpha==005):bg:red100", "(alpha=0.05):bg:pink900", "(alpha==050):bg:primary", "(alpha=0.5):bg:secondary"])]
+#[case("darken", &["(darken==005):bg:$red100", "(darken=5%):bg:$pink900", "(darken==050):bg:$primary", "(darken=50%):bg:$secondary"])]
+#[case("lighten", &["(lighten==005):bg:$red100", "(lighten=5%):bg:$pink900", "(lighten==050):bg:$primary", "(lighten=50%):bg:$secondary"])]
+#[case("alpha", &["(alpha==005):bg:$red100", "(alpha=0.05):bg:$pink900", "(alpha==050):bg:$primary", "(alpha=0.5):bg:$secondary"])]
+#[case("scale", &["scale:$50", "$transform-gpu"])]
 fn css_from_class_names(#[case] id: &str, #[case] names: &[&str]) -> AnyEmptyResult {
  let plugin = PresetPlugin::default();
  let config: StyleConfig = StyleConfig::builder()

diff --git a/crates/skribble_preset/src/data/css_variables.rs b/crates/skribble_preset/src/data/css_variables.rs
@@ -1,5 +1,5 @@
+use indexmap::indexmap;
 use lazy_static::lazy_static;
-use skribble_core::map;
 use skribble_core::CssVariable;
 use skribble_core::Placeholder;
 use skribble_core::PropertySyntaxValue;
@@ -153,12 +153,12 @@ lazy_static! {
  .name("contained-max-width")
  .variable("--cmw")
  .value("inherit")
- .media_queries(map! {
- Placeholder::media_query("sm") => map! { "" => "640px" },
- Placeholder::media_query("md") => map! { "" => "768px" },
- Placeholder::media_query("lg") => map! { "" => "1024px" },
- Placeholder::media_query("xl") => map! { "" => "1280px" },
- Placeholder::media_query("xxl") => map! { "" => "1536px" },
+ .media_queries(indexmap! {
+ Placeholder::media_query("sm") => indexmap! { "" => "640px" },
+ Placeholder::media_query("md") => indexmap! { "" => "768px" },
+ Placeholder::media_query("lg") => indexmap! { "" => "1024px" },
+ Placeholder::media_query("xl") => indexmap! { "" => "1280px" },
+ Placeholder::media_query("xxl") => indexmap! { "" => "1536px" },
  })
  .build(),
  CssVariable::builder()

diff --git a/...s/skribble_preset/src/snapshots/[email protected] b/...s/skribble_preset/src/snapshots/[email protected]
@@ -0,0 +1,76 @@
+---
+source: crates/skribble_preset/src/__tests.rs
+expression: classes.to_skribble_css(runner_config)?
+---
+/* Generated by Skribble */
+@charset "utf-8";
+@layer base, alias, default, priority-class;
+@property --sk-translate-x {
+ syntax: "<length-percentage>";
+ inherits: true;
+ initial-value: 0;
+}
+@property --sk-translate-y {
+ syntax: "<length-percentage>";
+ inherits: true;
+ initial-value: 0;
+}
+@property --sk-rotate {
+ syntax: "<angle>";
+ inherits: true;
+ initial-value: 0;
+}
+@property --sk-skew-x {
+ syntax: "<angle>";
+ inherits: true;
+ initial-value: 0;
+}
+@property --sk-skew-y {
+ syntax: "<angle>";
+ inherits: true;
+ initial-value: 0;
+}
+@property --sk-scale-x {
+ syntax: "<number> | <percentage>";
+ inherits: true;
+ initial-value: 1;
+}
+@property --sk-scale-y {
+ syntax: "<number> | <percentage>";
+ inherits: true;
+ initial-value: 1;
+}
+@layer base {
+ :root {
+ --sk-translate-x: 0;
+ --sk-translate-y: 0;
+ --sk-rotate: 0;
+ --sk-skew-x: 0;
+ --sk-skew-y: 0;
+ --sk-scale-x: 1;
+ --sk-scale-y: 1;
+ }
+ .scale\:\$50 {
+ transform: translate(var(--sk-translate-x), var(--sk-translate-y)) rotate(var(--sk-rotate)) skewX(var(--sk-skew-x)) skewY(var(--sk-skew-y)) scaleX(var(--sk-scale-x)) scaleY(var(--sk-scale-y));
+ }
+}
+@layer default {
+ :root {
+ --sk-translate-x: 0;
+ --sk-translate-y: 0;
+ --sk-rotate: 0;
+ --sk-skew-x: 0;
+ --sk-skew-y: 0;
+ --sk-scale-x: 1;
+ --sk-scale-y: 1;
+ }
+ .\$transform-gpu {
+ --sk-invalid-css-variable: --sk-invalid-css-variable;
+ transform: translate3d(var(--sk-translate-x), var(--sk-translate-y), 0) rotate(var(--sk-rotate) skewX(var(--sk-skew-x)) skewY(var(--sk-skew-y)) scaleX(var(--sk-scale-x)) scaleY(var(--sk-scale-y));
+ }
+ .scale\:\$50 {
+ --sk-scale-x: .5;
+ --sk-scale-y: .5;
+ }
+}
+