@guebbit/css-toolkit 1.0.1 → 1.1.0

package/src/mixins/_build-compatibility.scss

@@ -1,28 +0,0 @@
-/**
-*	Compatibility mode for browsers
-*	@param string $browser: target browser
-*	@content
-**/
-@mixin build-compatibility($browser) {
-  // INTERNET EXPLORER
-  @if $browser == "ie" {
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      @content;
-    }
-  }
-  // MICROSOFT EDGE
-  @if $browser == "edge" {
-    @supports (-ms-ime-align:auto) {
-      @content;
-    }
-  }
-  // FIREFOX
-  @if $browser == "firefox" {
-    @supports (-moz-appearance:none) {
-      @content;
-    }
-  }
-
-  // OPERA TODO
-  // SAFARI TODO
-}

package/src/mixins/_build-scrollbar.scss

@@ -1,32 +0,0 @@
-/**
- *	Builder - scrollbars of element
- *	@param string $color
- *	@param pixels $size
- *	@param $background: if false, has default lighten 40%
- */
-@mixin build-scrollbar($size: "4px", $color: "#fff", $bg: "auto", $radius: "10px") {
-  $fallback-color: #fff;
-  $fallback-bg: transparent;
-
-  @if $bg == "auto" {
-    $bg: $fallback-bg;
-  }
-
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-    background-color: $fallback-bg;
-    background-color: $bg;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: $radius;
-    background-color: $fallback-color;
-    background-color: $color;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: $fallback-bg;
-    background-color: $bg;
-  }
-}

package/src/mixins/_create-colors.scss

@@ -1,119 +0,0 @@
-@use "sass:list";
-@use "sass:string";
-@use "../functions/colors" as color-functions;
-
-/**
- *  Create all the needed classes for the requested colors
- *  $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
- *  $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
- *  $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
- *    - root
- *    - on-root (color's "best contrast" partner color)
- *    - color
- *    - background
- *    - border
- *    - pseudo (bg only, color very rarely used)
- *    - hover
- *    $prefix: prefix that applies to classes
- */
-@mixin create-colors($color-list: (), $branch-list: (), $feature-list: (), $prefix: "") {
-  // for every branch
-  @each $branch-name, $branch in $color-list {
-    // check that there is no $branch-list or, if present, it's correctly whitelisted
-    @if list.length($branch-list) < 1 or list.index($branch-list, $branch-name) {
-
-      // for every leaf
-      @each $sname, $scolor in $branch {
-
-        @if not list.index($branch-name, "advanced"){
-          @if list.length($feature-list) < 1 or list.index($feature-list, "color") {
-            .#{$prefix}#{$branch-name}-#{$sname}-text {
-              color: $scolor !important;
-            }
-          }
-          @if list.length($feature-list) < 1 or list.index($feature-list, "border") {
-            .#{$prefix}#{$branch-name}-#{$sname}-border {
-              border-color: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-          .#{$prefix}#{$branch-name}-#{$sname}-bg {
-            background: $scolor !important;
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-          .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
-            &::after,
-            &::before {
-              background: $scolor !important;
-            }
-          }
-        }
-
-        @if list.length($feature-list) < 1 or list.index($feature-list, "hover"){
-
-          @if not list.index($branch-name, "advanced"){
-            @if list.length($feature-list) < 1 or list.index($feature-list, "color"){
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
-                &:hover {
-                  color: $scolor !important;
-                }
-              }
-            }
-            @if list.length($feature-list) < 1 or list.index($feature-list, "border"){
-              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
-                &:hover {
-                  border-color: $scolor !important;
-                }
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
-              &:hover {
-                background: $scolor !important;
-              }
-            }
-          }
-
-          @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
-            .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
-              &:hover{
-                &::after,
-                &::before {
-                  background: $scolor !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * CSS VARS on root (they will be translated in "RGB" instead of "HEX"
-   */
-  :root{
-    @if list.length($feature-list) < 1 or list.index($feature-list, "root"){
-      @each $branch-name, $branch in $color-list {
-        @each $sname, $scolor in $branch {
-          --#{$prefix}#{$branch-name}-#{$sname}: #{color-functions.hex2rgb($scolor)};
-        }
-      }
-    }
-    @if list.length($feature-list) < 1 or list.index($feature-list, "on-root"){
-      @each $branch-name, $branch in $color-list {
-        @each $sname, $scolor in $branch {
-          // @if type-of($scolor) == color {
-          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.hex2rgb(color-functions.color-contrast($scolor))};
-          // _}
-        }
-      }
-    }
-  }
-}

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

@@ -1,39 +0,0 @@
-/**
- *
- * 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 +0,0 @@
-/**
- *
- * 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-instruction.scss

@@ -1,11 +0,0 @@
-/**
-  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

@@ -1,19 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,65 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-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: [],
-});