Merge pull request #3 from basher/remove-sass

Replace Sass with vanilla CSS

.vscode/settings.json

@@ -1,10 +1,9 @@
 {
     "eslint.workingDirectories": [ "./ui" ],
     "css.validate": false,
-    "scss.validate": false,
     "stylelint.enable": true,
     "stylelint.validate": [
-        "scss",
+        "css",
         "postcss",
     ],
 }

README.md

@@ -1,6 +1,6 @@
 # Web UI Boilerplate
 Accessible UI boilerplate and component library for websites/webapps.
-- Built with semantic HTML, CSS (Sass), native Web Components, vanilla JavaScript (TypeScript) and ARIA.
+- Built with semantic HTML, CSS, native Web Components, vanilla JavaScript (TypeScript) and ARIA.
 - Powered by Storybook.
 - Bundled by Parcel.
 

ui/.stylelintrc

@@ -1,6 +1,6 @@
 {
     "extends": [
-        "stylelint-config-recommended-scss",
+        "stylelint-config-standard",
         "stylelint-prettier/recommended"
     ],
     "plugins": [
@@ -29,7 +29,14 @@
             }
         ],
         "selector-max-id": 0,
-        "scss/operator-no-unspaced": null,
-        "scss/comment-no-empty": null
+        "comment-empty-line-before": [
+            "always",
+            {
+                "ignore": ["after-comment", "stylelint-commands"],
+                "except": ["first-nested"]
+            }
+        ],
+        "import-notation": "string",
+        "hue-degree-notation": "number"
     }
 }

ui/package.json

@@ -2,7 +2,7 @@
     "name": "web-ui-boilerplate",
     "description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
     "author": "basher",
-    "version": "3.1.25",
+    "version": "4.0.0",
     "license": "ISC",
     "repository": {
         "type": "git",
@@ -36,7 +36,6 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.13.14",
         "@etchteam/storybook-addon-status": "^4.2.4",
-        "@parcel/transformer-sass": "^2.11.0",
         "@storybook/addon-a11y": "^8.0.2",
         "@storybook/addon-docs": "^8.0.2",
         "@storybook/addon-essentials": "^8.0.2",
@@ -47,23 +46,22 @@
         "@typescript-eslint/eslint-plugin": "^5.41.0",
         "@typescript-eslint/parser": "^5.41.0",
         "cheerio": "^1.0.0-rc.11",
-        "eslint": "^7.24.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-prettier": "^4.2.1",
+        "eslint": "^8.57.1",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-prettier": "^5.2.1",
         "fs-extra": "^10.1.0",
         "husky": "^8.0.3",
         "lint-staged": "^13.2.3",
-        "parcel": "^2.11.0",
+        "parcel": "^2.12.0",
         "postcss": "^8.4.18",
-        "prettier": "^2.7.1",
+        "prettier": "^3.3.3",
         "remark-gfm": "^4.0.0",
         "sass-export": "^2.1.2",
         "storybook": "^8.0.2",
-        "stylelint": "^14.14.0",
-        "stylelint-config-prettier": "^9.0.3",
-        "stylelint-config-recommended-scss": "^8.0.0",
-        "stylelint-order": "^5.0.0",
-        "stylelint-prettier": "^2.0.0",
+        "stylelint": "^16.10.0",
+        "stylelint-config-standard": "^36.0.1",
+        "stylelint-order": "^6.0.4",
+        "stylelint-prettier": "^5.0.2",
         "typescript": "^4.8.4"
     },
     "dependencies": {
@@ -74,8 +72,8 @@
             "eslint --fix",
             "prettier --write"
         ],
-        "src/**/*.scss": [
-            "stylelint --custom-syntax postcss-scss",
+        "src/**/*.css": [
+            "stylelint",
             "prettier --write"
         ]
     }

ui/src/css/base/colors-to-json.scss

@@ -2,7 +2,7 @@
 ----------------------------------------------------------------------------
 Color settings.
 
-1. Copied from the CSS Custom properties in 'base/colors.css', and converted to Sass variables.
+1. Copied from the CSS Custom properties in 'base/colors.css', and converted to Sass variables, replacing '--' with '$'.
 2. The 'sass-export' Node package then correctly exports all the colors as JSON for consumption by Storybook.
 3. This file is NOT imported and is NOT part of the Parcel build.
 
@@ -13,20 +13,25 @@ TODO:
 /**
 * @sass-export-section="main theme colours"
 */
-$color-primary: hsl(var(--color-brand));
+$color-primary-100: hsl(var(--webui-color-brand) / 20%);
+$color-primary-500: hsl(var(--webui-color-brand));
 
 /**
 * @sass-export-section="neutral colours"
 */
-$color-background: hsl(var(--color-neutral-100));
-$color-neutral-light: hsl(var(--color-neutral-200));
-$color-text: hsl(var(--color-neutral-700));
-$color-neutral-dark: hsl(var(--color-neutral-900));
+$color-background: hsl(var(--webui-color-neutral-100));
+$color-neutral-light: hsl(var(--webui-color-neutral-200));
+$color-neutral-medium: hsl(var(--webui-color-neutral-500));
+$color-text: hsl(var(--webui-color-neutral-700));
+$color-neutral-dark: hsl(var(--webui-color-neutral-900));
 
 /**
 * @sass-export-section="other accent colours"
 */
-$color-success: hsl(var(--color-accent-positive));
-$color-error: hsl(var(--color-accent-negative));
-$color-notify: hsl(var(--color-accent-neutral));
-$color-focus: hsl(var(--color-focused));
+$color-success-100: hsl(var(--webui-color-accent-positive) / 10%);
+$color-success-500: hsl(var(--webui-color-accent-positive));
+$color-error-100: hsl(var(--webui-color-accent-negative) / 10%);
+$color-error-500: hsl(var(--webui-color-accent-negative));
+$color-notify-100: hsl(var(--webui-color-accent-neutral) / 10%);
+$color-notify-500: hsl(var(--webui-color-accent-neutral));
+$color-focus: hsl(var(--webui-color-state-focused));

