Start testing against a sample

To keep up to date with dependencies, it's really hard to know we've
done it correctly without some tests and samples to check against.

This provides a sample (from guides), with which we can test against in
both the positive and negative cases, we include a GitHub Actions
configuration too, so tests are automated.

https://github.com/thoughtbot/guides/tree/main/sass

Co-authored-by: Luke Mitchell <LkeMitchll@users.noreply.github.com>

.github/workflows/tests.yml

@@ -0,0 +1,18 @@
+---
+name: Tests
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm test
+

__tests__/index.test.mjs

@@ -0,0 +1,72 @@
+import { beforeEach, describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+
+import stylelint from 'stylelint';
+
+import config from '../index.js';
+
+describe('rules', () => {
+  const ruleNames = Object.keys(config.rules);
+
+  it('is not empty', () => {
+    assert.ok(ruleNames.length > 0);
+  });
+
+  for (const ruleName of ruleNames) {
+    it(`${ruleName}`, async () => {
+      const rule = await stylelint.rules[ruleName];
+
+      assert.ok(!rule.meta.deprecated, `the ${ruleName} rule is deprecated`);
+    });
+  }
+})
+
+describe('with the valid example', () => {
+  const sampleScss = fs.readFileSync('./__tests__/valid.scss', 'utf-8');
+  let result;
+
+  beforeEach(async () => {
+    result = await stylelint.lint({
+      code: sampleScss,
+      config,
+    });
+  });
+
+  it('does not error', () => {
+    assert.equal(result.errored, false);
+  });
+
+  it('has no warnings', () => {
+    assert.equal(result.results[0].warnings.length, 0);
+  });
+});
+
+describe('with the invalid example', () => {
+  const sampleScss = fs.readFileSync('./__tests__/invalid.scss', 'utf-8');
+  let result;
+
+  beforeEach(async () => {
+    result = await stylelint.lint({
+      code: sampleScss,
+      config,
+    });
+  });
+
+  it('do error', () => {
+    assert.equal(result.errored, true);
+  });
+
+  it('has the correct amount of warnings', () => {
+    assert.equal(result.results[0].warnings.length, 1);
+  });
+
+  it('flags the correct rules', () => {
+    assert.deepEqual(
+      result.results[0].warnings.map((w) => w.rule),
+      [
+        'color-hex-length',
+      ],
+    );
+  });
+});

__tests__/invalid.scss

@@ -0,0 +1 @@
+$color-variable: #fff;

__tests__/valid.scss

@@ -0,0 +1,51 @@
+@import "partial-name";
+
+$color-variable: #ffffff;
+
+/* I'm here to explain what this class does */
+.class-one {
+  background-color: $color-variable;
+  border: 0;
+  line-height: 1.5;
+  text-size: 0.5rem;
+  transition: background-color 0.5s ease;
+
+  @media (width >= 1px) {
+    margin: ($spacing-variable * 2) 1rem;
+  }
+
+  &:hover {
+    box-shadow: 0 0 2px 1px rgba($color-variable, 0.2);
+  }
+
+  &::before {
+    content: "hello";
+  }
+}
+
+$map: (
+  "key-1": value-1,
+  "key-2": value-2,
+);
+
+.class-two {
+  @extend %placeholder;
+  @include mixin;
+
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+
+  a {
+    text-decoration: none;
+
+    &:focus,
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &.child {
+    color: $red;
+  }
+}

index.js

@@ -1,9 +1,8 @@
 module.exports = {
-  "extends": "stylelint-config-recommended",
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-recommended"],
   "plugins": [
     "stylelint-declaration-block-no-ignored-properties",
     "stylelint-order",
-    "stylelint-scss"
   ],
   "rules": {
     "at-rule-no-unknown": null,