Meta: Prettier

.eslintrc

@@ -0,0 +1,14 @@
+{
+	"extends": ["prettier"],
+	"plugins": ["prettier", "@typescript-eslint"],
+	"rules": {
+		"@typescript-eslint/no-unused-vars": [
+			"warn",
+			{
+				"argsIgnorePattern": "^_",
+				"varsIgnorePattern": "^_",
+				"caughtErrorsIgnorePattern": "^_"
+			}
+		]
+	}
+}

.prettierrc

@@ -1,3 +1,5 @@
 {
+	"semi": false,
+	"tabWidth": 4,
 	"useTabs": true
 }

package.json

@@ -11,18 +11,20 @@
 		"pub:fractures": "pnpm publish --access public --filter fractures",
 		"pub:library": "pnpm publish --access public --filter library",
 		"pub:utils": "pnpm publish --access public --filter utils",
-		"fractures:build": "pnpm run --filter fractures build"
+		"prettier:write": "prettier --no-semi --use-tabs --write ./packages/**"
 	},
 	"workspaces": [
 		"packages/*"
 	],
 	"dependencies": {},
 	"devDependencies": {
+		"@typescript-eslint/eslint-plugin": "latest",
 		"@types/node": "latest",
 		"@types/react": "latest",
 		"@vitest/coverage-v8": "latest",
 		"eslint": "latest",
-		"eslint-config-next": "latest",
+		"eslint-config-prettier": "latest",
+		"eslint-plugin-prettier": "latest",
 		"jsdom": "latest",
 		"prettier": "latest",
 		"typescript": "latest",

packages/fractures/src/build.ts

@@ -1,51 +1,51 @@
-import { borderRadius } from "./rules/border-radius";
-import { config } from "./root.config";
-import { cursor } from "./rules/cursor";
-import { display } from "./rules/display";
-import { easings } from "./root.easings";
-import { flex } from "./rules/flex";
-import { generateOutput } from "./generators";
-import { grid } from "./rules/grid";
-import { height } from "./rules/height";
-import { list } from "./rules/list";
-import { margin } from "./rules/margin";
-import { opacity } from "./rules/opacity";
-import { overflow } from "./rules/overflow";
-import { padding } from "./rules/padding";
-import { position } from "./rules/position";
-import { reset } from "./root.reset";
-import { type } from "./rules/type";
-import { width } from "./rules/width";
-import { writeFile } from "./utils";
-import type { FractureFiles } from "./types/meta";
+import { borderRadius } from "./rules/border-radius"
+import { config } from "./root.config"
+import { cursor } from "./rules/cursor"
+import { display } from "./rules/display"
+import { easings } from "./root.easings"
+import { flex } from "./rules/flex"
+import { generateOutput } from "./generators"
+import { grid } from "./rules/grid"
+import { height } from "./rules/height"
+import { list } from "./rules/list"
+import { margin } from "./rules/margin"
+import { opacity } from "./rules/opacity"
+import { overflow } from "./rules/overflow"
+import { padding } from "./rules/padding"
+import { position } from "./rules/position"
+import { reset } from "./root.reset"
+import { type } from "./rules/type"
+import { width } from "./rules/width"
+import { writeFile } from "./utils"
+import type { FractureFiles } from "./types/meta"
 
 export const fractureFiles: FractureFiles = {
-  borderRadius,
-  cursor,
-  display,
-  flex,
-  grid,
-  height,
-  list,
-  margin,
-  opacity,
-  overflow,
-  padding,
-  position,
-  type,
-  width,
-};
+	borderRadius,
+	cursor,
+	display,
+	flex,
+	grid,
+	height,
+	list,
+	margin,
+	opacity,
+	overflow,
+	padding,
+	position,
+	type,
+	width,
+}
 
 // generates standalone versions, each containing only their specific parts.
 // TODO this can be just a copy.
-writeFile('dist/fractures.reset.css', reset);
-writeFile('dist/fractures.config.css', config);
-writeFile('dist/fractures.easings.css', easings);
+writeFile("dist/fractures.reset.css", reset)
+writeFile("dist/fractures.config.css", config)
+writeFile("dist/fractures.easings.css", easings)
 
 // generates the default bundle.
-generateOutput(fractureFiles, config + reset, "dist/fractures.min.css");
+generateOutput(fractureFiles, config + reset, "dist/fractures.min.css")
 
 // generates set of files, eg.: `@heliosgraphics/fractures/dist/set/flex.css`
