@guebbit/css-toolkit 1.0.0

package/src/mixins/_create-instruction.scss

@@ -0,0 +1,11 @@
+/**
+  CSS single instructions generator
+  @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-instruction($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

@@ -0,0 +1,19 @@
+import { describe, it } from 'mocha';
+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);
+
+describe("COMPILE", function() {
+    this.timeout(10000);
+    it("Compiles in CSS", () => {
+        const sassRender = util.promisify(sass.render);
+        return sassRender({
+            includePaths: ['./scss'],
+            file: path.join(__dirname, '../test.scss')
+        });
+    });
+});

package/test/lint.test.js

@@ -0,0 +1,33 @@
+import { describe, it } from 'mocha';
+import stylelint from "stylelint";
+import path from "path";
+import styleLintFormatter from "stylelint-config-standard-scss";
+import assert from "assert";
+import { fileURLToPath } from "url";
+
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+describe("LINT", () => {
+    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 (lintResults) {
+            // console.log("results", lintResults.results)
+            // console.log("output", lintResults.output)
+            // console.log("errored", lintResults.errored)
+            return assert.ok(!lintResults.errored);
+        }).catch(function (error) {
+            // do things with err e.g.
+            console.error("ERROR", error);
+            return false;
+        });
+    });
+});

package/test.scss

@@ -0,0 +1,65 @@
+@use "./src" as guebbit;
+
+@include guebbit.create-colors(guebbit.$colors-collection);
+
+
+@include guebbit.create-helper-margin((
+  (auto, auto),
+  (6, 6px),
+  (12, 12px),
+  (24, 24px),
+  (36, 36px),
+  (48, 48px),
+));
+
+@include guebbit.create-helper-padding((
+  (6, 6px),
+  (12, 12px),
+  (24, 24px),
+  (36, 36px),
+  (48, 48px),
+));
+
+@include guebbit.create-instruction("font-size", (
+  (n2, 0.6em),
+  (n1, 0.8em),
+  (1, 1.2em),
+  (2, 1.5em),
+  (3, 2em),
+));
+
+@include guebbit.create-instruction("opacity", (
+  (0, 0),
+  (25, 0.25),
+  (50, 0.50),
+  (75, 0.75),
+  (100, 1),
+));
+
+@include guebbit.create-instruction("width", (
+  (25, 25%),
+  (50, 50%),
+  (75, 75%),
+  (100, 100%),
+  (p25, 25px),
+  (p50, 50px),
+  (p75, 75px),
+  (p100, 100px)
+), true);
+
+@include guebbit.create-instruction("min-width", (
+  (25, 25%),
+  (50, 50%),
+  (75, 75%),
+  (100, 100%),
+  (p25, 25px),
+  (p50, 50px),
+  (p75, 75px),
+  (p100, 100px)
+), true);
+
+@include guebbit.create-instruction("gap", (
+  (6, 6px),
+  (12, 12px),
+  (24, 24px),
+), true, "flex-");

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import * as path from 'path';
+
+export default defineConfig({
+    // root: "/",
+    build: {
+        outDir: path.join(__dirname, "dist"),
+        lib: {
+            entry: path.resolve(__dirname, "index.scss"), // TODO library.scss (import the various components)
+            name: "@guebbit/css-toolkit",
+            fileName: "css-toolkit",
+        },
+    },
+    server: {
+        port: 8080,
+    },
+    resolve: {
+        alias: [
+            {
+                find: '@',
+                replacement: path.resolve(__dirname, 'src')
+            }
+        ]
+    },
+    plugins: [],
+});