fix: linted everything

limbo-works · Sep 23, 2024 · 06cec36 · 06cec36
1 parent 7c3ac30
commit 06cec36
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 94 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.playground/assets/js/_dream-future-theme-configuration.default.js b/.playground/assets/js/_dream-future-theme-configuration.default.js
@@ -370,9 +370,6 @@ export default defineThemeConfig({
 	},
 });
 
-
-
-
 //
 function defineThemeConfig(obj) {
 	return obj;

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,46 +2,40 @@
 
 ## [2.5.1](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/compare/v2.5.0...v2.5.1) (2024-09-05)
 
-
 ### Bug Fixes
 
-* surround font family with quotes when containing special characters ([8d6b1e0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/8d6b1e0c6b2dbcf60acb8f6d2018a8cb2a7af98b))
-* typo in `ThemeConfiguration` ([b6564e3](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/b6564e31c7b026d0e715fa496f66c676d0c808d4))
+-   surround font family with quotes when containing special characters ([8d6b1e0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/8d6b1e0c6b2dbcf60acb8f6d2018a8cb2a7af98b))
+-   typo in `ThemeConfiguration` ([b6564e3](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/b6564e31c7b026d0e715fa496f66c676d0c808d4))
 
 ## [2.5.0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/compare/v2.4.0...v2.5.0) (2024-06-04)
 
-
 ### Features
 
-* added rounding to theme configuration capabilities ([35f4e43](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/35f4e43b699f12ce3d2f6f8e123aa66cc8cfc3e5))
+-   added rounding to theme configuration capabilities ([35f4e43](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/35f4e43b699f12ce3d2f6f8e123aa66cc8cfc3e5))
 
 ## [2.4.0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/compare/v2.3.0...v2.4.0) (2024-03-28)
 
-
 ### Features
 
-* added getThemeConfiguration utility function ([6892a47](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/6892a47a889e59ec6078bb25ac4d1b71f62ab65b))
+-   added getThemeConfiguration utility function ([6892a47](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/6892a47a889e59ec6078bb25ac4d1b71f62ab65b))
 
 ## [2.3.0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/compare/v2.2.0...v2.3.0) (2024-03-07)
 
-
 ### Features
 
-* handle quotes around font family ([7ae7663](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/7ae7663396323b8b666d17ab16dfbb514be7ccc3))
-* working on the query setup ([6440374](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/64403741e6730311be485c8d9e8b91e150819c4b))
+-   handle quotes around font family ([7ae7663](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/7ae7663396323b8b666d17ab16dfbb514be7ccc3))
+-   working on the query setup ([6440374](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/64403741e6730311be485c8d9e8b91e150819c4b))
 
 ## [2.2.0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/compare/v2.1.0...v2.2.0) (2024-01-31)
 
-
 ### Features
 
-* made configs per media query possible ([22c2d66](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/22c2d66a03e8139ebcacc67a4cc7ac53393d111e))
+-   made configs per media query possible ([22c2d66](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/22c2d66a03e8139ebcacc67a4cc7ac53393d111e))
 
 ## [2.1.0](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/compare/2.0.1...v2.1.0) (2024-01-30)
 
-
 ### Features
 
-* added getThemeConfiguraitons util function ([4a7d171](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/4a7d1715aca798b9dee3fdefb17f0aa68298608c))
-* added posibility for print config ([130c1a7](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/130c1a7803642b425ebc13e2dc0387e5869c90e3))
-* added release please ([2cb2e42](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/2cb2e429e1cac55b088e156118fc443f4a4a4dfb))
+-   added getThemeConfiguraitons util function ([4a7d171](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/4a7d1715aca798b9dee3fdefb17f0aa68298608c))
+-   added posibility for print config ([130c1a7](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/130c1a7803642b425ebc13e2dc0387e5869c90e3))
+-   added release please ([2cb2e42](https://github.com/limbo-works/Limbo.Nuxt.ThemeConfiguration/commit/2cb2e429e1cac55b088e156118fc443f4a4a4dfb))
diff --git a/README.md b/README.md
@@ -4,13 +4,13 @@ The `ThemeConfiguration` component and setup for Nuxt3+ allows you to configure
 
 ## Installation
 
-``` bash
+```bash
 yarn add @limbo-works/theme-configuration
 ```
 
 Make the component globally usable by extending the layer in \`nuxt.config.js\`.
 
-``` js
+```js
 export default defineNuxtConfig({
     extends: [
         '@limbo-works/theme-configuration',
@@ -22,35 +22,35 @@ export default defineNuxtConfig({
 
 ## Using the Component
 
-``` html
+```html
 <ThemeConfiguration
-  :config="themeConfig"
-  :media="{
+	:config="themeConfig"
+	:media="{
 	print: 'print',
   }"
-  :use-theme-classes="true"
-  css-layer="layer1"
+	:use-theme-classes="true"
+	css-layer="layer1"
 >
-  <!-- Your content here -->
+	<!-- Your content here -->
 </ThemeConfiguration>
 ```
 
 Note that the component doesn't have to wrap your content and you should ever only have one on the page.
 
 ### Props:
 
-* config: The configuration object or key for the theme settings. Can be a string (matching \~/assets/js/theme-configuration.**this-name**.js) or an object.
-* media: An object of key-value pairs where the key is the media query to use and the value is the config to use for this media query.
-* useThemeClasses: Whether to use theme classes for styling. Can be a boolean or an array of theme class keys (again, matching \~/assets/js/theme-configuration.**this-name**.js). Will result in classes like `.u-theme-default`, `.u-theme-this-name`, etc..
-* cssLayer: The CSS layer to apply the theme styles to. Can be a string.
+-   config: The configuration object or key for the theme settings. Can be a string (matching \~/assets/js/theme-configuration.**this-name**.js) or an object.
+-   media: An object of key-value pairs where the key is the media query to use and the value is the config to use for this media query.
+-   useThemeClasses: Whether to use theme classes for styling. Can be a boolean or an array of theme class keys (again, matching \~/assets/js/theme-configuration.**this-name**.js). Will result in classes like `.u-theme-default`, `.u-theme-this-name`, etc..
+-   cssLayer: The CSS layer to apply the theme styles to. Can be a string.
 
 ### Slots:
 
-* Default: The content to be rendered inside the `ThemeConfiguration` component.
+-   Default: The content to be rendered inside the `ThemeConfiguration` component.
 
 ### Exposed Properties:
 
-* config: The observed data object for the theme configuration.
+-   config: The observed data object for the theme configuration.
 
 ## Utility Functions
 
@@ -64,4 +64,4 @@ Note that an array can include both strings, arrays, objects and regexp as well,
 
 ## Notes and Further Work
 
-* The documentation needs expanding.
+-   The documentation needs expanding.
diff --git a/components/ThemeConfiguration/ThemeConfiguration.vue b/components/ThemeConfiguration/ThemeConfiguration.vue
@@ -369,22 +369,22 @@ function extractFontRules(object) {
 
 				let { sm, md, lg } = subObject;
 				if (key === 'fontFamily') {
-					if (!sm.startsWith('"') && !sm.startsWith("'")) {
+					if (!sm.startsWith('"') && !sm.startsWith('\'')) {
 						if (!sm.match(/^[a-zA-Z]*$/)) {
-							sm.includes("'") && (sm = `"${sm}"`);
-							!sm.includes("'") && (sm = `'${sm}'`);
+							sm.includes('\'') && (sm = `"${sm}"`);
+							!sm.includes('\'') && (sm = `'${sm}'`);
 						}
 					}
-					if (!md.startsWith('"') && !md.startsWith("'")) {
+					if (!md.startsWith('"') && !md.startsWith('\'')) {
 						if (!md.match(/^[a-zA-Z]*$/)) {
-							md.includes("'") && (md = `"${md}"`);
-							!md.includes("'") && (md = `'${md}'`);
+							md.includes('\'') && (md = `"${md}"`);
+							!md.includes('\'') && (md = `'${md}'`);
 						}
 					}
-					if (!lg.startsWith('"') && !lg.startsWith("'")) {
+					if (!lg.startsWith('"') && !lg.startsWith('\'')) {
 						if (!lg.match(/^[a-zA-Z]*$/)) {
-							lg.includes("'") && (lg = `"${lg}"`);
-							!lg.includes("'") && (lg = `'${lg}'`);
+							lg.includes('\'') && (lg = `"${lg}"`);
+							!lg.includes('\'') && (lg = `'${lg}'`);
 						}
 					}
 				}
@@ -540,8 +540,8 @@ function extractRules(
 				typeof compConfig.value.round === 'boolean'
 					? '1px'
 					: typeof compConfig.value.round === 'number'
-					? `${compConfig.value.round}px`
-					: compConfig.value.round;
+						? `${compConfig.value.round}px`
+						: compConfig.value.round;
 
 			const roundedRules = [
 				`@supports (padding: round(1%, ${roundTo})) {`,
@@ -588,7 +588,7 @@ function makeCssText(selector, config = compConfig.value) {
 			if (typeof props.config === 'string') {
 				selectors.push(`.u-theme-${props.config}`);
 			} else if (!props.config) {
-				selectors.push(`.u-theme-default`);
+				selectors.push('.u-theme-default');
 			}
 		}
 		selector = selectors.join(', ');

diff --git a/components/ThemeConfiguration/helpers.tailwind.js b/components/ThemeConfiguration/helpers.tailwind.js
@@ -28,15 +28,14 @@ function makeThemeUtilities(config) {
 
 					for (let i = 0; i < colCounts.length; i++) {
 						for (let j = 1; j <= colCounts[i]; j++) {
-							columns[
-								`${j}/${colCounts[i]}col`
-							] = `calc(var(--theme-${sanitizeKey(
-								key
-							)}-column-of-${
-								colCounts[i]
-							}) * ${j} + var(--theme-layout-gutter, var(--theme-layout-gutter--sm)) * ${
-								j - 1
-							})`;
+							columns[`${j}/${colCounts[i]}col`] =
+								`calc(var(--theme-${sanitizeKey(
+									key
+								)}-column-of-${
+									colCounts[i]
+								}) * ${j} + var(--theme-layout-gutter, var(--theme-layout-gutter--sm)) * ${
+									j - 1
+								})`;
 						}
 					}
 
@@ -192,17 +191,14 @@ function makeThemePlugins(config) {
 			utilities[`.text-${s}`]['text-decoration'] =
 				value.textDecoration || 'none';
 
-			utilities[`.text-${s}`][
-				'font-size'
-			] = `var(--theme-fontSize-${s}, var(--theme-fontSize-${s}--sm))`;
+			utilities[`.text-${s}`]['font-size'] =
+				`var(--theme-fontSize-${s}, var(--theme-fontSize-${s}--sm))`;
 
-			utilities[`.text-${s}`][
-				'line-height'
-			] = `var(--theme-lineHeight-${s}, var(--theme-lineHeight-${s}--sm))`;
+			utilities[`.text-${s}`]['line-height'] =
+				`var(--theme-lineHeight-${s}, var(--theme-lineHeight-${s}--sm))`;
 
-			utilities[`.text-${s}`][
-				'letter-spacing'
-			] = `var(--theme-letterSpacing-${s}, var(--theme-letterSpacing-${s}--sm))`;
+			utilities[`.text-${s}`]['letter-spacing'] =
+				`var(--theme-letterSpacing-${s}, var(--theme-letterSpacing-${s}--sm))`;
 		});
 
 		response.fontStyles = function ({ addUtilities }) {

diff --git a/components/ThemeConfiguration/helpers.uno.js b/components/ThemeConfiguration/helpers.uno.js
@@ -602,10 +602,10 @@ function makeRules(config, options) {
 						)
 							? `calc(var(--theme-${sanitizeKey(
 									value
-							  )}, var(--theme-${sanitizeKey(value)}--sm)))`
+								)}, var(--theme-${sanitizeKey(value)}--sm)))`
 							: `var(--theme-${sanitizeKey(
 									value
-							  )}, var(--theme-${sanitizeKey(value)}--sm))`,
+								)}, var(--theme-${sanitizeKey(value)}--sm))`,
 						transform: transformValue(currentSelector),
 					};
 					/* eslint-enable */
@@ -697,14 +697,14 @@ function makeRules(config, options) {
 						)
 							? `calc(var(--theme-spacing-${sanitizeKey(
 									value
-							  )}, var(--theme-spacing-${sanitizeKey(
+								)}, var(--theme-spacing-${sanitizeKey(
 									value
-							  )}--sm)))`
+								)}--sm)))`
 							: `var(--theme-spacing-${sanitizeKey(
 									value
-							  )}, var(--theme-spacing-${sanitizeKey(
+								)}, var(--theme-spacing-${sanitizeKey(
 									value
-							  )}--sm))`,
+								)}--sm))`,
 						transform: transformValue(currentSelector),
 					};
 					/* eslint-enable */
