Merge pull request #1 from ngcgroup/ms-do-the-things

Set up a shared stylelint config

.github/workflows/eslint.yml

@@ -0,0 +1,27 @@
+name: Linters
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@master
+
+      - uses: actions/cache@v1
+        with:
+          path: ~/.yarn-cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn Install
+        run: yarn install --cache-folder ~/.yarn-cache
+
+      - name: ESlint
+        run: yarn eslint

.github/workflows/jest.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@master
+
+      - uses: actions/cache@v1
+        with:
+          path: ~/.yarn-cache
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Yarn Install
+        run: yarn install --cache-folder ~/.yarn-cache
+
+      - name: Test
+        run: yarn test

.gitignore

@@ -0,0 +1,4 @@
+*.log
+coverage/
+node_modules/
+.envrc

README.md

@@ -9,6 +9,16 @@ $ yarn add stylelint-config-primer --repository "ngcgroup/stylelint-config-ngc#m
 
 Note: You can switch `#main` for a different hash, tag, or branch. Actually, you probably should do this.
 
+## Usage
+
+In the stylelint config file for your project, extend this configuration:
+
+```
+  {
+    "extends": "stylelint-config-ngc"
+  }
+```
+
 ## Documentation
 
 ### Plugins

__tests__/css-invalid.css

@@ -0,0 +1,3 @@
+a {
+  top: .2em;
+}

__tests__/index.test.js

@@ -0,0 +1,83 @@
+/* global beforeEach, describe, expect, it */
+'use strict'
+
+const config = require('../')
+const fs = require('fs')
+const stylelint = require('stylelint')
+
+const validCss = fs.readFileSync('./__tests__/scss-valid.scss', 'utf-8')
+const invalidCss = fs.readFileSync('./__tests__/css-invalid.css', 'utf-8')
+
+describe('flags no warnings with valid css', () => {
+  let result
+
+  beforeEach(() => {
+    result = stylelint.lint({
+      code: validCss,
+      config
+    })
+  })
+
+  it('did not error', () => {
+    return result.then((data) => expect(data.errored).toBeFalsy())
+  })
+
+  it('flags no warnings', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings).toHaveLength(0)
+    )
+  })
+})
+
+describe('flags warnings with invalid css', () => {
+  let result
+
+  beforeEach(() => {
+    result = stylelint.lint({
+      code: invalidCss,
+      config
+    })
+  })
+
+  it('did error', () => {
+    return result.then((data) => expect(data.errored).toBeTruthy())
+  })
+
+  it('flags one warning', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings).toHaveLength(1)
+    )
+  })
+
+  it('correct warning text', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings[0].text).toBe(
+        'Expected a leading zero (number-leading-zero)'
+      )
+    )
+  })
+
+  it('correct rule flagged', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings[0].rule).toBe('number-leading-zero')
+    )
+  })
+
+  it('correct severity flagged', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings[0].severity).toBe('error')
+    )
+  })
+
+  it('correct line number', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings[0].line).toBe(2)
+    )
+  })
+
+  it('correct column number', () => {
+    return result.then((data) =>
+      expect(data.results[0].warnings[0].column).toBe(8)
+    )
+  })
+})

__tests__/scss-valid.scss

@@ -0,0 +1,78 @@
+@import url(x.css);
+@import url(y.css);
+
+/**
+ * Multi-line comment
+ */
+
+.selector-1,
+.selector-2,
+.selector-3[type="text"] {
+  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
+  box-sizing: border-box;
+  color: #333;
+  display: block;
+}
+
+.selector-a,
+.selector-b:not(:first-child) {
+  padding: 10px !important;
+  top: calc(calc(1em * 2) / 3);
+}
+
+.selector-x { width: 10%; }
+.selector-y { width: 20%; }
+.selector-z { width: 30%; }
+
+.selector-w {
+  &--xyz {
+    $margin-right: 0.8rem;
+    --custom-property: 0.5em;
+    margin-left: var(--custom-property);
+    margin-right: $margin-right;
+  }
+}
+
+/* Single-line comment */
+
+@media (min-width >= 60em) {
+  .selector {
+    /* Flush to parent comment */
+    transform: translate(1, 1) scale(3);
+  }
+}
+
+@media (orientation: portrait), projection and (color) {
+  .selector-i + .selector-ii {
+    background: color(rgb(0, 0, 0) lightness(50%));
+    font-family: helvetica, "arial black", sans-serif;
+  }
+}
+
+/* Flush single line comment */
+@media
+  screen and (min-resolution: 192dpi),
+  screen and (min-resolution: 2dppx) {
+  .selector {
+    background-image:
+      repeating-linear-gradient(
+        -45deg,
+        transparent,
+        #fff 25px,
+        rgba(255, 255, 255, 1) 50px
+      );
+    box-shadow:
+      0 1px 1px #000,
+      0 1px 0 #fff,
+      2px 2px 1px 1px #ccc inset;
+    height: 10rem;
+    margin: 10px;
+    margin-bottom: 5px;
+  }
+
+  /* Flush nested single line comment */
+  .selector::after {
+    background-image: url(x.svg);
+    content: '→';
+  }
+}

index.js

@@ -0,0 +1,27 @@
+module.exports = {
+  extends: 'stylelint-config-recommended',
+  plugins: [
+    'stylelint-order',
+    'stylelint-scss'
+  ],
+  rules: {
+    'at-rule-no-unknown': null,
+    'color-named': 'never',
+    'declaration-property-unit-disallowed-list': {
+      'font-size': ['vw', 'vh', 's']
+    },
+    'no-descending-specificity': [
+      true, {
+        ignore: ['selectors-within-list'],
+        severity: 'warning'
+      }
+    ],
+    'number-leading-zero': 'always',
+    'order/order': [
+      'custom-properties',
+      'declarations'
+    ],
+    'order/properties-alphabetical-order': true,
+    'scss/at-rule-no-unknown': true
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "stylelint-config-ngc",
+  "version": "0.0.1",
+  "description": "Shareable stylelint config used by NGC's CSS",
+  "license": "MIT",
+  "main": "index.js",
+  "dependencies": {
+    "stylelint": ">= 10.0.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-order": "^4.0.0",
+    "stylelint-scss": "^3.14.2"
+  },
+  "devDependencies": {
+    "jest": "^26.4.2",
+    "standard": "*"
+  },
+  "scripts": {
+    "eslint": "standard",
+    "test": "jest"
+  }
+}