chore: Update tooling + fix lint issues (#658)

.eslintrc.cjs

@@ -2,15 +2,13 @@ const OFF = 0;
 const WARN = 1;
 const ERROR = 2;
 
-// TODO: Types
-// eslint-disable-next-line max-len
 // /** @type {import('eslint/lib/shared/types').ConfigData & { parserOptions: import('@typescript-eslint/types').ParserOptions }} */
 module.exports = {
   root: true,
   reportUnusedDisableDirectives: true,
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: ['./tsconfig.lint.json'],
+    project: ['./tsconfig.lint.json', './packages/*/tsconfig.json'],
     tsconfigRootDir: __dirname,
   },
   extends: [
@@ -21,10 +19,13 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:unicorn/recommended',
+    'prettier',
   ],
+  plugins: ['prettier'],
   rules: {
     '@typescript-eslint/explicit-module-boundary-types': ERROR,
     'import/prefer-default-export': OFF,
+    'prettier/prettier': WARN,
     'unicorn/filename-case': OFF,
     'unicorn/no-abusive-eslint-disable': WARN,
     'unicorn/no-null': OFF,
@@ -33,7 +34,7 @@ module.exports = {
     'unicorn/prefer-module': OFF,
     'unicorn/prefer-node-protocol': OFF,
     'unicorn/prefer-query-selector': OFF,
-    'unicorn/prefer-string-replace-all': OFF,
+    'unicorn/prefer-string-replace-all': OFF, // requires node v15+ but we loosely support v12
     'unicorn/prevent-abbreviations': OFF,
     'unicorn/switch-case-braces': [ERROR, 'avoid'],
   },

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "rohit-gohri.format-code-action",
     "stylelint.vscode-stylelint"
   ]
 }

.vscode/settings.json

@@ -1,7 +1,13 @@
 {
   "css.validate": false,
-  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": false,
+  "editor.formatOnSave": true,
+  "editor.formatOnType": false,
+  "eslint.lintTask.options": "--ignore-path .gitignore",
   "files.associations": {
     "*.xcss": "scss"
   },
@@ -11,34 +17,16 @@
   "scss.validate": false,
   "stylelint.validate": ["css", "scss"],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "[css]": {
-    "editor.formatOnSave": false,
-    "editor.codeActionsOnSave": [
-      "source.formatDocument",
-      "source.fixAll.stylelint"
-    ]
-  },
   "[javascript]": {
-    "editor.formatOnSave": false,
-    "editor.codeActionsOnSave": [
-      "source.sortImports",
-      "source.formatDocument",
-      "source.fixAll.eslint"
-    ]
-  },
-  "[scss]": {
-    "editor.formatOnSave": false,
-    "editor.codeActionsOnSave": [
-      "source.formatDocument",
-      "source.fixAll.stylelint"
-    ]
+    "editor.codeActionsOnSave": {
+      "source.sortImports": true,
+      "source.fixAll": true
+    }
   },
   "[typescript]": {
-    "editor.formatOnSave": false,
-    "editor.codeActionsOnSave": [
-      "source.sortImports",
-      "source.formatDocument",
-      "source.fixAll.eslint"
-    ]
+    "editor.codeActionsOnSave": {
+      "source.sortImports": true,
+      "source.fixAll": true
+    }
   }
 }

package.json

@@ -26,7 +26,6 @@
     "postcss-ekscss": "workspace:*",
     "prettier": "2.8.8",
     "prettier-plugin-pkg": "0.17.1",
-    "prettier-plugin-sh": "0.12.8",
     "stylelint": "15.6.2",
     "stylelint-config-standard": "33.0.0",
     "tsm": "2.3.0",
