Migrate from LESS to SCSS for preprocessing

.eslintrc.cjs

@@ -1,42 +1,52 @@
 /** @type {import('eslint').Linter.Config & typeof import('@typescript-eslint/eslint-plugin')} */
 module.exports = {
-  root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ],
-  parser: '@typescript-eslint/parser',
-  /** @type {import('@typescript-eslint/parser').ParserOptions} */
-  parserOptions: {
-    ecmaVersion: 11,
-    sourceType: 'module',
-  },
-  env: {
-    browser: true,
-    es2020: true,
-    node: true,
-  },
-  plugins: ['@typescript-eslint'],
-  rules: {
-    '@typescript-eslint/no-unused-vars': [1, { argsIgnorePattern: '^_' }],
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-empty-interface': 'off',
-    '@typescript-eslint/consistent-type-imports': [
-      'warn',
-      { prefer: 'type-imports' },
-    ],
-  },
-  overrides: [
-    {
-      files: ['*.js', '*.cjs'],
-      rules: {
-        '@typescript-eslint/no-var-requires': 'off',
-        // so it doesn't complain about imported jsdoc type annotations
-        '@typescript-eslint/consistent-type-imports': 'off',
-      },
-    },
-  ],
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'standard-with-typescript',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:vue/vue3-recommended',
+		'prettier'
+	],
+	parser: 'vue-eslint-parser',
+	ignorePatterns: ['.eslintrc.cjs'],
+	parserOptions: {
+		parser: '@typescript-eslint/parser',
+		ecmaVersion: 11,
+		sourceType: 'module'
+	},
+	env: {
+		browser: true,
+		es2020: true,
+		node: true
+	},
+	plugins: ['@typescript-eslint'],
+	rules: {
+		'@typescript-eslint/no-unused-vars': [1, { argsIgnorePattern: '^_' }],
+		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'@typescript-eslint/ban-ts-comment': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'@typescript-eslint/no-empty-interface': 'off',
+		'@typescript-eslint/consistent-type-imports': [
+			'warn',
+			{ prefer: 'type-imports' }
+		],
+
+		// FIXME: part of standard-ts. not an awful idea, but it's not doable via autofix, so it's disabled for now
+		'@typescript-eslint/explicit-function-return-type': 'off'
+	},
+	overrides: [
+		{
+			files: ['*.ts', '*.js', '*.cjs'],
+			parserOptions: { project: './tsconfig.json' }
+		},
+		{
+			files: ['*.js', '*.cjs'],
+			rules: {
+				'@typescript-eslint/no-var-requires': 'off',
+				// so it doesn't complain about imported jsdoc type annotations
+				'@typescript-eslint/consistent-type-imports': 'off'
+			}
+		}
+	]
 }

.gitignore

@@ -1,7 +1,9 @@
 # IDE
 .idea/
 .vs/
-.vscode/
+.vscode/*
+# allow extension recommendations
+!/.vscode/extensions.json
 
 # Node Modules
 node_modules/

.prettierignore

@@ -1 +1,2 @@
-.github/pull_request_template.md
+.github/pull_request_template.md
+dist

.prettierrc.cjs

@@ -1,9 +1,8 @@
+const prettier = require('prettier-config-standard')
+
 /** @type {import('prettier').Config} */
 module.exports = {
-  trailingComma: 'es5',
-  tabWidth: 2,
-  semi: false,
-  singleQuote: true,
-  endOfLine: 'lf',
-  printWidth: 80,
+	...prettier,
+	// spaces are crappy for accessibility: https://adamtuttle.codes/blog/2021/tabs-vs-spaces-its-an-accessibility-issue/
+	useTabs: true
 }

.stylelintignore

@@ -1,3 +1,5 @@
 *.*
 !src/styles/**/*.less
+!src/styles/**/*.scss
+!src/styles/**/*.pcss
 !src/module/vue/**/*.vue

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.19.1

.vscode/extensions.json

@@ -0,0 +1,16 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"stylelint.vscode-stylelint",
+		"vue.volar",
+		"vunguyentuan.vscode-css-variables",
+		"mrmlnc.vscode-scss"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": []
+}

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Next Release
 
+- Under the hood: Major styling refactor to replace LESS preprocessor with SCSS/SASS, which supports more robust tooling, including much better support from Stylelint ([#567](https://github.com/ben/foundry-ironsworn/issues/567), [#568](https://github.com/ben/foundry-ironsworn/pull/568))
+  - Adds opinionated Stylelint rules for property ordering, variable usage, class naming, etc. We have a _lot_ of styling to manage, and hopefully this will make it a bit easier to maintain.
+  - Much of what `palettize.less` did is now written in Typescript for use as a custom SASS plugin. This lets us use `chroma.js` for better colour mixing, and lays the groundwork for generating color themes on the fly.
 - Replace the delve theme/domain sheet with a vue implementation ([#677](https://github.com/ben/foundry-ironsworn/pull/677))
 - Disable chat-message copy buttons (and add a tooltip) if access to the clipboard is restricted ([#678](https://github.com/ben/foundry-ironsworn/pull/678))