Start testing against a sample (#51)

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.

In our sample, we have `text-size` which doesn't exist in our current
version of `stylelint`. We'll remove this rule in future, as for now, we
override it to ensure the tests start from green.

Finally, we add `lint:css` as a script to npm to allow for "self-linting"
and testing the samples.

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,25 @@
+---
+name: Test & Lint
+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
+
+  lint-css:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+      - run: npm ci
+      - run: npm run lint:css

.stylelintignore

@@ -0,0 +1 @@
+__tests__/invalid.scss

__tests__/index.test.mjs

@@ -0,0 +1,109 @@
+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);
+  });
+})
+
+describe('with the valid example', () => {
+  const validScss = fs.readFileSync('./__tests__/valid.scss', 'utf-8');
+  let result;
+
+  beforeEach(async () => {
+    result = await stylelint.lint({
+      code: validScss,
+      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 invalidScss = fs.readFileSync('./__tests__/invalid.scss', 'utf-8');
+  let result;
+
+  beforeEach(async () => {
+    result = await stylelint.lint({
+      code: invalidScss,
+      config,
+    });
+  });
+
+  it('errors', () => {
+    assert.equal(result.errored, true);
+  });
+
+  it('has the correct amount of warnings', () => {
+    assert.equal(result.results[0].warnings.length, 46);
+  });
+
+  it('flags the correct rules', () => {
+    assert.deepEqual(
+      result.results[0].warnings.map((w) => w.rule),
+      [
+        'order/properties-alphabetical-order',
+        'order/properties-alphabetical-order',
+        'order/properties-alphabetical-order',
+        'order/properties-alphabetical-order',
+        'order/properties-alphabetical-order',
+        'order/properties-alphabetical-order',
+        'scss/dollar-variable-colon-space-after',
+        'scss/map-keys-quotes',
+        'scss/no-duplicate-dollar-variables',
+        'scss/dollar-variable-empty-line-before',
+        'block-closing-brace-empty-line-before',
+        'block-no-empty',
+        'block-opening-brace-space-before',
+        'color-hex-case',
+        'color-hex-case',
+        'color-hex-length',
+        'color-named',
+        'color-named',
+        'comment-whitespace-inside',
+        'comment-whitespace-inside',
+        'declaration-block-no-redundant-longhand-properties',
+        'declaration-block-semicolon-newline-before',
+        'declaration-block-semicolon-space-before',
+        'declaration-block-trailing-semicolon',
+        'declaration-block-trailing-semicolon',
+        'declaration-empty-line-before',
+        'declaration-empty-line-before',
+        'declaration-no-important',
+        'declaration-property-unit-allowed-list',
+        'declaration-property-value-disallowed-list',
+        'max-empty-lines',
+        'max-empty-lines',
+        'max-nesting-depth',
+        'no-empty-first-line',
+        'property-no-unknown',
+        'property-no-vendor-prefix',
+        'selector-list-comma-newline-after',
+        'selector-list-comma-space-before',
+        'selector-max-id',
+        'selector-max-id',
+        'selector-pseudo-element-case',
+        'selector-pseudo-element-colon-notation',
+        'unit-case',
+        'indentation',
+        'indentation',
+        'indentation',
+      ],
+    );
+  });
+});

__tests__/invalid.scss

@@ -0,0 +1,54 @@
+
+
+  @import "partial-name";
+
+/*I'm here to explain what this class does*/
+$color-variable: #EEEEEE;
+$color-variable: #FFFFFF;
+$color-variable2:#fff;
+
+.class-one {}
+
+.class-two{
+  -webkit-transition: all 4s ease;
+  color: red !important;
+  text-color: blue;
+  display: block ;
+  padding-top: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+
+  line-height: 10px;
+
+
+  background-color: $color-variable;
+  margin: 10px
+
+  article {
+    div {
+      p {
+        a {
+          color: #000000;
+        }
+      }
+  }
+  }
+
+}
+$map: (
+  key1: value-1,
+  "key-2": value-2,
+);
+
+.button ,button {
+  border-radius: 3px;
+}
+
+#button {
+  border-radius: 6PX;
+
+  &:BEFORE {
+    content: "+"
+  }
+}

__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,
@@ -53,6 +52,14 @@ module.exports = {
     "order/properties-alphabetical-order": true,
     "plugin/declaration-block-no-ignored-properties": true,
     "property-case": "lower",
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": [
+          "text-size"
+        ]
+      }
+    ],
     "property-no-vendor-prefix": true,
     "rule-empty-line-before": [
       "always",