-Object.entries(fractureFiles).forEach(rules => {
-  generateOutput(rules[1], '', `dist/set/${rules[0]}.css`);
+Object.entries(fractureFiles).forEach((rules) => {
+	generateOutput(rules[1], "", `dist/set/${rules[0]}.css`)
 })

packages/fractures/src/generators.spec.ts

@@ -1,11 +1,13 @@
-import { it, describe, expect } from 'vitest';
-import { _generateRule } from './generators'
-import type { FractureRuleType } from "./types/meta";
+import { it, describe, expect } from "vitest"
+import { _generateRule } from "./generators"
+import type { FractureRuleType } from "./types/meta"
 
 const MOCK_RULE: FractureRuleType = {
-  selector: 'bg-gray-0',
-  declarations: { backgroundColor: 'hsla(var(--hsl-gray-0), var(--bg-opacity))' },
-  variables: { '--bg-opacity': 1 }
+	selector: "bg-gray-0",
+	declarations: {
+		backgroundColor: "hsla(var(--hsl-gray-0), var(--bg-opacity))",
+	},
+	variables: { "--bg-opacity": 1 },
 }
 
 const MOCK_EXPECTED = `.bg-gray-0 {
@@ -14,6 +16,7 @@ background-color: hsla(var(--hsl-gray-0), var(--bg-opacity));
 }
 `
 
-describe('generateRules', () => {
-  it('Generates a sample selector', () => expect(_generateRule(MOCK_RULE)).toEqual(MOCK_EXPECTED));
-});
+describe("generateRules", () => {
+	it("Generates a sample selector", () =>
+		expect(_generateRule(MOCK_RULE)).toEqual(MOCK_EXPECTED))
+})

packages/fractures/src/generators.ts

@@ -1,58 +1,61 @@
-import type { FractureRuleType, FractureFiles } from "./types/meta";
-import { writeFile } from "./utils";
+import type { FractureRuleType, FractureFiles } from "./types/meta"
+import { writeFile } from "./utils"
 
 // Generates all the rules for the declarations
-export const _generateRule = (
-  fractureRule: FractureRuleType
-): string => {
-  const declarations: Array<[string, string]> = Object.entries(fractureRule.declarations || {})
-  const variables: Array<[string, string]> = Object.entries(fractureRule.variables || {})
-  const hasMultipleDeclarations: boolean = (declarations.length + variables.length) > 1
-
-  const declarationSpace: string = hasMultipleDeclarations ? "\n" : ""
-  const declarationOutput: string = declarations
-    .map((prop) => {
-      const property: string = prop[0].replace(
-        /[A-Z]/g,
-        (letter) => `-${letter.toLowerCase()}`
-      );
-
-      return `${property}: ${prop[1]};`
-    })
-    .join(declarationSpace)
-
-  const variablesOutput = variables.map(variable => `${variable[0]}: ${variable[1]};`)
-  const rule: string = `${fractureRule.selector} {${declarationSpace}${variablesOutput}${declarationSpace}${declarationOutput}${declarationSpace}}`;
-  const selector: string = `.${rule}\n`
-
-  return selector;
-};
-
-export const _generateRules = (
-  rules: Array<FractureRuleType>
-): string => {
-  let css: string = "";
-
-  rules.forEach((rule: FractureRuleType) => {
-    css += _generateRule(rule);
-  });
-
-  return css;
-};
+export const _generateRule = (fractureRule: FractureRuleType): string => {
+	const declarations: Array<[string, string]> = Object.entries(
+		fractureRule.declarations || {},
+	)
+	const variables: Array<[string, string]> = Object.entries(
+		fractureRule.variables || {},
+	)
+	const hasMultipleDeclarations: boolean =
+		declarations.length + variables.length > 1
+
+	const declarationSpace: string = hasMultipleDeclarations ? "\n" : ""
+	const declarationOutput: string = declarations
+		.map((prop) => {
+			const property: string = prop[0].replace(
+				/[A-Z]/g,
+				(letter) => `-${letter.toLowerCase()}`,
+			)
+
+			return `${property}: ${prop[1]};`
+		})
+		.join(declarationSpace)
+
+	const variablesOutput = variables.map(
+		(variable) => `${variable[0]}: ${variable[1]};`,
+	)
+	const rule: string = `${fractureRule.selector} {${declarationSpace}${variablesOutput}${declarationSpace}${declarationOutput}${declarationSpace}}`
+	const selector: string = `.${rule}\n`
+
+	return selector
+}
+
+export const _generateRules = (rules: Array<FractureRuleType>): string => {
+	let css: string = ""
+
+	rules.forEach((rule: FractureRuleType) => {
+		css += _generateRule(rule)
+	})
+
+	return css
+}
 
 // Generates a new fractures file
 export const generateOutput = (
-  files: FractureFiles,
-  init: string,
-  folder: string
+	files: FractureFiles,
+	init: string,
+	folder: string,
 ) => {
-  const rules = Object.values(files).flatMap(x => x);
-  const css: string = `
+	const rules = Object.values(files).flatMap((x) => x)
+	const css: string = `
 		${init}
     ${_generateRules(rules)}
-	`;
+	`
 
-  const fractures: string = css.replace(/\s/g, "")
+	const fractures: string = css.replace(/\s/g, "")
 
-  return writeFile(folder, fractures);
-};
+	return writeFile(folder, fractures)
+}

packages/fractures/src/root.config.ts

@@ -267,4 +267,4 @@ export const config: string = `:root {
 	--aqua-700: hsla(var(--hsl-aqua-700, 1));
 	--aqua-800: hsla(var(--hsl-aqua-800, 1));
 	--aqua-900: hsla(var(--hsl-aqua-900, 1));
-}`;
+}`

packages/fractures/src/root.easings.ts

@@ -30,4 +30,4 @@ export const easings: string = `:root {
 	--easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
 	--easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 	--easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}`;
+}`