@@ -737,14 +737,14 @@ function makeRules(config, options) {
 						)
 							? `calc(var(--theme-horizontalSpacing-${sanitizeKey(
 									value
-							  )}, var(--theme-horizontalSpacing-${sanitizeKey(
+								)}, var(--theme-horizontalSpacing-${sanitizeKey(
 									value
-							  )}--sm)))`
+								)}--sm)))`
 							: `var(--theme-horizontalSpacing-${sanitizeKey(
 									value
-							  )}, var(--theme-horizontalSpacing-${sanitizeKey(
+								)}, var(--theme-horizontalSpacing-${sanitizeKey(
 									value
-							  )}--sm))`,
+								)}--sm))`,
 						transform: transformValue(currentSelector),
 					};
 					/* eslint-enable */
@@ -777,14 +777,14 @@ function makeRules(config, options) {
 						)
 							? `calc(var(--theme-verticalSpacing-${sanitizeKey(
 									value
-							  )}, var(--theme-verticalSpacing-${sanitizeKey(
+								)}, var(--theme-verticalSpacing-${sanitizeKey(
 									value
-							  )}--sm)))`
+								)}--sm)))`
 							: `var(--theme-verticalSpacing-${sanitizeKey(
 									value
-							  )}, var(--theme-verticalSpacing-${sanitizeKey(
+								)}, var(--theme-verticalSpacing-${sanitizeKey(
 									value
-							  )}--sm))`,
+								)}--sm))`,
 						transform: transformValue(currentSelector),
 					};
 					/* eslint-enable */
