added mx, my dynamic classes

Author: Patrick Tannoury

README.MD

@@ -9,6 +9,19 @@ bg-[#xxx]: Set dynamic background colors.
 text-[#xxx]: Adjust text colors dynamically.
 And more!
 
+## Parent and Element Selectors
+Parent selectors can be written by utilising a parenthesis, followed by the requirement
+
+Example 1:
+(.group:hover):color-[#131313]
+
+Example 2:
+(&.confirmed):color-[green]
+
+Example 3:
+
+(.confirmed:hover_>):cursor-pointer
+
 ## Input File Integration
 Unlike many other CSS frameworks, SwiftCSS offers a straightforward solution for incorporating input files. Input files are appended on top of the output file generated by the CLI, making it easy to manage and include custom styles and configurations.
 

dist/src/cli/parsers/dynamicParser.js

@@ -99,6 +99,8 @@ exports.dynamicRegistry = {
     'mr': { name: "margin-right", attribute: 'custom' },
     'mb': { name: "margin-bottom", attribute: 'custom' },
     'ml': { name: "margin-left", attribute: 'custom' },
+    'mx': { name: ["margin-left", "margin-right"], attribute: 'custom' },
+    'my': { name: ["margin-top", "margin-bottom"], attribute: 'custom' },
     'pt': { name: "padding-top", attribute: 'custom' },
     'pr': { name: "padding-right", attribute: 'custom' },
     'pb': { name: "padding-bottom", attribute: 'custom' },

output.css

@@ -308,9 +308,16 @@ light.light, body.light {
 	[style-ld="nth-child-[3n]:fw-500 test"]:nth-child(3n){
 		font-weight: 500;
 	}
-	[style-ld="nth-child-[2n]:color-[#565656] test"]:nth-child(2n){
+	[style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test"]:nth-child(2n){
 		color: #565656;
 	}
+	[style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test"]:nth-child(n+2){
+		color: #565656;
+	}
+	[style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test"]:nth-child(2n){
+		margin-left: 5vw;
+margin-right: 5vw;
+	}
 	.confirmed:hover > [style-ld="(.confirmed:hover_>):cursor-pointer"]{
 		cursor: pointer;
 	}

src/cli/parsers/dynamicParser.ts

@@ -110,6 +110,8 @@ export const dynamicRegistry: Dynamicregistry = {
     'mr': {name: "margin-right", attribute: 'custom'},
     'mb': {name: "margin-bottom", attribute: 'custom'},
     'ml': {name: "margin-left", attribute: 'custom'},
+    'mx': {name: ["margin-left", "margin-right"], attribute: 'custom'},
+    'my': {name: ["margin-top",  "margin-bottom"], attribute: 'custom'},
     'pt': {name: "padding-top", attribute: 'custom'},
     'pr': {name: "padding-right", attribute: 'custom'},
     'pb': {name: "padding-bottom", attribute: 'custom'},

test/animation.html

@@ -16,11 +16,19 @@
     </h1>
     <ul>
       <li style-ld="nth-child-[3n]:fw-500 test">Test</li>
-      <li style-ld="nth-child-[2n]:color-[#565656] test">Test</li>
-      <li style-ld="nth-child-[2n]:color-[#565656] test">Test</li>
-      <li style-ld="nth-child-[2n]:color-[#565656] test">Test</li>
-      <li style-ld="nth-child-[2n]:color-[#565656] test">Test</li>
-      <li style-ld="nth-child-[2n]:color-[#565656] test">Test</li>
+      <li style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[2n]:color-[#565656] not-[:first-child]:mx-[5vw] test">Test</li>
+    </ul>
+    <ul>
+      <li style-ld="nth-child-[3n]:fw-500 test">Test</li>
+      <li style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test">Test</li>
+      <li style-ld="nth-child-[n+2]:color-[#565656] nth-child-[2n]:mx-[5vw] test">Test</li>
     </ul>
     <div 
       class="lds-ellipsis brd-color-[#f4f4f4] hover:bg-[#fff] hover:cursor-pointer"