packages/fractures/src/root.reset.ts

@@ -34,4 +34,4 @@ ol {
 
 img { max-width: 100%; }
 sub { vertical-align: sub; }
-sup { vertical-align: super; }`;
+sup { vertical-align: super; }`

packages/fractures/src/rules/border-radius.ts

@@ -1,14 +1,14 @@
-import type { FractureRuleType } from "../types/meta";
+import type { FractureRuleType } from "../types/meta"
 
 export const borderRadius: Array<FractureRuleType> = [
-  { selector: "radius-1", declarations: { borderRadius: "var(--box-1)" } },
-  { selector: "radius-2", declarations: { borderRadius: "var(--box-2)" } },
-  { selector: "radius-3", declarations: { borderRadius: "var(--box-3)" } },
-  { selector: "radius-4", declarations: { borderRadius: "var(--box-4)" } },
-  { selector: "radius-5", declarations: { borderRadius: "var(--box-5)" } },
-  { selector: "radius-6", declarations: { borderRadius: "var(--box-6)" } },
-  { selector: "radius-7", declarations: { borderRadius: "var(--box-7)" } },
-  { selector: "radius-8", declarations: { borderRadius: "var(--box-8)" } },
-  { selector: "radius-100", declarations: { borderRadius: "100%" } },
-  { selector: "radius-max", declarations: { borderRadius: "9999px" } },
-];
+	{ selector: "radius-1", declarations: { borderRadius: "var(--box-1)" } },
+	{ selector: "radius-2", declarations: { borderRadius: "var(--box-2)" } },
+	{ selector: "radius-3", declarations: { borderRadius: "var(--box-3)" } },
+	{ selector: "radius-4", declarations: { borderRadius: "var(--box-4)" } },
+	{ selector: "radius-5", declarations: { borderRadius: "var(--box-5)" } },
+	{ selector: "radius-6", declarations: { borderRadius: "var(--box-6)" } },
+	{ selector: "radius-7", declarations: { borderRadius: "var(--box-7)" } },
+	{ selector: "radius-8", declarations: { borderRadius: "var(--box-8)" } },
+	{ selector: "radius-100", declarations: { borderRadius: "100%" } },
+	{ selector: "radius-max", declarations: { borderRadius: "9999px" } },
+]

packages/fractures/src/rules/cursor.ts

@@ -1,17 +1,20 @@
-import type { FractureRuleType } from "../types/meta";
+import type { FractureRuleType } from "../types/meta"
 
 export const cursor: Array<FractureRuleType> = [
-  { selector: 'no-pointer-events', declarations: { pointerEvents: 'none' } },
-  { selector: 'cursor-context-menu', declarations: { cursor: 'context-menu' } },
-  { selector: 'cursor-crosshair', declarations: { cursor: 'crosshair' } },
-  { selector: 'cursor-grab', declarations: { cursor: 'grab' } },
-  { selector: 'cursor-grabbing', declarations: { cursor: 'grabbing' } },
-  { selector: 'cursor-help', declarations: { cursor: 'help' } },
-  { selector: 'cursor-move', declarations: { cursor: 'move' } },
-  { selector: 'cursor-pointer', declarations: { cursor: 'pointer' } },
-  { selector: 'cursor-progress', declarations: { cursor: 'progress' } },
-  { selector: 'cursor-text', declarations: { cursor: 'text' } },
-  { selector: 'cursor-wait', declarations: { cursor: 'wait' } },
-  { selector: 'cursor-zoom-in', declarations: { cursor: 'zoom-in' } },
-  { selector: 'cursor-zoom-out', declarations: { cursor: 'zoom-out' } },
-];
+	{ selector: "no-pointer-events", declarations: { pointerEvents: "none" } },
+	{
+		selector: "cursor-context-menu",
+		declarations: { cursor: "context-menu" },
+	},
+	{ selector: "cursor-crosshair", declarations: { cursor: "crosshair" } },
+	{ selector: "cursor-grab", declarations: { cursor: "grab" } },
+	{ selector: "cursor-grabbing", declarations: { cursor: "grabbing" } },
+	{ selector: "cursor-help", declarations: { cursor: "help" } },
+	{ selector: "cursor-move", declarations: { cursor: "move" } },
+	{ selector: "cursor-pointer", declarations: { cursor: "pointer" } },
+	{ selector: "cursor-progress", declarations: { cursor: "progress" } },
+	{ selector: "cursor-text", declarations: { cursor: "text" } },
+	{ selector: "cursor-wait", declarations: { cursor: "wait" } },
+	{ selector: "cursor-zoom-in", declarations: { cursor: "zoom-in" } },
+	{ selector: "cursor-zoom-out", declarations: { cursor: "zoom-out" } },
+]