@schalkneethling/miyagi-core 4.4.2 → 4.4.3

package/lib/styleguide/colors.js

@@ -7,129 +7,129 @@ import colorNames from "./color-names.js";
  * @returns {Array}
  */
 export default function getColors(obj, prefix) {
-	const types = ["typo", "decoration"];
-	const uppercasedPrefix = prefix.toUpperCase();
+  const types = ["typo", "decoration"];
+  const uppercasedPrefix = prefix.toUpperCase();
 
-	const colors = getCustomProperties(obj, prefix)
-		.filter(({ property, value }) => {
-			const lowerCasedValue = value.toLowerCase();
-			return (
-				property.match(`--${prefix}-(.)*`) &&
-				(lowerCasedValue.startsWith("rgb(") ||
-					lowerCasedValue.startsWith("rgba(") ||
-					(lowerCasedValue.startsWith("#") &&
-						Boolean(lowerCasedValue.match(new RegExp(/^#[a-f0-9]{3,8}$/)))) ||
-					lowerCasedValue.startsWith("hsl(") ||
-					lowerCasedValue.startsWith("hsla(") ||
-					(lowerCasedValue.startsWith("var(--") &&
-						lowerCasedValue.endsWith(")")) ||
-					colorNames.includes(value))
-			);
-		})
-		.map(({ property, value }) => {
-			const lowerCasedValue = value.toLowerCase();
-			const whitesArr = [
-				"#fff",
-				"#ffff",
-				"#ffffff",
-				"#ffffffff",
-				"hsl(0,0%,100%)",
-				"hsl(0, 0%,100%)",
-				"hsl(0,0%, 100%)",
-				"hsl(0, 0%, 100%)",
-				"rgb(255,255,255)",
-				"rgb(255, 255,255)",
-				"rgb(255,255, 255)",
-				"rgb(255, 255, 255)",
-				"rgba(255,255,255,1)",
-				"rgba(255, 255,255,1)",
-				"rgba(255, 255, 255,1)",
-				"rgba(255, 255,255, 1)",
-				"rgba(255,255, 255,1)",
-				"rgba(255,255, 255, 1)",
-				"rgba(255,255,255, 1)",
-				"rgba(255, 255, 255, 1)",
-				"white",
-				`var(--${uppercasedPrefix}-white)`,
-			];
+  const colors = getCustomProperties(obj, prefix)
+    .filter(({ property, value }) => {
+      const lowerCasedValue = value.toLowerCase();
+      return (
+        property.match(`--${prefix}-(.)*`) &&
+        (lowerCasedValue.startsWith("rgb(") ||
+          lowerCasedValue.startsWith("rgba(") ||
+          (lowerCasedValue.startsWith("#") &&
+            Boolean(lowerCasedValue.match(new RegExp(/^#[a-f0-9]{3,8}$/)))) ||
+          lowerCasedValue.startsWith("hsl(") ||
+          lowerCasedValue.startsWith("hsla(") ||
+          (lowerCasedValue.startsWith("var(--") &&
+            lowerCasedValue.endsWith(")")) ||
+          colorNames.includes(value))
+      );
+    })
+    .map(({ property, value }) => {
+      const lowerCasedValue = value.toLowerCase();
+      const whitesArr = [
+        "#fff",
+        "#ffff",
+        "#ffffff",
+        "#ffffffff",
+        "hsl(0,0%,100%)",
+        "hsl(0, 0%,100%)",
+        "hsl(0,0%, 100%)",
+        "hsl(0, 0%, 100%)",
+        "rgb(255,255,255)",
+        "rgb(255, 255,255)",
+        "rgb(255,255, 255)",
+        "rgb(255, 255, 255)",
+        "rgba(255,255,255,1)",
+        "rgba(255, 255,255,1)",
+        "rgba(255, 255, 255,1)",
+        "rgba(255, 255,255, 1)",
+        "rgba(255,255, 255,1)",
+        "rgba(255,255, 255, 1)",
+        "rgba(255,255,255, 1)",
+        "rgba(255, 255, 255, 1)",
+        "white",
+        `var(--${uppercasedPrefix}-white)`,
+      ];
 
-			types.forEach((type) => {
-				const uppercasedType = type.toUpperCase();
+      types.forEach((type) => {
+        const uppercasedType = type.toUpperCase();
 
-				whitesArr.push(
-					`rgba(var(--${uppercasedPrefix}-${uppercasedType}-white-r),var(--${uppercasedPrefix}-${uppercasedType}-white-g),var(--${uppercasedPrefix}-${uppercasedType}-white-b))`,
-					`rgba(var(--${uppercasedPrefix}-${uppercasedType}-white-r), var(--${uppercasedPrefix}-${uppercasedType}-white-g), var(--${uppercasedPrefix}-${uppercasedType}-white-b))`,
-					`rgbaa(var(--${uppercasedPrefix}-${uppercasedType}-white-r),var(--${uppercasedPrefix}-${uppercasedType}-white-g),var(--${uppercasedPrefix}-${uppercasedType}-white-b),var(--${uppercasedPrefix}-${uppercasedType}-white-a))`,
-					`rgbaa(var(--${uppercasedPrefix}-${uppercasedType}-white-r), var(--${uppercasedPrefix}-${uppercasedType}-white-g), var(--${uppercasedPrefix}-${uppercasedType}-white-b), var(--${uppercasedPrefix}-${uppercasedType}-white-a))`,
-				);
-			});
+        whitesArr.push(
+          `rgba(var(--${uppercasedPrefix}-${uppercasedType}-white-r),var(--${uppercasedPrefix}-${uppercasedType}-white-g),var(--${uppercasedPrefix}-${uppercasedType}-white-b))`,
+          `rgba(var(--${uppercasedPrefix}-${uppercasedType}-white-r), var(--${uppercasedPrefix}-${uppercasedType}-white-g), var(--${uppercasedPrefix}-${uppercasedType}-white-b))`,
+          `rgbaa(var(--${uppercasedPrefix}-${uppercasedType}-white-r),var(--${uppercasedPrefix}-${uppercasedType}-white-g),var(--${uppercasedPrefix}-${uppercasedType}-white-b),var(--${uppercasedPrefix}-${uppercasedType}-white-a))`,
+          `rgbaa(var(--${uppercasedPrefix}-${uppercasedType}-white-r), var(--${uppercasedPrefix}-${uppercasedType}-white-g), var(--${uppercasedPrefix}-${uppercasedType}-white-b), var(--${uppercasedPrefix}-${uppercasedType}-white-a))`,
+        );
+      });
 
-			const whites = new Set(whitesArr);
-			const customPropertyWithoutPrefix = property.replace(`--${prefix}-`, "");
-			const name = customPropertyWithoutPrefix
-				.replace(`${types[0]}-`, "")
-				.replace(`${types[1]}-`, "");
-			let type;
+      const whites = new Set(whitesArr);
+      const customPropertyWithoutPrefix = property.replace(`--${prefix}-`, "");
+      const name = customPropertyWithoutPrefix
+        .replace(`${types[0]}-`, "")
+        .replace(`${types[1]}-`, "");
+      let type;
 
-			types.forEach((t) => {
-				if (
-					customPropertyWithoutPrefix.toUpperCase().startsWith(t.toUpperCase())
-				) {
-					type = t;
-				}
-			});
+      types.forEach((t) => {
+        if (
+          customPropertyWithoutPrefix.toUpperCase().startsWith(t.toUpperCase())
+        ) {
+          type = t;
+        }
+      });
 
-			return {
-				name,
-				type,
-				customProp: property,
-				values: ["RGB", "Hex", "HSL"],
-				isWhite: whites.has(lowerCasedValue),
-			};
-		});
+      return {
+        name,
+        type,
+        customProp: property,
+        values: ["RGB", "Hex", "HSL"],
+        isWhite: whites.has(lowerCasedValue),
+      };
+    });
 
-	const deduped = [
-		{
-			type: "all",
-			styles: [],
-		},
-	];
+  const deduped = [
+    {
+      type: "all",
+      styles: [],
+    },
+  ];
 
-	types.forEach((type) => {
-		deduped.push({
-			type,
-			styles: [],
-		});
-	});
+  types.forEach((type) => {
+    deduped.push({
+      type,
+      styles: [],
+    });
+  });
 
-	colors.forEach((color) => {
-		const t = color.type || "all";
+  colors.forEach((color) => {
+    const t = color.type || "all";
 
-		if (
-			!deduped
-				.find(({ type }) => type === t)
-				.styles.find(({ name }) => name === color.name)
-		) {
-			deduped
-				.find(({ type }) => type === t)
-				.styles.push({
-					name: color.name,
-					customProp: color.customProp,
-					values: color.values,
-					isWhite: color.isWhite,
-				});
-		}
-	});
+    if (
+      !deduped
+        .find(({ type }) => type === t)
+        .styles.find(({ name }) => name === color.name)
+    ) {
+      deduped
+        .find(({ type }) => type === t)
+        .styles.push({
+          name: color.name,
+          customProp: color.customProp,
+          values: color.values,
+          isWhite: color.isWhite,
+        });
+    }
+  });
 
-	return deduped.map((entry) => {
-		entry.styles = entry.styles.sort((a, b) => {
-			const aUppercase = a.name.toUpperCase();
-			const bUppercase = b.name.toUpperCase();
+  return deduped.map((entry) => {
+    entry.styles = entry.styles.sort((a, b) => {
+      const aUppercase = a.name.toUpperCase();
+      const bUppercase = b.name.toUpperCase();
 
-			if (aUppercase > bUppercase) return 1;
-			if (aUppercase < bUppercase) return -1;
-			return 0;
-		});
-		return entry;
-	});
+      if (aUppercase > bUppercase) return 1;
+      if (aUppercase < bUppercase) return -1;
+      return 0;
+    });
+    return entry;
+  });
 }

package/lib/styleguide/helpers.js

@@ -1,37 +1,37 @@
 export const getCustomProperties = function (obj, property, endsWith) {
-	var result = [];
+  var result = [];
 
-	if (obj instanceof Array) {
-		for (var i = 0; i < obj.length; i++) {
-			result = [...result, ...getCustomProperties(obj[i], property, endsWith)];
-		}
-	} else {
-		for (const prop in obj) {
-			if (prop == "property") {
-				if (endsWith) {
-					if (obj[prop].endsWith(`-${property}`)) {
-						result.push({
-							property: obj.property,
-							value: obj.value,
-						});
-					}
-				} else {
-					if (obj[prop].startsWith(`--${property}-`)) {
-						result.push({
-							property: obj.property,
-							value: obj.value,
-						});
-					}
-				}
-			}
-			if (obj[prop] instanceof Object || obj[prop] instanceof Array) {
-				result = [
-					...result,
-					...getCustomProperties(obj[prop], property, endsWith),
-				];
-			}
-		}
-	}
+  if (obj instanceof Array) {
+    for (var i = 0; i < obj.length; i++) {
+      result = [...result, ...getCustomProperties(obj[i], property, endsWith)];
+    }
+  } else {
+    for (const prop in obj) {
+      if (prop == "property") {
+        if (endsWith) {
+          if (obj[prop].endsWith(`-${property}`)) {
+            result.push({
+              property: obj.property,
+              value: obj.value,
+            });
+          }
+        } else {
+          if (obj[prop].startsWith(`--${property}-`)) {
+            result.push({
+              property: obj.property,
+              value: obj.value,
+            });
+          }
+        }
+      }
+      if (obj[prop] instanceof Object || obj[prop] instanceof Array) {
+        result = [
+          ...result,
+          ...getCustomProperties(obj[prop], property, endsWith),
+        ];
+      }
+    }
+  }
 
-	return result;
+  return result;
 };

package/lib/styleguide/index.js

@@ -4,14 +4,14 @@ import spacings from "./spacings.js";
 import mediaQueries from "./media-queries.js";
 
 export const getColors = (obj, prefix) => {
-	return colors(obj, prefix);
+  return colors(obj, prefix);
 };
 export const getTypography = (obj, prefix) => {
-	return typography(obj, prefix);
+  return typography(obj, prefix);
 };
 export const getSpacings = (obj, prefix) => {
-	return spacings(obj, prefix);
+  return spacings(obj, prefix);
 };
 export const getMediaQueries = (obj) => {
-	return mediaQueries(obj);
+  return mediaQueries(obj);
 };

package/lib/styleguide/media-queries.js

@@ -3,24 +3,24 @@
  * @returns {Array}
  */
 export default function getMediaQueries(obj) {
-	var result = [];
+  var result = [];
 
-	if (obj instanceof Array) {
-		for (var i = 0; i < obj.length; i++) {
-			result = [...result, ...getMediaQueries(obj[i])];
-		}
-	} else {
-		for (const prop in obj) {
-			if (prop == "type") {
-				if (obj[prop] === "media") {
-					result.push(obj.media);
-				}
-			}
-			if (obj[prop] instanceof Object || obj[prop] instanceof Array) {
-				result = [...result, ...getMediaQueries(obj[prop])];
-			}
-		}
-	}
+  if (obj instanceof Array) {
+    for (var i = 0; i < obj.length; i++) {
+      result = [...result, ...getMediaQueries(obj[i])];
+    }
+  } else {
+    for (const prop in obj) {
+      if (prop == "type") {
+        if (obj[prop] === "media") {
+          result.push(obj.media);
+        }
+      }
+      if (obj[prop] instanceof Object || obj[prop] instanceof Array) {
+        result = [...result, ...getMediaQueries(obj[prop])];
+      }
+    }
+  }
 
-	return result.filter((v, i, a) => a.indexOf(v) === i);
+  return result.filter((v, i, a) => a.indexOf(v) === i);
 }

package/lib/styleguide/spacings.js

@@ -6,30 +6,30 @@ import { getCustomProperties } from "./helpers.js";
  * @returns {Array}
  */
 export default function getSpacings(obj, prefix) {
-	const spacings = [];
+  const spacings = [];
 
-	getCustomProperties(obj, prefix).forEach(({ property, value, mq }) => {
-		// filter out negative spacings
-		if (property.startsWith(`--${prefix}-`) && !value.startsWith("-")) {
-			spacings.push({
-				name: property.replace(`--${prefix}-`, ""),
-				customProp: property,
-				value,
-				mq,
-			});
-		}
-	});
+  getCustomProperties(obj, prefix).forEach(({ property, value, mq }) => {
+    // filter out negative spacings
+    if (property.startsWith(`--${prefix}-`) && !value.startsWith("-")) {
+      spacings.push({
+        name: property.replace(`--${prefix}-`, ""),
+        customProp: property,
+        value,
+        mq,
+      });
+    }
+  });
 
-	const deduped = {};
+  const deduped = {};
 
-	spacings.forEach((e) => {
-		if (!deduped[e.name]) {
-			deduped[e.name] = {
-				customProp: e.customProp,
-				value: e.value,
-			};
-		}
-	});
+  spacings.forEach((e) => {
+    if (!deduped[e.name]) {
+      deduped[e.name] = {
+        customProp: e.customProp,
+        value: e.value,
+      };
+    }
+  });
 
-	return Object.entries(deduped);
+  return Object.entries(deduped);
 }

package/lib/styleguide/typography.js

@@ -6,56 +6,56 @@ import { getCustomProperties } from "./helpers.js";
  * @returns {Array}
  */
 export default function getTypography(obj, prefix) {
-	const props = [
-		"font-family",
-		"font-feature-settings",
-		"font-kerning",
-		"font-size-adjust",
-		"font-size",
-		"font-stretch",
-		"font-style",
-		"font-variant-caps",
-		"font-variant",
-		"font-weight",
-		"letter-spacing",
-		"line-height",
-		"text-shadow",
-		"text-transform",
-	];
+  const props = [
+    "font-family",
+    "font-feature-settings",
+    "font-kerning",
+    "font-size-adjust",
+    "font-size",
+    "font-stretch",
+    "font-style",
+    "font-variant-caps",
+    "font-variant",
+    "font-weight",
+    "letter-spacing",
+    "line-height",
+    "text-shadow",
+    "text-transform",
+  ];
 
-	const deduped = {};
+  const deduped = {};
 
-	props.forEach((prop) => {
-		getCustomProperties(obj, prop, true).forEach(({ property }) => {
-			if (property.startsWith(`--${prefix}-`)) {
-				const name = property
-					.replace(`--${prefix}-`, "")
-					.replace(`-${prop}`, "");
-				const customPropName = property.replace(`-${prop}`, "");
+  props.forEach((prop) => {
+    getCustomProperties(obj, prop, true).forEach(({ property }) => {
+      if (property.startsWith(`--${prefix}-`)) {
+        const name = property
+          .replace(`--${prefix}-`, "")
+          .replace(`-${prop}`, "");
+        const customPropName = property.replace(`-${prop}`, "");
 
-				if (!deduped[name]) {
-					deduped[name] = {
-						customProp: customPropName,
-						values: [],
-					};
-				}
+        if (!deduped[name]) {
+          deduped[name] = {
+            customProp: customPropName,
+            values: [],
+          };
+        }
 
-				if (!deduped[name].values.find(({ value }) => value === property)) {
-					deduped[name].values.push({
-						label: prop,
-						value: property,
-					});
-				}
-			}
-		});
-	});
+        if (!deduped[name].values.find(({ value }) => value === property)) {
+          deduped[name].values.push({
+            label: prop,
+            value: property,
+          });
+        }
+      }
+    });
+  });
 
-	return Object.entries(deduped).sort((a, b) => {
-		const aUppercase = a[0].toUpperCase();
-		const bUppercase = b[0].toUpperCase();
+  return Object.entries(deduped).sort((a, b) => {
+    const aUppercase = a[0].toUpperCase();
+    const bUppercase = b[0].toUpperCase();
 
-		if (aUppercase > bUppercase) return 1;
-		if (aUppercase < bUppercase) return -1;
-		return 0;
-	});
+    if (aUppercase > bUppercase) return 1;
+    if (aUppercase < bUppercase) return -1;
+    return 0;
+  });
 }