@guebbit/css-toolkit 1.1.2 → 1.2.0

package/src/mixins/_create-helper-margin.scss

@@ -1,39 +1,39 @@
-/**
- *
- * t - applies the spacing for margin-top
- * b - applies the spacing for margin-bottom
- * l - applies the spacing for margin-left
- * r - applies the spacing for margin-right
- * x - applies the spacing for both *-left and *-right
- * y - applies the spacing for both *-top and *-bottom
- * a - applies the spacing for the property in all directions
- *
- * @param {Array<name,value>[]} measure-list - postfix name and value
- */
-@mixin create-helper-margin($measure-list: (), $important: false, $prefix: "") {
-  @each $name, $val in $measure-list {
-    .#{$prefix}mt-#{$name} {
-      margin-top: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}mb-#{$name} {
-      margin-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}ml-#{$name} {
-      margin-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}mr-#{$name} {
-      margin-right: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}mx-#{$name} {
-      margin-right: #{$val} #{if($important == true, "!important", "")};
-      margin-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}my-#{$name} {
-      margin-top: #{$val} #{if($important == true, "!important", "")};
-      margin-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}ma-#{$name} {
-      margin: #{$val} #{if($important == true, "!important", "")};
-    }
-  }
+/**
+ *
+ * t - applies the spacing for margin-top
+ * b - applies the spacing for margin-bottom
+ * l - applies the spacing for margin-left
+ * r - applies the spacing for margin-right
+ * x - applies the spacing for both *-left and *-right
+ * y - applies the spacing for both *-top and *-bottom
+ * a - applies the spacing for the property in all directions
+ *
+ * @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-helper-margin($measure-list: (), $important: false, $prefix: "") {
+  @each $name, $val in $measure-list {
+    .#{$prefix}mt-#{$name} {
+      margin-top: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}mb-#{$name} {
+      margin-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}ml-#{$name} {
+      margin-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}mr-#{$name} {
+      margin-right: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}mx-#{$name} {
+      margin-right: #{$val} #{if($important == true, "!important", "")};
+      margin-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}my-#{$name} {
+      margin-top: #{$val} #{if($important == true, "!important", "")};
+      margin-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}ma-#{$name} {
+      margin: #{$val} #{if($important == true, "!important", "")};
+    }
+  }
 }

package/src/mixins/_create-helper-padding.scss

@@ -1,40 +1,40 @@
-/**
- *
- * t - applies the spacing for padding-top
- * b - applies the spacing for padding-bottom
- * l - applies the spacing for padding-left
- * r - applies the spacing for padding-right
- * x - applies the spacing for both *-left and *-right
- * y - applies the spacing for both *-top and *-bottom
- * a - applies the spacing for the property in all directions
-
- * @param {Array<name,value>[]} measure-list - postfix name and value
- */
-@mixin create-helper-padding($measure-list: (), $important: false, $prefix: "") {
-
-  @each $name, $val in $measure-list {
-    .#{$prefix}pt-#{$name} {
-      padding-top: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pb-#{$name} {
-      padding-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pl-#{$name} {
-      padding-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pr-#{$name} {
-      padding-right: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}px-#{$name} {
-      padding-right: #{$val} #{if($important == true, "!important", "")};
-      padding-left: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}py-#{$name} {
-      padding-top: #{$val} #{if($important == true, "!important", "")};
-      padding-bottom: #{$val} #{if($important == true, "!important", "")};
-    }
-    .#{$prefix}pa-#{$name} {
-      padding: #{$val} #{if($important == true, "!important", "")};
-    }
-  }
-}
+/**
+ *
+ * t - applies the spacing for padding-top
+ * b - applies the spacing for padding-bottom
+ * l - applies the spacing for padding-left
+ * r - applies the spacing for padding-right
+ * x - applies the spacing for both *-left and *-right
+ * y - applies the spacing for both *-top and *-bottom
+ * a - applies the spacing for the property in all directions
+
+ * @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-helper-padding($measure-list: (), $important: false, $prefix: "") {
+
+  @each $name, $val in $measure-list {
+    .#{$prefix}pt-#{$name} {
+      padding-top: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pb-#{$name} {
+      padding-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pl-#{$name} {
+      padding-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pr-#{$name} {
+      padding-right: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}px-#{$name} {
+      padding-right: #{$val} #{if($important == true, "!important", "")};
+      padding-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}py-#{$name} {
+      padding-top: #{$val} #{if($important == true, "!important", "")};
+      padding-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pa-#{$name} {
+      padding: #{$val} #{if($important == true, "!important", "")};
+    }
+  }
+}

package/src/mixins/_create-instructions.scss

@@ -1,11 +1,11 @@
-/**
-  CSS single instructions generator
-  @param {Array<name,value>[]} measure-list - postfix name and value
- */
-@mixin create-instructions($instruction, $measure-list: (), $important: false, $prefix: "", $delimiter: "-") {
-  @each $name, $val in $measure-list {
-    .#{$prefix}#{$instruction}#{$delimiter}#{$name} {
-      #{$instruction}: #{$val} #{if($important == true, "!important", "")}
-    }
-  }
-}
+/**
+  CSS single instructions generator
+  @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-instructions($instruction, $measure-list: (), $important: false, $prefix: "", $delimiter: "-") {
+  @each $name, $val in $measure-list {
+    .#{$prefix}#{$instruction}#{$delimiter}#{$name} {
+      #{$instruction}: #{$val} #{if($important == true, "!important", "")}
+    }
+  }
+}

package/test/compile.test.js

@@ -1,103 +1,106 @@
-import { describe, it } from "mocha";
-import { expect } from "chai";
-import fs from "fs";
-import util from "util";
-import * as sass from "sass";
-import path from "path";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-let cssCompiled;
-
-function sassCompiler(){
-    return util.promisify(sass.render)({
-            includePaths: ['./scss'],
-            file: path.join(__dirname, './test.scss'),
-            // outputStyle: 'compressed'
-        })
-        .then(result => result?.css?.toString());
-}
-
-describe("COMPILE", function() {
-    // to remove timeout error
-    this.timeout(10000);
-
-    it('Should compile', async function() {
-        cssCompiled = await sassCompiler();
-        // Not necessary, but let's compile the file
-        fs.writeFile(path.join(__dirname, 'test.css'), cssCompiled, () => {});
-    });
-
-    it('Check some rules', function() {
-        // --
-        expect(cssCompiled).to.contain('.blue-400-text {');
-        expect(cssCompiled).to.contain('color: #3d8bfd !important;');
-        expect(cssCompiled).to.contain('.blue-400-bg {');
-        expect(cssCompiled).to.contain('background: #3d8bfd !important;');
-        // --
-        expect(cssCompiled).to.contain('--blue-400: 61 139 253;');
-        expect(cssCompiled).to.contain('--manga-red-500: 212 24 22;');
-        expect(cssCompiled).to.contain('--advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);');
-        expect(cssCompiled).to.contain('.mt-auto {');
-        expect(cssCompiled).to.contain('margin-top: auto;');
-        expect(cssCompiled).to.contain('.my-48 {');
-        expect(cssCompiled).to.contain('margin-top: 48px;');
-        expect(cssCompiled).to.contain('margin-bottom: 48px;');
-        expect(cssCompiled).to.contain('.width-100 {');
-        expect(cssCompiled).to.contain('width: 100% !important;');
-        expect(cssCompiled).to.contain('.flex-gap-24 {');
-        expect(cssCompiled).to.contain('gap: 24px !important;');
-        // -
-        expect(cssCompiled).to.contain('.aspect-ratio-1-1::before {');
-        expect(cssCompiled).to.contain('padding-top: 100%;');
-        expect(cssCompiled).to.contain('.aspect-ratio-16-9::before {');
-        expect(cssCompiled).to.contain('padding-top: 56%;');
-        // -
-        expect(cssCompiled).to.contain('@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {');
-        expect(cssCompiled).to.contain('@supports (-ms-ime-align: auto) {');
-        expect(cssCompiled).to.contain('@supports (-moz-appearance: none) {');
-        // --
-        expect(cssCompiled).to.contain('--color-opaque-1: #111111;');
-        expect(cssCompiled).to.contain('--color-opaque-2: #6f6f6f;');
-        // --
-        expect(cssCompiled).to.contain('--color-tint-1: #595959;');
-        expect(cssCompiled).to.contain('--color-tint-2: #e6e6e6;');
-        // --
-        expect(cssCompiled).to.contain('--color-shade-1: #1a1a1a;');
-        expect(cssCompiled).to.contain('--color-shade-2: #a6a6a6;');
-        // --
-        expect(cssCompiled).to.contain('--color-shift-1: #1a1a1a;');
-        expect(cssCompiled).to.contain('--color-shift-2: #a6a6a6;');
-        // --
-        expect(cssCompiled).to.contain('--color-contrast-1: #fff;');
-        expect(cssCompiled).to.contain('--color-contrast-2: #000;');
-        // --
-        expect(cssCompiled).to.contain('--color-brightness-1: #fff;');
-        expect(cssCompiled).to.contain('--color-brightness-2: #000;');
-        // --
-        expect(cssCompiled).to.contain('--extract-colors-1: 255 255 255;');
-        expect(cssCompiled).to.contain('--extract-colors-2: 34 34 34;');
-        expect(cssCompiled).to.contain('--extract-colors-3: 221 221 221;');
-        expect(cssCompiled).to.contain('--extract-colors-4: 34, 34, 34;');
-        expect(cssCompiled).to.contain('--extract-colors-5: 221, 221, 221;');
-        expect(cssCompiled).to.contain('--extract-colors-6: 0 255 0;');
-        expect(cssCompiled).to.contain('--extract-colors-7: 0 255 0 / 0.5;');
-        expect(cssCompiled).to.contain('--extract-colors-8: 0, 255, 0;');
-        expect(cssCompiled).to.contain('--extract-colors-9: 0, 255, 0, 0.5;');
-        expect(cssCompiled).to.contain('--extract-colors-10: 0 255 0;');
-        expect(cssCompiled).to.contain('--extract-colors-11: 0 255 0 / 0.5;');
-        expect(cssCompiled).to.contain('--extract-colors-12: 0, 255, 0;');
-        expect(cssCompiled).to.contain('--extract-colors-13: 0, 255, 0, 0.5;');
-        // --
-        expect(cssCompiled).to.contain('--no-null-1: transparent;');
-        expect(cssCompiled).to.contain('--no-null-2: blue;');
-        // --
-        expect(cssCompiled).to.contain('--no-trasparent-1: inherit;');
-        expect(cssCompiled).to.contain('--no-trasparent-2: inherit;');
-        expect(cssCompiled).to.contain('--no-trasparent-3: #123456;');
-        // --
-        expect(cssCompiled).to.contain('--map-deep-get: 10px;');
-    });
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import fs from "fs";
+import util from "util";
+import * as sass from "sass";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+let cssCompiled;
+
+function sassCompiler(){
+    return util.promisify(sass.render)({
+            includePaths: ['./scss'],
+            file: path.join(__dirname, './test.scss'),
+            // outputStyle: 'compressed'
+        })
+        .then(result => result?.css?.toString());
+}
+
+describe("COMPILE", function() {
+    // to remove timeout error
+    this.timeout(10000);
+
+    it('Should compile', async function() {
+        cssCompiled = await sassCompiler();
+        // Not necessary, but let's compile the file
+        fs.writeFile(path.join(__dirname, 'test.css'), cssCompiled, () => {});
+    });
+
+    it('Check some rules', function() {
+        // --
+        expect(cssCompiled).to.contain('.blue-400-text {');
+        expect(cssCompiled).to.contain('color: rgb(61.4, 139, 253.4) !important;');
+        expect(cssCompiled).to.contain('.blue-400-bg {');
+        expect(cssCompiled).to.contain('background: rgb(61.4, 139, 253.4) !important;');
+        // --
+        expect(cssCompiled).to.contain('--blue-400: 61 139 253;');
+        expect(cssCompiled).to.contain('--manga-red-500: 212 24 22;');
+        expect(cssCompiled).to.contain('--advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);');
+        expect(cssCompiled).to.contain('.mt-auto {');
+        expect(cssCompiled).to.contain('margin-top: auto;');
+        expect(cssCompiled).to.contain('.my-48 {');
+        expect(cssCompiled).to.contain('margin-top: 48px;');
+        expect(cssCompiled).to.contain('margin-bottom: 48px;');
+        expect(cssCompiled).to.contain('.width-100 {');
+        expect(cssCompiled).to.contain('width: 100% !important;');
+        expect(cssCompiled).to.contain('.flex-gap-24 {');
+        expect(cssCompiled).to.contain('gap: 24px !important;');
+        // -
+        expect(cssCompiled).to.contain('.aspect-ratio-1-1::before {');
+        expect(cssCompiled).to.contain('padding-top: 100%;');
+        expect(cssCompiled).to.contain('.aspect-ratio-16-9::before {');
+        expect(cssCompiled).to.contain('padding-top: 56%;');
+        // -
+        expect(cssCompiled).to.contain('@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {');
+        expect(cssCompiled).to.contain('@supports (-ms-ime-align: auto) {');
+        expect(cssCompiled).to.contain('@supports (-moz-appearance: none) {');
+        // --
+        expect(cssCompiled).to.contain('--color-opaque-1: rgba(33.0810810811, 33.0810810811, 33.0810810811, 0.84)');
+        expect(cssCompiled).to.contain('--color-opaque-2: rgb(110.5, 110.5, 110.5)');
+        expect(cssCompiled).to.contain('--color-opaque-3: #dddddd;');
+        // --
+        expect(cssCompiled).to.contain('--color-tint-1: rgb(89.25, 89.25, 89.25);');
+        expect(cssCompiled).to.contain('--color-tint-2: rgb(229.5, 229.5, 229.5);');
+        // --
+        expect(cssCompiled).to.contain('--color-shade-1: rgb(25.5, 25.5, 25.5);');
+        expect(cssCompiled).to.contain('--color-shade-2: rgb(165.75, 165.75, 165.75);');
+        // --
+        expect(cssCompiled).to.contain('--color-shift-1: rgb(25.5, 25.5, 25.5);');
+        expect(cssCompiled).to.contain('--color-shift-2: rgb(165.75, 165.75, 165.75);');
+        expect(cssCompiled).to.contain('--color-shift-3: rgb(89.25, 89.25, 89.25);');
+        expect(cssCompiled).to.contain('--color-shift-4: rgb(229.5, 229.5, 229.5);');
+        // --
+        expect(cssCompiled).to.contain('--color-contrast-1: #fff;');
+        expect(cssCompiled).to.contain('--color-contrast-2: #000;');
+        // --
+        expect(cssCompiled).to.contain('--color-brightness-1: #fff;');
+        expect(cssCompiled).to.contain('--color-brightness-2: #000;');
+        // --
+        expect(cssCompiled).to.contain('--extract-colors-1: 255 255 255;');
+        expect(cssCompiled).to.contain('--extract-colors-2: 34 34 34;');
+        expect(cssCompiled).to.contain('--extract-colors-3: 221 221 221;');
+        expect(cssCompiled).to.contain('--extract-colors-4: 34, 34, 34;');
+        expect(cssCompiled).to.contain('--extract-colors-5: 221, 221, 221;');
+        expect(cssCompiled).to.contain('--extract-colors-6: 0 255 0;');
+        expect(cssCompiled).to.contain('--extract-colors-7: 0 255 0 / 0.5;');
+        expect(cssCompiled).to.contain('--extract-colors-8: 0, 255, 0;');
+        expect(cssCompiled).to.contain('--extract-colors-9: 0, 255, 0, 0.5;');
+        expect(cssCompiled).to.contain('--extract-colors-10: 0 255 0;');
+        expect(cssCompiled).to.contain('--extract-colors-11: 0 255 0 / 0.5;');
+        expect(cssCompiled).to.contain('--extract-colors-12: 0, 255, 0;');
+        expect(cssCompiled).to.contain('--extract-colors-13: 0, 255, 0, 0.5;');
+        // --
+        expect(cssCompiled).to.contain('--no-null-1: transparent;');
+        expect(cssCompiled).to.contain('--no-null-2: blue;');
+        // --
+        expect(cssCompiled).to.contain('--no-trasparent-1: inherit;');
+        expect(cssCompiled).to.contain('--no-trasparent-2: inherit;');
+        expect(cssCompiled).to.contain('--no-trasparent-3: #123456;');
+        // --
+        expect(cssCompiled).to.contain('--map-deep-get: 10px;');
+    });
 });

package/test/lint.test.js

@@ -1,50 +1,48 @@
-import { describe, it } from 'mocha';
-import { expect } from "chai";
-import stylelint from "stylelint";
-import path from "path";
-import styleLintFormatter from "stylelint-config-standard-scss";
-import { fileURLToPath } from "url";
-
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-
-describe("LINT", function() {
-    // to remove timeout error
-    this.timeout(10000);
-
-    it('Generic linting', async () => {
-        return stylelint.lint({
-            configFile: path.join(__dirname, '../.stylelintrc.json'),
-            ignorePath: path.join(__dirname, '../.stylelintignore'),
-            formatter: styleLintFormatter,
-            files: [
-                path.join(__dirname, './test.scss'),
-            ],
-        })
-            .then(function ({ errored, report }) {
-                if(!errored)
-                    return false;
-                // show me errors
-                const reportsArray = JSON.parse(report);
-                for(let i = reportsArray.length; i--; ){
-                    const reportKeys = Object.keys(reportsArray[i]);
-                    for(let k = reportKeys.length; k--; ){
-                        const reportsValues = reportsArray[i][reportKeys[k]];
-                        if(reportsValues.length <= 0)
-                            continue;
-                        if(Array.isArray(reportsValues)){
-                            console.log("-----------" + reportKeys[k] + "-----------");
-                            for(let x = reportsValues.length; x--; )
-                                console.log(reportsValues[x]);
-                        }else{
-                            console.log(reportKeys[k] + ": " + reportsValues);
-                        }
-                    }
-                }
-                return true;
-            })
-            .then(result => expect(result).to.be.false);
-    });
-});
+import { describe, it } from 'mocha';
+import { expect } from "chai";
+import stylelint from "stylelint";
+import path from "path";
+import { fileURLToPath } from "url";
+
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+describe("LINT", function() {
+    // to remove timeout error
+    this.timeout(10000);
+
+    it('Generic linting', async () => {
+        return stylelint.lint({
+            configFile: path.join(__dirname, '../.stylelintrc.json'),
+            ignorePath: path.join(__dirname, '../.stylelintignore'),
+            files: [
+                path.join(__dirname, './test.scss'),
+            ],
+        })
+            .then(function ({ errored, report }) {
+                if(!errored)
+                    return false;
+                // show me errors
+                const reportsArray = JSON.parse(report);
+                for(let i = reportsArray.length; i--; ){
+                    const reportKeys = Object.keys(reportsArray[i]);
+                    for(let k = reportKeys.length; k--; ){
+                        const reportsValues = reportsArray[i][reportKeys[k]];
+                        if(reportsValues.length <= 0)
+                            continue;
+                        if(Array.isArray(reportsValues)){
+                            console.log("-----------" + reportKeys[k] + "-----------");
+                            for(let x = reportsValues.length; x--; )
+                                console.log(reportsValues[x]);
+                        }else{
+                            console.log(reportKeys[k] + ": " + reportsValues);
+                        }
+                    }
+                }
+                return true;
+            })
+            .then(result => expect(result).to.be.false);
+    });
+});