Add new Table mixins for shrinking

This will allow consistent, reusable behavior throughout the project

Related to Issue #43

assets/_types.scss

@@ -0,0 +1,52 @@
+////
+// A collection of function for advanced type checking
+// @author Kitty Giraudel
+////
+
+@function is-number($value) {
+  @return type-of($value) == 'number';
+}
+
+@function is-time($value) {
+  @return is-number($value) and index('ms' 's', unit($value)) != null;
+}
+
+@function is-duration($value) {
+  @return is-time($value);
+}
+
+@function is-angle($value) {
+  @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null;
+}
+
+@function is-frequency($value) {
+  @return is-number($value) and index('Hz' 'kHz', unit($value)) != null;
+}
+
+@function is-integer($value) {
+  @return is-number($value) and round($value) == $value;
+}
+
+@function is-relative-length($value) {
+  @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;
+}
+
+@function is-absolute-length($value) {
+  @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;
+}
+
+@function is-percentage($value) {
+  @return is-number($value) and unit($value) == '%';
+}
+
+@function is-length($value) {
+  @return is-relative-length($value) or is-absolute-length($value);
+}
+
+@function is-resolution($value) {
+  @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;
+}
+
+@function is-position($value) {
+  @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null;
+}

assets/table/_mixins.scss

@@ -1,4 +1,5 @@
 @use './variables' as *;
+@use '../types';
 
 @mixin cell-like($default-color: $neutral-color) {
   position: relative;
@@ -21,3 +22,38 @@
     }
   }
 }
+
+@mixin -shrink-template-columns($template-columns: null) {
+  @if $template-columns {
+    @if types.is-integer($template-columns) {
+      grid-template-columns: repeat($template-columns, auto);
+    } @else {
+      grid-template-columns: $template-columns;
+    }
+  }
+}
+
+/**
+ * Performs table shrinking, useful for fancy semi-responsive behavior
+ * $default-template-columns defines the default (full-size) template,
+ *     you can send either a full definition or just a number (it will use auto with a number)
+ *     If you don't pass this, we won't define any grid-template-columns, allowing user overrides
+ * $shrinking-rules defines how you want the table to react to smaller screens
+ *     this should be a list in the following format:
+ *     breakpoint selector template-columns
+ *     e.g.: 1150px '.setup' 8
+ *     The template-columns portion accepts both formats $default-template-columns does
+ */
+@mixin shrink($default-template-columns: null, $shrinking-rules: [ ]) {
+  @include -shrink-template-columns($default-template-columns);
+
+  @each $breakpoint, $selector, $template-columns in $shrinking-rules {
+    @media (max-width: $breakpoint) {
+      @include -shrink-template-columns($template-columns);
+
+      ::v-deep #{$selector} {
+        display: none;
+      }
+    }
+  }
+}

stylelint.config.js

@@ -5,8 +5,22 @@ module.exports = {
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
   rules: {
+    'at-rule-empty-line-before': [
+      'always',
+      {
+        except: [ 'blockless-after-same-name-blockless', 'first-nested' ],
+        ignore: [ 'after-comment' ],
+        ignoreAtRules: [ 'if', 'else' ],
+      },
+    ],
     // SCSS uses @rules. Some are unknown.
     'at-rule-no-unknown': null,
+    'block-closing-brace-newline-after': [
+      'always',
+      {
+        ignoreAtRules: [ 'if', 'else' ],
+      },
+    ],
     'declaration-block-single-line-max-declarations': 0,
     // Allow ::v-deep ( >>> and /deep/ both fail more fundamentally )
     'selector-pseudo-element-no-unknown': [