[CF]: ✨ Fix Syntax, Setup Pseudo Class Modifiers

README.md

@@ -39,6 +39,9 @@ or by creating a file manually:
       "sm": { "minWidth": "576px" },
       "md": { "minWidth": "768px", "maxWidth": "992px" },
       "lg": { "minWidth": "992px" }
+    },
+    "pseudoClasses": {
+      "hov": ":hover",
     }
   },
   "designTokens": ["./atomic-design-tokens.yml"],

distill/src/init.rs

@@ -32,7 +32,7 @@ colors:
 
 const EXAMPLE_TEMPLATE_SRC: &str = r###"# Background Colors
 bg-[$colors.key]:
-  background-colors: var(--$colors.key)
+  background-color: var(--$colors.key)
 "###;
 
 pub fn initialize_moonshinerc(path: &Path) {

distill/src/template_syntax.rs

@@ -15,15 +15,17 @@ use super::transformation_syntax::{
 pub struct Options {
     pub non_atom_identifier: String,
     pub atom_style: AtomStyle,
+    pub root_variable_prefix: String,
     pub breakpoints: IndexMap<String, Breakpoint>,
-    pub breakpoint_modifier_style: BreakpointModifierStyle,
+    pub breakpoint_modifier_style: ModifierStyle,
     pub breakpoint_modifier_seperator: String,
-    pub root_variable_prefix: String,
+    pub pseudo_class_modifier_style: ModifierStyle,
+    pub pseudo_class_modifier_seperator: String,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
-pub enum BreakpointModifierStyle {
+pub enum ModifierStyle {
     Prefix,
     Suffix,
 }
@@ -41,10 +43,12 @@ impl Default for Options {
         Self {
             non_atom_identifier: "__non_atom__".to_string(),
             atom_style: AtomStyle::ClassAttribute,
+            root_variable_prefix: "_".to_string(),
             breakpoints: IndexMap::default(),
-            breakpoint_modifier_style: BreakpointModifierStyle::Prefix,
+            breakpoint_modifier_style: ModifierStyle::Prefix,
             breakpoint_modifier_seperator: ":".to_string(),
-            root_variable_prefix: "_".to_string(),
+            pseudo_class_modifier_style: ModifierStyle::Prefix,
+            pseudo_class_modifier_seperator: ":".to_string(),
         }
     }
 }
@@ -67,12 +71,14 @@ pub type SugarBlock = IndexMap<CSSProperty, CSSValue>;
 #[derive(Debug)]
 pub struct TemplateOptions {
     include_breakpoints: bool,
+    _include_pseudo_classes: bool, // This isn't being used currently
 }
 
 impl Default for TemplateOptions {
     fn default() -> Self {
         Self {
             include_breakpoints: true,
+            _include_pseudo_classes: true,
         }
     }
 }
@@ -196,10 +202,10 @@ fn get_breakpoints(affected_ids: Vec<String>, options: &Options) -> Vec<Transfor
         let sep = options.breakpoint_modifier_seperator.to_string();
 
         match options.breakpoint_modifier_style {
-            BreakpointModifierStyle::Prefix => {
+            ModifierStyle::Prefix => {
                 selector = format!("{}{}{}", name, sep, selector);
             }
-            BreakpointModifierStyle::Suffix => {
+            ModifierStyle::Suffix => {
                 selector = format!("{}{}{}", selector, sep, name);
             }
         }

examples/tachyons/.moonshinerc

@@ -1,6 +1,6 @@
 {
   "options": {
-    "atomStyle": "dataAttribute",
+    "atomStyle": "classAttribute",
     "nonAtomIdentfier": "__non_atom__",
     "breakpointModifierStyle": "suffix",
     "breakpointModifierSeperator": "-",
@@ -15,6 +15,11 @@
       "lg": {
         "minWidth": "992px"
       }
+    },
+    "pseudoClasses": {
+      "hov": ":hover",
+      "first": ":first-child",
+      "last": ":last-child"
     }
   },
   "designTokens": [

examples/tachyons/templates/tachyons-clears.yml

@@ -5,11 +5,11 @@
 # Ref: http://nicolasgallagher.com/micro-clearfix-hack/
 
 cf:before:
-  content: " "
+  content: '" "'
   display: table
 
 cf:after:
-  content: " "
+  content: '" "'
   display: table
 
 cf:after: