added px & py among dynamic classes (test)

Author: Patrick Tannoury

README.MD

@@ -1,14 +1,15 @@
 # SwiftCSS
 SwiftCSS is a CSS utility package that simplifies and streamlines the styling of your web projects using predefined classes. Similar to Tailwind CSS, it offers a wide range of predefined classes that allow you to style your web elements effortlessly. Additionally, SwiftCSS supports dynamic classes and pseudo-classes, making it a powerful tool for creating modern web interfaces.
 
-Dynamic Attributes
+## Dynamic Attributes
 SwiftCSS provides dynamic classes that can be customized using square brackets, allowing you to apply dynamic values to your styles. Some of the available dynamic attributes include:
 
 color-[#xxx]: Customize colors dynamically.
 bg-[#xxx]: Set dynamic background colors.
 text-[#xxx]: Adjust text colors dynamically.
 And more!
-Input File Integration
+
+## 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.
 
 ## Commands
@@ -53,7 +54,7 @@ Here's an example of the configuration file (swiftcss.config.js):
 module.exports = {
     fileExtensions: ["html", "js", "jsx", "ts", "tsx"],
     directories: ["./src"],
-    input: "", // Specify an input file to be appended into the output file
+    input: [""], // Specify an input file (or multiple) to be appended into the output file
     output: "./output.css",
     screens: {
         sd: { max: 600 },

dist/src/cli/parsers/classParser.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._PSEUDO_CLASSES = exports.PSEUDO_ELEMENTS = void 0;
 const dynamicParser_1 = __importDefault(require("./dynamicParser"));
 function classParser(className, baseStyle) {
-    const finalCSS = new Set();
+    const finalCSS = new Set(); // Also never read?
     const specialChars = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g;
     const dynamicPseudo = /^(.*?)-\[(.*?)\]$/;
-    var cssString = null;
+    var cssString = null; // Is this needed? It is never used
     /******************* Pseudo Classes *******************/
     if (className.includes(':') && !className.includes('::')) {
         var pseudoClass = className.split(':')[0];

dist/src/cli/parsers/dynamicParser.js

@@ -36,6 +36,15 @@ function dynamicParser(className) {
                     value: value
                 };
             }
+            else if (Array.isArray(name) && attribute === "custom") {
+                const cssString = name.map(property => `${property}: ${value.replaceAll('_', ' ')};`).join('\n');
+                return {
+                    className: escapedClassName,
+                    cssAttribute: cssString,
+                    name: name,
+                    value: value
+                };
+            }
             else {
                 return {
                     className: escapedClassName,
@@ -94,6 +103,8 @@ exports.dynamicRegistry = {
     'pr': { name: "padding-right", attribute: 'custom' },
     'pb': { name: "padding-bottom", attribute: 'custom' },
     'pl': { name: "padding-left", attribute: 'custom' },
+    'px': { name: ["padding-left", "padding-right"], attribute: 'custom' },
+    'py': { name: ["padding-top", "padding-bottom"], attribute: 'custom' },
     'w': { name: 'width', attribute: 'custom' },
     'max-h': { name: 'max-height', attribute: 'custom' },
     'min-h': { name: 'min-height', attribute: 'custom' },
@@ -107,5 +118,6 @@ exports.dynamicRegistry = {
     'grid-rows': { name: 'grid-template-rows', attribute: 'custom' },
     'auto-cols': { name: 'grid-auto-columns', attribute: 'custom' },
     'font': { name: 'font-family', attribute: 'custom' },
-    "transition": { name: "transition", attribute: 'custom' }
+    "transition": { name: "transition", attribute: 'custom' },
+    "decoration": { name: "text-decoration", attribute: 'custom' }
 };

dist/src/style.css

@@ -319639,6 +319639,29 @@
   text-transform: capitalize;
 }
 
+.decoration-underline {
+  text-decoration: underline;
+}
+.decoration-underline-dotted {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+.decoration-overline {
+  text-decoration: overline;
+}
+.decoration-none {
+  text-decoration: none;
+}
+.decoration-style-wavy {
+  text-decoration-style: wavy;
+}
+.decoration-style-solid {
+  text-decoration-style: solid;
+}
+.decoration-style-dotted {
+  text-decoration-style: dotted;
+}
+
 .align-baseline {
   vertical-align: baseline;
 }

src/cli/parsers/classParser.ts

@@ -4,19 +4,19 @@ import dynamicParser from "./dynamicParser";
 interface ClassParser {
     className: string,
     cssAttribute: string | string[],
-    name: string | null,
+    name: string | string[] | null,
     value?: string,
     pseudo: string,
     pseudoSeparator: ':' | '::',
     pseudoSelector?: string | null
 }
 
 export default function classParser(className: string, baseStyle: BaseStyle): ClassParser | null {
-    const finalCSS = new Set();
+    const finalCSS = new Set(); // Also never read?
     const specialChars = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g;
     const dynamicPseudo = /^(.*?)-\[(.*?)\]$/;
 
-    var cssString: null | string = null;
+    var cssString: null | string = null; // Is this needed? It is never used
     /******************* Pseudo Classes *******************/
     if(className.includes(':') && !className.includes('::')){ 
         var pseudoClass = className.split(':')[0]

src/cli/parsers/dynamicParser.ts

@@ -40,6 +40,14 @@ export default function dynamicParser(className: string){
                     name: name,
                     value: value
                 }
+            } else if (Array.isArray(name) && attribute === "custom") {
+                const cssString = name.map(property => `${property}: ${value.replaceAll('_', ' ')};`).join('\n');
+                return {
+                    className: escapedClassName,
+                    cssAttribute: cssString, 
+                    name: name,
+                    value: value
+                }
             } else {
                 return {
                     className: escapedClassName,
@@ -71,7 +79,7 @@ function getValue(value: string, config: Config){
 
 interface Dynamicregistry {
     [key: string]: {
-        name: string
+        name: string | string[]
         attribute: 'color' | 'url' | 'custom' | string[] | null
     }
 }
@@ -106,6 +114,8 @@ export const dynamicRegistry: Dynamicregistry = {
     'pr': {name: "padding-right", attribute: 'custom'},
     'pb': {name: "padding-bottom", attribute: 'custom'},
     'pl': {name: "padding-left", attribute: 'custom'},
+    'px': {name: ["padding-left", "padding-right"], attribute: 'custom'},
+    'py': {name: ["padding-top", "padding-bottom"], attribute: 'custom'},
     'w': {name: 'width', attribute: 'custom'},
     'max-h': {name: 'max-height', attribute: 'custom'},
     'min-h': {name: 'min-height', attribute: 'custom'},