ui/src/css/base/colors.css

@@ -0,0 +1,39 @@
+/*
+----------------------------------------------------------------------------
+Color settings.
+
+1. Copy the CSS custom properties inside the ':root {}' ruleset, along with their JSDoc comments, into 'base/colors-to-json.scss'.
+2. Replace '--' with '$'.
+3. The 'sass-export' Node package then correctly exports all the colors as JSON for consumption by Storybook.
+
+TODO:
+- Write custom Node script to convert these values into JSON without the manual copy/paste step into a Sass file.
+----------------------------------------------------------------------------
+*/
+:root {
+    /**
+    * @sass-export-section="main theme colours"
+    */
+    --color-primary-100: hsl(var(--webui-color-brand) / 20%);
+    --color-primary-500: hsl(var(--webui-color-brand));
+
+    /**
+    * @sass-export-section="neutral colours"
+    */
+    --color-background: hsl(var(--webui-color-neutral-100));
+    --color-neutral-light: hsl(var(--webui-color-neutral-200));
+    --color-neutral-medium: hsl(var(--webui-color-neutral-500));
+    --color-text: hsl(var(--webui-color-neutral-700));
+    --color-neutral-dark: hsl(var(--webui-color-neutral-900));
+
+    /**
+    * @sass-export-section="other accent colours"
+    */
+    --color-success-100: hsl(var(--webui-color-accent-positive) / 10%);
+    --color-success-500: hsl(var(--webui-color-accent-positive));
+    --color-error-100: hsl(var(--webui-color-accent-negative) / 10%);
+    --color-error-500: hsl(var(--webui-color-accent-negative));
+    --color-notify-100: hsl(var(--webui-color-accent-neutral) / 10%);
+    --color-notify-500: hsl(var(--webui-color-accent-neutral));
+    --color-focus: hsl(var(--webui-color-state-focused));
+}

ui/src/css/base/_config.scss → ui/src/css/base/config.css

@@ -3,17 +3,16 @@
 Config settings.
 ----------------------------------------------------------------------------
 */
-@use 'colors' as *;
 :root {
     /* Layout. */
     --site-max-width: null;
 
     /* Spacing and gutters. Use for margin|padding, and gap in flex|grid layouts. */
-    --gutter-xs: var(--space-2xs-xs);
-    --gutter-s: var(--space-xs-s);
-    --gutter-m: var(--space-s-m);
-    --gutter-l: var(--space-m-l);
-    --gutter-xl: var(--space-l-xl);
+    --gutter-xs: var(--webui-space-2xs-xs);
+    --gutter-s: var(--webui-space-xs-s);
+    --gutter-m: var(--webui-space-s-m);
+    --gutter-l: var(--webui-space-m-l);
+    --gutter-xl: var(--webui-space-l-xl);
 
     /* :focus-visible.
         - Uses transparent outline so high contrast mode works.

ui/src/css/base/index.css

@@ -0,0 +1,3 @@
+@import 'colors.css';
+@import 'config.css';
+@import 'type.css';

ui/src/css/base/_type.scss → ui/src/css/base/type.css

@@ -4,13 +4,6 @@ Typography settings.
 ----------------------------------------------------------------------------
 */
 
-/*
-----------------------------------------------------------------------------
-Dependencies.
-----------------------------------------------------------------------------
-*/
-@use 'colors' as *;
-
 /*
 ----------------------------------------------------------------------------
 Font-face rules.
@@ -20,30 +13,29 @@ Font-face rules.
 */
 @font-face {
     font-display: swap;
-    font-family: 'robotolight';
+    font-family: robotolight;
     font-style: normal;
     font-weight: normal;
-    src: url('../fonts/roboto-light/roboto-light.woff') format('woff');
+    src: url('../../fonts/roboto-light/roboto-light.woff') format('woff');
 }
 
 :root {
-    --base-font-family: var(--type-font-family), var(--type-font-fallback);
-    --base-font-family-title: var(--type-font-family-title),
-        var(--type-font-fallback);
-    --base-font-family-monospace: var(--type-font-family-monospace);
-
+    --base-font-family: var(--webui-font-family), var(--webui-font-fallback);
+    --base-font-family-title: var(--webui-font-family-title),
+        var(--webui-font-fallback);
+    --base-font-family-monospace: var(--webui-font-family-monospace);
     --base-font-size: 100%;
     --base-font-size-2k: 110%; /* 2K screens */
     --base-font-size-4k: 200%; /* 4K screens */
-
-    --font-size-body: var(--type-step-0);
-    --font-size-s: var(--type-step--1);
-    --font-size-h5: var(--type-step-1);
-    --font-size-h4: var(--type-step-2);
-    --font-size-h3: var(--type-step-3);
-    --font-size-h2: var(--type-step-4);
-    --font-size-h1: var(--type-step-5);
-    --font-size-xl: var(--type-step-6);
+    --font-size-body: var(--webui-step-0);
+    /* stylelint-disable-next-line custom-property-pattern */
+    --font-size-s: var(--webui-step--1);
+    --font-size-h5: var(--webui-step-1);
+    --font-size-h4: var(--webui-step-2);
+    --font-size-h3: var(--webui-step-3);
+    --font-size-h2: var(--webui-step-4);
+    --font-size-h1: var(--webui-step-5);
+    --font-size-xl: var(--webui-step-6);
 
     /* Only adjust line-height when fonts get large */
     --base-line-height: 1.5;