@aesthetic/addon-mixins - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

esm/index.js

@@ -1,3 +0,3 @@
-import { PALETTE_TYPES, SHADE_RANGES, BORDER_SIZES, BREAKPOINT_SIZES, SHADOW_SIZES, TEXT_SIZES } from '@aesthetic/system';
-import { isObject } from '@aesthetic/utils';
+import { SHADE_RANGES } from '@aesthetic/system';
+import { objectLoop, isObject } from '@aesthetic/utils';
 
@@ -16,3 +16,3 @@ function checkList(name, value, items) {
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
   }
@@ -37,5 +37,5 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
     checkList('shade', shade, SHADE_RANGES);
-    checkList('size', size, BORDER_SIZES);
+    checkList('size', size, Object.keys(this.tokens.border));
   }
@@ -96,3 +96,3 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
   }
@@ -111,3 +111,5 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('level', level, [1, 2, 3, 4, 5, 6]);
+    checkList('level', level, Object.keys(this.tokens.heading).map(function (l) {
+      return Number(l.slice(1));
+    }));
   }
@@ -196,4 +198,4 @@
   };
-  BREAKPOINT_SIZES.forEach(function (size) {
-    declaration['@media'][String(_this.token("breakpoint-" + size + "-query"))] = {
+  objectLoop(this.tokens.breakpoint, function (bp, size) {
+    declaration['@media'][bp.query] = {
       fontSize: _this.var("breakpoint-" + size + "-root-text-size"),
@@ -216,5 +218,5 @@ lineHeight: _this.var("breakpoint-" + size + "-root-line-height")
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
     checkList('shade', shade, SHADE_RANGES);
-    checkList('size', size, SHADOW_SIZES);
+    checkList('size', size, Object.keys(this.tokens.shadow));
   }
@@ -233,3 +235,3 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('size', size, TEXT_SIZES);
+    checkList('size', size, Object.keys(this.tokens.text));
   }
@@ -291,2 +293,7 @@
       shadow = _ref$shadow === void 0 ? true : _ref$shadow;
+
+  if ("production" !== process.env.NODE_ENV) {
+    checkList('palette', palette, Object.keys(this.tokens.palette));
+  }
+
   var rule = this.mixin.background({
@@ -311,2 +318,7 @@ palette: palette
       palette = _ref2$palette === void 0 ? 'neutral' : _ref2$palette;
+
+  if ("production" !== process.env.NODE_ENV) {
+    checkList('palette', palette, Object.keys(this.tokens.palette));
+  }
+
   return {
@@ -313,0 +325,0 @@ color: this.var("palette-" + palette + "-color-00"),

lib/index.js

@@ -18,3 +18,3 @@ 'use strict';
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, system.PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
   }
@@ -39,5 +39,5 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, system.PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
     checkList('shade', shade, system.SHADE_RANGES);
-    checkList('size', size, system.BORDER_SIZES);
+    checkList('size', size, Object.keys(this.tokens.border));
   }
@@ -98,3 +98,3 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, system.PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
   }
@@ -113,3 +113,5 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('level', level, [1, 2, 3, 4, 5, 6]);
+    checkList('level', level, Object.keys(this.tokens.heading).map(function (l) {
+      return Number(l.slice(1));
+    }));
   }
@@ -198,4 +200,4 @@
   };
-  system.BREAKPOINT_SIZES.forEach(function (size) {
-    declaration['@media'][String(_this.token("breakpoint-" + size + "-query"))] = {
+  utils.objectLoop(this.tokens.breakpoint, function (bp, size) {
+    declaration['@media'][bp.query] = {
       fontSize: _this.var("breakpoint-" + size + "-root-text-size"),
@@ -218,5 +220,5 @@ lineHeight: _this.var("breakpoint-" + size + "-root-line-height")
   if ("production" !== process.env.NODE_ENV) {
-    checkList('palette', palette, system.PALETTE_TYPES);
+    checkList('palette', palette, Object.keys(this.tokens.palette));
     checkList('shade', shade, system.SHADE_RANGES);
-    checkList('size', size, system.SHADOW_SIZES);
+    checkList('size', size, Object.keys(this.tokens.shadow));
   }
@@ -235,3 +237,3 @@
   if ("production" !== process.env.NODE_ENV) {
-    checkList('size', size, system.TEXT_SIZES);
+    checkList('size', size, Object.keys(this.tokens.text));
   }
@@ -293,2 +295,7 @@
       shadow = _ref$shadow === void 0 ? true : _ref$shadow;
+
+  if ("production" !== process.env.NODE_ENV) {
+    checkList('palette', palette, Object.keys(this.tokens.palette));
+  }
+
   var rule = this.mixin.background({
@@ -313,2 +320,7 @@ palette: palette
       palette = _ref2$palette === void 0 ? 'neutral' : _ref2$palette;
+
+  if ("production" !== process.env.NODE_ENV) {
+    checkList('palette', palette, Object.keys(this.tokens.palette));
+  }
+
   return {
@@ -315,0 +327,0 @@ color: this.var("palette-" + palette + "-color-00"),

lib/types.d.ts

@@ -37,2 +37,3 @@ import { Rule } from '@aesthetic/types';
 }
+export declare type MixinType = 'background' | 'border' | 'foreground' | 'heading' | 'hide-completely' | 'hide-offscreen' | 'hide-visually' | 'reset-button' | 'reset-input' | 'reset-list' | 'reset-media' | 'reset-typography' | 'root' | 'shadow' | 'text' | 'text-break' | 'text-truncate' | 'text-wrap' | 'ui-box' | 'ui-interactive';
 declare module '@aesthetic/system' {
@@ -62,3 +63,2 @@ interface MixinUtil<T extends object = Rule, O extends object = object> {
 }
-export declare type MixinType = 'background' | 'border' | 'foreground' | 'heading' | 'hide-completely' | 'hide-offscreen' | 'hide-visually' | 'reset-button' | 'reset-input' | 'reset-list' | 'reset-media' | 'reset-typography' | 'root' | 'shadow' | 'text' | 'text-break' | 'text-truncate' | 'text-wrap' | 'ui-box' | 'ui-interactive';
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@aesthetic/addon-mixins",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "CSS-in-JS mixins for the Aesthetic design system.",
@@ -23,7 +23,7 @@ "keywords": [
   "peerDependencies": {
-    "@aesthetic/sss": "^0.4.0",
-    "@aesthetic/system": "^0.3.0"
+    "@aesthetic/sss": "*",
+    "@aesthetic/system": "*"
   },
   "dependencies": {
-    "@aesthetic/utils": "^0.4.4"
+    "@aesthetic/utils": "^0.4.5"
   },
@@ -34,3 +34,3 @@ "funding": {
   },
-  "gitHead": "9bae5a0e88a3727367cd289b5174cb2ecb42a91f"
+  "gitHead": "ae0de0b1a4e87ec62e8c519ac5aea0261317994e"
 }

No alert changes

Improved metrics

Total package byte prevSize

36065

increased by2.03%

Lines of code

800

increased by2.04%

Worsened metrics

Number of low supply chain risk alerts

17

increased by30.77%

Dependency changes

• + Added@aesthetic/sss@0.8.2(transitive)

• + Added@aesthetic/system@0.9.10(transitive)

• + Added@aesthetic/types@0.5.10.6.7(transitive)

• + Added@aesthetic/utils@0.7.00.8.4(transitive)

• - Removed@aesthetic/sss@0.4.6(transitive)

• - Removed@aesthetic/system@0.3.0(transitive)

• - Removed@aesthetic/types@0.2.1(transitive)

• - Removed@aesthetic/utils@0.3.0(transitive)

• Updated@aesthetic/utils@^0.4.5