@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/exports/v1/constants-colors.less.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../../test/less-test-utils";
+
+describe("constants-colors", () => {
+    it("should output all the css generated by the v1 colors/theming generation mixins", async () => {
+        const css = await renderLess(`
+            @import "./lib/exports/v1/constants-colors.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/stacks-static.less

@@ -56,6 +56,11 @@
 // LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
 
+//  --  ATOMIC CLASSES (v1 colors)
+@import "atomic/v1/border.less"; // Deprecated
+@import "atomic/v1/color.less"; // Deprecated
+@import "atomic/v1/typography.less"; // Deprecated
+
 //  --  ATOMIC CLASSES
 @import "atomic/border.less";
 @import "atomic/color.less";

package/lib/test/less-test-utils.ts

@@ -0,0 +1,28 @@
+import beautify from "cssbeautify";
+import * as less from "less";
+import * as path from "path";
+import * as fs from "fs";
+
+// cssbeautify is an old package that doesn't support ES modules
+const cssbeautify = beautify as (css: string) => string;
+
+const getSubdirectories = (dirPath: string): string[] => {
+    const subdirs = fs
+        .readdirSync(dirPath)
+        .map((file) => path.join(dirPath, file))
+        .filter((path) => fs.statSync(path).isDirectory());
+    return subdirs.reduce(
+        (acc, subdir) => [...acc, subdir, ...getSubdirectories(subdir)],
+        subdirs
+    );
+};
+
+const renderLess = async (lessCode: string) => {
+    const { css } = await less.render(lessCode, {
+        paths: getSubdirectories(path.join(__dirname, "../")),
+    });
+
+    return cssbeautify(css);
+};
+
+export { renderLess };

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "1.10.3",
+    "version": "2.0.0-rc.1",
     "files": [
         "dist",
         "lib"
@@ -22,12 +22,14 @@
         "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
         "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
         "start:eleventy": "cd ./docs && eleventy --serve",
-        "test": "npm run test:unit && npm run test:a11y && npm run test:visual",
+        "test": "npm run test:less && npm run test:unit && npm run test:a11y && npm run test:visual",
         "test:a11y": "web-test-runner --group=a11y",
         "test:unit": "web-test-runner --group=unit",
         "test:unit:watch": "web-test-runner --group=unit --watch",
         "test:visual": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual",
         "test:visual:update": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual --update-visual-baseline",
+        "test:less": "vitest run .less.test.ts",
+        "test:less:update": "npm run test:less -- -u",
         "prepublishOnly": "npm run build",
         "format": "prettier --write ./lib",
         "lint": "concurrently -n w: npm:lint:*",
@@ -37,7 +39,7 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@hotwired/stimulus": "^3.2.2",
+        "@hotwired/stimulus": "^3.2.1",
         "@popperjs/core": "^2.11.8"
     },
     "devDependencies": {
@@ -50,6 +52,8 @@
         "@stackoverflow/stacks-icons": "^5.5.0",
         "@testing-library/dom": "^9.3.1",
         "@testing-library/user-event": "^14.4.3",
+        "@types/cssbeautify": "^0.3.2",
+        "@types/less": "^3.0.3",
         "@typescript-eslint/eslint-plugin": "^6.4.0",
         "@typescript-eslint/parser": "^6.4.0",
         "@web/dev-server-esbuild": "^0.4.1",
@@ -60,12 +64,13 @@
         "apca-w3": "^0.1.9",
         "concurrently": "^8.2.0",
         "css-loader": "^6.8.1",
+        "cssbeautify": "^0.3.1",
         "cssnano": "^6.0.1",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.47.0",
-        "eslint-config-prettier": "^9.0.0",
+        "eslint": "^8.45.0",
+        "eslint-config-prettier": "^8.9.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
         "jquery": "^3.7.0",
         "less-loader": "^11.1.3",
@@ -74,14 +79,15 @@
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.3",
-        "prettier": "^3.0.2",
+        "prettier": "^3.0.1",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^15.10.3",
+        "stylelint": "^15.10.2",
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-standard": "^34.0.0",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.4.4",
         "typescript": "^5.1.6",
+        "vitest": "^0.33.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.9.0"