Add CSS Linting (#383)

- Add package.json files
- Add nvm config file
- Update Dev Container configuration and ignore files
- Install JS dependencies in setup script
- Add Stylelint config file
- Update workflows and Dependabot config

.devcontainer/Dockerfile

@@ -20,6 +20,7 @@ WORKDIR /workspace
 # Install system dependencies.
 RUN apt update && \
     apt install --no-install-recommends --yes \
+      curl \
       g++ \
       git \
       less \
@@ -28,6 +29,13 @@ RUN apt update && \
       && \
     rm -rf /var/lib/apt/lists/*
 
+# Install Node.js v20.x
+RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt install --no-install-recommends --yes \
+      nodejs \
+      && \
+    rm -rf /var/lib/apt/lists/*
+
 # Configure memory allocation.
 ENV LD_PRELOAD="/usr/lib/aarch64-linux-gnu/libjemalloc.so.2"
 

.devcontainer/docker-compose.yml

@@ -13,6 +13,8 @@ services:
     volumes:
       - ..:/workspace:cached
       - bundle-cache:/usr/local/bundle
+      - node_modules-cache:/workspace/node_modules
 
 volumes:
   bundle-cache:
+  node_modules-cache:

.dockerignore

@@ -2,13 +2,16 @@
 .DS_Store
 .editorconfig
 .git*
+.nvmrc
 .rspec
 .rubocop*
 .simplecov
 *.md
 /.devcontainer/
 /bin/
 /coverage/
+/node_modules/
 /spec/
 Dockerfile
 LICENSE
+package*.json

.github/dependabot.yml

@@ -13,3 +13,9 @@ updates:
       interval: "monthly"
     assignees:
       - "jgarber623"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    assignees:
+      - "jgarber623"

.github/workflows/ci.yml

@@ -11,6 +11,8 @@ concurrency:
 jobs:
   audit-ruby:
     uses: "./.github/workflows/audit-ruby.yml"
+  lint-css:
+    uses: "./.github/workflows/lint-ruby.yml"
   lint-ruby:
     uses: "./.github/workflows/lint-ruby.yml"
   test-ruby:

.github/workflows/lint-css.yml

@@ -0,0 +1,20 @@
+name: Lint CSS
+
+on:
+  pull_request:
+    paths:
+      - ".github/workflows/lint-css.yml"
+      - "**/*.scss"
+  workflow_call:
+
+jobs:
+  lint-css:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: npm
+      - run: npm ci
+      - run: npm run lint

.gitignore

@@ -2,3 +2,4 @@
 .rdbg_history
 .rubocop-https?--*
 /coverage/
+/node_modules/

.nvmrc

@@ -0,0 +1 @@
+lts/iron

assets/stylesheets/_custom-properties.scss

@@ -1,12 +1,15 @@
 :root {
+  // Typography
   --body-font: "Gentium Book Basic", serif;
   --title-font: "Alfa Slab One", serif;
 
+  // Spacing
   --spacing-tiny: 0.375rem;
   --spacing-small: 0.75rem;
   --spacing: 1.5rem;
   --spacing-large: 3rem;
 
+  // Color
   --blumline: #195b69;
   --gray: #898989;
   --pomegranate: #f44b1a;

assets/stylesheets/_elements.scss

@@ -1,16 +1,10 @@
-@-ms-viewport {
-  width: device-width;
-}
-
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
 
 html {
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
   background-color: var(--blumline);
   box-sizing: border-box;
   line-height: 1.5;
@@ -42,8 +36,8 @@ h1 {
 }
 
 pre {
-  font-family: monospace, monospace;
-  font-size: 1em;
+  font-family: monospace;
+  font-size: 1rem;
 }
 
 a {
@@ -68,8 +62,8 @@ strong {
 }
 
 kbd {
-  font-family: monospace, monospace;
-  font-size: 1em;
+  font-family: monospace;
+  font-size: 1rem;
 }
 
 img {
@@ -88,28 +82,5 @@ input {
 }
 
 button {
-  cursor: pointer;
   text-transform: none;
 }
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}

bin/setup

@@ -10,8 +10,11 @@ SCRIPT_DIR=$(cd -- "${DIRNAME}" > /dev/null 2>&1 && pwd)
 run_within_docker $@
 
 log "💎 Installing Ruby gems..."
-bundle check || bundle install --jobs=4 --retry=3
+bin/bundle check || bin/bundle install --jobs=4 --retry=3
 
-log ''
-log '✨ Done!'
-log ''
+log "📦 Installing JavaScript dependencies..."
+npm install
+
+log ""
+log "✨ Done!"
+log ""