cssx-framework - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

package.json

 {
   "name": "cssx-framework",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "A CSS driven web framework that compiles semi-standard CSS into HTML content + styles at runtime",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -75,3 +75,3 @@ # Overview
 
-```css
+```scss
 @mixin mixinName($param1: defaultValue1, $param2: defaultValue2) {
@@ -88,3 +88,3 @@ ...
 
-```css
+```scss
 @mixin standardButton($backgroundColor: lightgreen, $hoverColor: lightblue, $class: example, $borderRadius: 6px, $type: button) {
@@ -110,3 +110,3 @@ button {
 
-```css
+```scss
 @mixin standardButton($backgroundColor: lightgreen, $hoverColor: lightblue, $class: example, $borderRadius: 6px, $type: button) {
@@ -150,13 +150,14 @@ background-color: $backgroundColor;
 
-Defining functions across multiple lines is also possible, however to maintain similarity with standard CSS formatting, the event attribute needs to be defined for every single line. This will then get transpiled into a single line concatenated string on the event attribute.
+Defining functions across multiple lines is also possible by defining the event attribute values on lines subsequent to the event attribute definition, as outlined in the snippet below. This will then get transpiled into a single line concatenated string on the event attribute.
 
 > Note: When doing multiline functions, don't forget your semi-colons to break separate functions up - CSSX just joins the strings with spaces and isn't smart enough to know where semi-colons should go!
 
-```css
+```scss
 button.anotherButton {
-    --onclick: "console.log('test');";
-    --onclick: "setInterval(() => {";
-    --onclick: "document.getElementById('picture-gallery').scrollBy({left: -25, behavior: 'smooth'})";
-    --onclick: "}, 100)";
-    --text: "Click me again";
+    --onclick:
+        "console.log('test');"
+        "setInterval(() => {"
+        "document.getElementById('picture-gallery').scrollBy({left: -25, behavior: 'smooth'})"
+        "}, 100)";
+    --text: "Click me again"
 }
@@ -179,6 +180,7 @@ ```
 @mixin testFunction() {
-    --onclick: "console.log('test');";
-    --onclick: "setInterval(() => {";
-    --onclick: "document.getElementById('picture-gallery').scrollBy({left: -25, behavior: 'smooth'})";
-    --onclick: "}, 100)";
+    --onclick:
+        "console.log('test');"
+        "setInterval(() => {"
+        "document.getElementById('picture-gallery').scrollBy({left: -25, behavior: 'smooth'})"
+        "}, 100)";
 }
@@ -185,0 +187,0 @@

No alert changes

Improved metrics

Number of lines in readme file

239

0.84%

Worsened metrics

Total package byte prevSize

28199

-0.09%

No dependency changes