Lint CSS

Author: oskarrough

bun.lockb

@@ -3,8 +3,17 @@ import globals from 'globals'
 import js from '@eslint/js'
 import prettier from 'eslint-plugin-prettier'
 import eslintConfigPrettier from 'eslint-config-prettier'
+import css from '@eslint/css'
 
 export default defineConfig([
+	// Lint CSS
+	{
+		files: ['src/**/*.css'],
+		plugins: { css },
+		language: 'css/css'
+	},
+
+	// Lint javascripts
 	{
 		files: ['src/**/*.{js,mjs,cjs}'],
 		languageOptions: {globals: globals.browser},
@@ -14,8 +23,9 @@ export default defineConfig([
 			'no-undef': 'warn',
 		},
 	},
+
+	// Prettier
 	{
-		// Apply Prettier only to files in src directory
 		files: ['src/**/*.{js,mjs,cjs}'],
 		plugins: {
 			prettier: prettier
@@ -24,6 +34,7 @@ export default defineConfig([
 			'prettier/prettier': 'error'
 		}
 	},
-	// This disables rules that conflict with Prettier globally
+
+	// Disable rules that conflict with Prettier globally
 	eslintConfigPrettier
 ])

eslint.config.js

@@ -18,6 +18,7 @@
     "release": "release-it"
   },
   "devDependencies": {
+    "@eslint/css": "^0.6.0",
     "@eslint/js": "^9.23.0",
     "astro": "5.5.4",
     "ava": "^6.2.0",

package.json

@@ -22,4 +22,3 @@ export const createTestDungeon = () => {
 	dungeon.graph[3][0].room = MonsterRoom(Monster({hp: 42, intents}))
 	return dungeon
 }
-

src/content/dungeons.js

@@ -69,9 +69,11 @@ export default class SplashScreen extends Component {
 					<ul class="Options">
 						${location.hash
 							? html`
-								<li>Found a saved game. <button autofocus onClick=${this.props.onContinue}>Continue?</button></li>
-								<li><button onClick=${() => this.props.onNewGame()}>New Game</button></li>
-					`
+									<li>
+										Found a saved game. <button autofocus onClick=${this.props.onContinue}>Continue?</button>
+									</li>
+									<li><button onClick=${() => this.props.onNewGame()}>New Game</button></li>
+								`
 							: html`
 									<li><button autofocus onClick=${() => this.props.onNewGame()}>Play</button></li>
 									<li><button onClick=${this.startDeckSelection}>Custom Game</button></li>

src/ui/components/splash-screen.js

@@ -499,10 +499,10 @@ h2 {
 }
 
 .Form {
-	:is(p) {
+	& :is(p) {
 		font-size: smaller;
 	}
-	:is(input) {
+	& :is(input) {
 		padding: 0.25rem;
 		margin-top: 0.25rem;
 		margin-bottom: 0.25rem;
@@ -511,7 +511,7 @@ h2 {
 .Form--vertical {
 	display: flex;
 	flex-direction: column;
-	:is(input) {
+	& :is(input) {
 		width: 100%;
 	}
 }

src/ui/styles/app.css

@@ -5,15 +5,18 @@
 	justify-content: center;
 	min-height: var(--card-height);
 }
+
 .Cards .Card {
 	width: var(--card-width);
 	height: var(--card-height);
 	flex-shrink: 1;
 }
+
 .Cards--grid {
 	flex-wrap: wrap;
 	gap: 0.5rem;
 }
+
 .Cards--mini {
 	--card-height: 11rem;
 	/* --card-width: 13rem; */
@@ -22,42 +25,41 @@
 	/* gap: 0; */
 	/* grid-template-columns: repeat(auto-fill, minmax(min(var(--column-width), 100%), 1fr)); */
 
-
-	.Card-name {
+	& .Card-name {
 		font-size: 1rem;
 	}
-	.Card-description {
+
+	& .Card-description {
 		font-size: 0.75rem;
 	}
 
-	.Card-media img {
+	& .Card-media img {
 		height: 50px;
 	}
 }
+
 .Cards--withUpgrades {
-	> div {
+	&>div {
 		display: flex;
 		flex-flow: column wrap;
 	}
 
-	.Card {
-		height: 100%;
+	& > div:hover .Card:not([data-card-upgraded]) {
+		display: none;
 	}
 
-	.Card:not([data-card-upgraded]) {
+	& > div:hover .Card[data-card-upgraded] {
+		display: flex;
 	}
-	.Card[data-card-upgraded] {
-		display: none;
+
+	& .Card {
+		height: 100%;
 	}
 
-	> div:hover {
-		.Card:not([data-card-upgraded]) {
-			display: none;
-		}
-		.Card[data-card-upgraded] {
-			display: flex;
-		}
+	& .Card[data-card-upgraded] {
+		display: none;
 	}
+
 }
 
 .Card {
@@ -73,6 +75,7 @@
 	image-rendering: -moz-crisp-edges;
 	image-rendering: pixelated;
 }
+
 .Card-inner {
 	width: 100%;
 	flex: 1;
@@ -82,23 +85,27 @@
 	color: var(--text);
 	text-align: center;
 }
+
 .Card-media {
 	margin: 0;
 	border-bottom: 2px solid #2a3335;
 	background: #111;
 }
+
 .Card-media img {
 	display: block;
 	width: 100%;
 	height: 120px;
 	object-fit: cover;
 	object-position: center top;
 }
+
 @media (max-height: 500px) {
 	.Card-media img {
 		height: 70px;
 	}
 }
+
 .Card-name {
 	margin: 0.5rem 0;
 	padding: 0.5rem 0 0.1rem;
@@ -107,6 +114,7 @@
 	background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.2), transparent); */
 	user-select: none;
 }
+
 .Card-type {
 	margin: -0.75rem auto 0;
 	padding: 2px 5px 4px;
@@ -118,9 +126,11 @@
 	border-bottom-width: 2px;
 	border-radius: 0.4em;
 }
+
 .Card[data-card-type='attack'] .Card-type {
 	background: hsl(0deg 33% 19%);
 }
+
 .Card-description {
 	font-size: 0.875rem;
 	padding-left: 0.2em;
@@ -129,6 +139,7 @@
 	margin: 0;
 	line-height: 1.2;
 }
+
 .Card-energy {
 	position: absolute;
 	top: -1.3em;
@@ -139,6 +150,7 @@
 	box-shadow: none;
 	border-width: 0.15rem;
 }
+
 .Hand .Card[disabled] .EnergyBadge {
 	color: #fb1515;
 	background-color: hsl(0deg 73% 25%);
@@ -148,14 +160,14 @@
 	display: flex;
 	flex-flow: column;
 
-	stw-card + button {
+	& stw-card+button {
 		margin: 0 auto;
 		font-size: 1rem;
 		position: relative;
 		top: -1rem;
 	}
 
-	stw-card + button:active:not([disabled]) {
+	& stw-card+button:active:not([disabled]) {
 		top: calc(-1rem + 2px);
 	}
 }