@@ -815,15 +815,13 @@ function makeRules(config, options) {
 						const property = textPropertyMap[key];
 						if (config[key]?.[value]) {
 							if (key === 'paragraphSpacing') {
-								_return[
-									property
-								] = `var(--theme-${key}-${sanitizeKey(
-									value
-								)}, 0)`;
+								_return[property] =
+									`var(--theme-${key}-${sanitizeKey(
+										value
+									)}, 0)`;
 							} else {
-								_return[
-									property
-								] = `var(--theme-${key}-${sanitizeKey(value)})`;
+								_return[property] =
+									`var(--theme-${key}-${sanitizeKey(value)})`;
 							}
 						} else {
 							if (key === 'paragraphSpacing') {

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,2 @@
+import config from './node_modules/@limbo-works/lint-configs/eslint.config.mjs';
+export default [...config];
diff --git a/utils/get-theme-configuration.js b/utils/get-theme-configuration.js
@@ -47,15 +47,21 @@ function getSubsetOfObject(obj, subset) {
 					const isRegExp = new RegExp('^/(.*?)/([gimy]*)$');
 					if (isRegExp.test(key)) {
 						// The key is a regex
-						const regExp = new RegExp(isRegExp.exec(key)[1], isRegExp.exec(key)[2]);
+						const regExp = new RegExp(
+							isRegExp.exec(key)[1],
+							isRegExp.exec(key)[2]
+						);
 						for (const objKey in obj) {
 							if (regExp.test(objKey)) {
 								if (typeof value === 'boolean') {
 									// We just want to include it all
 									newObj[objKey] = obj[objKey];
 								} else {
 									// We have nested subsets!
-									newObj[objKey] = getSubsetOfObject(obj[objKey], value);
+									newObj[objKey] = getSubsetOfObject(
+										obj[objKey],
+										value
+									);
 								}
 							}
 						}
@@ -76,7 +82,11 @@ function getSubsetOfObject(obj, subset) {
 
 	// Remove undefined values and empty objects
 	for (const key in newObj) {
-		if (newObj[key] === undefined || (typeof newObj[key] === 'object' && Object.keys(newObj[key]).length === 0)) {
+		if (
+			newObj[key] === undefined ||
+			(typeof newObj[key] === 'object' &&
+				Object.keys(newObj[key]).length === 0)
+		) {
 			delete newObj[key];
 		}
 	}

diff --git a/utils/get-theme-configurations.js b/utils/get-theme-configurations.js
@@ -1,6 +1,6 @@
 export default async function getThemeConfigurations() {
 	const configGlobs = import.meta.glob(
-		`~/assets/js/theme-configuration.*.(js|cjs|mjs)`,
+		'~/assets/js/theme-configuration.*.(js|cjs|mjs)',
 		{ as: 'json' }
 	);