@@ -51,12 +50,12 @@
     "singleQuote": true,
     "trailingComma": "all",
     "plugins": [
-      "./node_modules/prettier-plugin-pkg",
-      "./node_modules/prettier-plugin-sh"
+      "prettier-plugin-pkg"
     ],
     "overrides": [
       {
         "files": [
+          "*.spec.ts",
           "*.test.tsx",
           "*.test.ts"
         ],
@@ -76,18 +75,15 @@
     "ignoreFiles": [
       "**/dist/**",
       "**/node_modules/**",
-      "packages/framework/test/**",
       "packages/framework/addon/alert.xcss",
       "packages/framework/addon/ux-larger-click-zone.xcss",
       "packages/framework/level1/type.xcss",
-      "packages/framework/level2/color.xcss",
       "packages/framework/level2/display.xcss",
       "packages/framework/level2/flex.xcss",
       "packages/framework/level2/form.xcss",
       "packages/framework/level2/grid.xcss",
       "packages/framework/level2/postition.xcss",
-      "packages/framework/level2/spacing.xcss",
-      "packages/framework/level2/utils.xcss"
+      "packages/framework/level2/spacing.xcss"
     ],
     "rules": {
       "import-notation": null

packages/ekscss/src/helpers.ts

@@ -109,7 +109,6 @@ export function accessorsProxy<
         return accessorsProxy(new UndefinedProperty(), propPath);
       }
 
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
       return Reflect.get(target, prop, receiver);
     },
 

packages/ekscss/src/index.ts

@@ -1,5 +1,3 @@
 export { compile, onAfterBuild, onBeforeBuild } from './compiler';
-export {
-  accessorsProxy, ctx, interpolate, xcss,
-} from './helpers';
+export { accessorsProxy, ctx, interpolate, xcss } from './helpers';
 export * from './types';

packages/ekscss/src/sourcemap.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line max-len
 /* eslint-disable no-cond-assign, no-param-reassign, no-plusplus, no-restricted-syntax, no-underscore-dangle, unicorn/no-array-callback-reference, unicorn/no-array-reduce */
 
 // TODO: Documentation:
@@ -42,12 +41,12 @@ function extractSourceMapRef(ast: Element[]): string | null {
   // look through the last 3 AST nodes to try find a source map ref comment
   while (++index < 4 && (currentNode = ast[ast.length - index])) {
     if (
-      currentNode.type === stylis.COMMENT
+      currentNode.type === stylis.COMMENT &&
       // FIXME: stylis types don't differentiate by Element.type so we must
       // type guard unnecessarily (even though currentNode.type=='comm' will
       // always have currentNode.children as a string)
-      && typeof currentNode.children === 'string'
-      && currentNode.children.indexOf('# sourceMappingURL=') === 0
+      typeof currentNode.children === 'string' &&
+      currentNode.children.indexOf('# sourceMappingURL=') === 0
     ) {
       // 19 = '# sourceMappingURL='.length
       return currentNode.children.slice(19).trim();

packages/ekscss/test/compile.test-raw.js

@@ -25,7 +25,8 @@ const complexCodeFixture = `
     .\${name} { color: \${value}; }
   \`)}
 `;
-const complexCodeResult = 'body{font-size:20px;color:coral;}.red{color:coral;}.green{color:seagreen;}.blue{color:deepskyblue;}';
+const complexCodeResult =
+  'body{font-size:20px;color:coral;}.red{color:coral;}.green{color:seagreen;}.blue{color:deepskyblue;}';
 
 test('bundled compiler runs with empty code', () => {
   const compiled = ekscssBundle.compile('');

packages/ekscss/test/compile.test.ts

@@ -30,7 +30,8 @@ const complexCodeFixture = `
     .\${name} { color: \${value}; }
   \`)}
 `;
-const complexCodeResult = 'body{font-size:20px;color:coral;}.red{color:coral;}.green{color:seagreen;}.blue{color:deepskyblue;}';
+const complexCodeResult =
+  'body{font-size:20px;color:coral;}.red{color:coral;}.green{color:seagreen;}.blue{color:deepskyblue;}';
 
 test('returns expected result with empty code', () => {
   const compiled = compile('');

packages/esbuild-plugin-ekscss/src/index.ts

@@ -12,7 +12,8 @@ export const xcss = (config?: string | XCSSConfig): Plugin => ({
   name: 'xcss',
 
   setup(build) {
-    const reBadValue = /UNDEFINED|INVALID|#apply:|null|undefined|NaN|\[object \w+]/;
+    const reBadValue =
+      /UNDEFINED|INVALID|#apply:|null|undefined|NaN|\[object \w+]/;
     const joycon = new JoyCon({
       files: [
         '.xcssrc.cjs',

packages/framework/config.js

@@ -210,9 +210,10 @@ module.exports = {
       groupMargin: '1rem',
       helpMargin: (x) => x.input.paddingY,
       helpTextColor: (x) => x.color.dark3,
-      selectCaret: (x) => `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='${encodeURIComponent(
-        xcss`${x.color.text}`,
-      )}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")`,
+      selectCaret: (x) =>
+        `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='${encodeURIComponent(
+          xcss`${x.color.text}`,
+        )}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")`,
       checkboxSize: '1.4rem',
       checkboxBorder: (x) => xcss`2px solid ${x.color.gray3}`,
       checkboxRadius: (x) => x.input.radius,
@@ -314,7 +315,8 @@ module.exports = {
       hoverHoverShadow: (x) => x.color.shadow,
       bodyMargin: '1.2rem 2rem',
       buttonTextColor: 'inherit',
-      buttonBorder: (x) => xcss`1px solid ${x.fn.color(x.color.light3).alpha(0.5)}`,
+      buttonBorder: (x) =>
+        xcss`1px solid ${x.fn.color(x.color.light3).alpha(0.5)}`,
     },
 
     /* Addon: code.xcss */

packages/framework/test/test-imported.xcss

@@ -1,3 +1,6 @@
+// FIXME: REMOVE THIS FILE; DEV ONLY!!
+/* stylelint-disable */
+
 // IMPORTED
 
 body {

packages/framework/test/test.xcss

@@ -1,4 +1,5 @@
 // FIXME: REMOVE THIS FILE; DEV ONLY!!
+/* stylelint-disable */
 
 ${null}
 

packages/framework/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "node",
     "rootDir": ".",
-    "outDir": ".",
     "noEmit": false
   },
-  "include": ["./config.js", "./utils.js"]
+  "include": ["config.js", "utils.js"]
 }

packages/framework/xcss.config.js

@@ -18,8 +18,9 @@ let bundleName;
 
 onBeforeBuild(() => {
   if (ctx.from) {
-    bundleName = (ctx.from.includes('/addon/') ? 'addon/' : '')
-      + path.basename(ctx.from, '.xcss');
+    bundleName =
+      (ctx.from.includes('/addon/') ? 'addon/' : '') +
+      path.basename(ctx.from, '.xcss');
 
     // pre-populate applyPlugin ctx.applyRefs for #apply in addon/native.xcss
     if (ctx.from.endsWith('framework/addon/native.xcss')) {

packages/plugin-import/src/index.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-param-reassign, no-underscore-dangle */
 
-import {
-  ctx, interpolate, xcss, type Element, type Middleware,
-} from 'ekscss';
+import { ctx, interpolate, xcss, type Element, type Middleware } from 'ekscss';
 import fs from 'fs';
 import path from 'path';
 import * as stylis from 'stylis';

packages/postcss-ekscss/modules.d.ts

@@ -23,7 +23,12 @@ declare module 'postcss/lib/parser' {
     atrule(token: Token): void;
 
     init(node: Node, offset?: number): void;
-    raw(node: Node, prop: string, tokens: Token[]): void;
+    raw(
+      node: Node,
+      prop: string,
+      tokens: Token[],
+      customProperty: boolean,
+    ): void;
     spacesAndCommentsFromStart(tokens: Token[]): string;
     spacesFromEnd(tokens: Token[]): string;
     stringFrom(tokens: Token[], from: number): string;

packages/postcss-ekscss/src/nested-declaration.ts

@@ -1,11 +1,11 @@
-// Based on https://github.com/postcss/postcss-scss/blob/ea0a76007c0d16b4eab946b1e3faa31a7dd9041b/lib/nested-declaration.js
+// Based on https://github.com/postcss/postcss-scss/blob/f540beae6530b7c9632f954e4d6915359a54f25f/lib/nested-declaration.js
 
 import { Container } from 'postcss';
 
 export class NestedDeclaration extends Container {
   declare isNested: boolean;
 
-  constructor(defaults?: Record<string, any>) {
+  constructor(defaults?: Record<string, unknown>) {
     super(defaults);
     this.type = 'decl';
     this.isNested = true;

packages/postcss-ekscss/src/parser.ts

@@ -1,4 +1,4 @@
-// Based on https://github.com/postcss/postcss-scss/blob/c021e2350b328ef1b78841307b9aa03d174abbbb/lib/scss-parser.js
+// Based on https://github.com/postcss/postcss-scss/blob/f540beae6530b7c9632f954e4d6915359a54f25f/lib/scss-parser.js
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
@@ -193,8 +193,13 @@ export class XCSSParser extends Parser {
     super.atrule(['at-word', name, token[2], prev[3]]);
   }
 
-  override raw(node: AnyNode, prop: string, tokens: Token[]): string | void {
-    super.raw(node, prop, tokens);
+  override raw(
+    node: AnyNode,
+    prop: string,
+    tokens: Token[],
+    customProperty: boolean,
+  ): string | void {
+    super.raw(node, prop, tokens, customProperty);
 
     if (node.raws[prop]) {
       const xcss = node.raws[prop].raw;

packages/postcss-ekscss/src/stringifier.ts

@@ -1,4 +1,4 @@
-// Based on https://github.com/postcss/postcss-scss/blob/ea0a76007c0d16b4eab946b1e3faa31a7dd9041b/lib/scss-stringifier.js
+// Based on https://github.com/postcss/postcss-scss/blob/f540beae6530b7c9632f954e4d6915359a54f25f/lib/scss-stringifier.js
 
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */