feat: add stylelint (#464)

* feat: add stylelint

* feat: add use-logical stylelint rule

* ci: update node versions to 20

* chore: remove executable bit

* feat: add remaining config files

* fix: remove unnecessary config file

* fix: use base as default stylelint cfg

* fix: add css type

* fix: update for css type

* fix: accept files and fix flag

* style: fix js

* fix: add default d2-style config

* fix: add css as autofixable type

* docs: add stylelint to readme

.github/workflows/dhis2-verify-node.yml

@@ -26,7 +26,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v2
               with:
-                  node-version: 12.x
+                  node-version: 20.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
@@ -40,7 +40,7 @@ jobs:
             - uses: actions/checkout@v2
             - uses: actions/setup-node@v2
               with:
-                  node-version: 12.x
+                  node-version: 20.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile
@@ -58,7 +58,7 @@ jobs:
                   token: ${{secrets.DHIS2_BOT_GITHUB_TOKEN}}
             - uses: actions/setup-node@v2
               with:
-                  node-version: 12.x
+                  node-version: 20.x
 
             - uses: c-hive/gha-yarn-cache@v1
             - run: yarn install --frozen-lockfile

README.md

@@ -22,8 +22,9 @@ are not necessary to explicitly install:
 
 -   [Commitlint](https://commitlint.js.org)
 -   [ESLint](https://eslint.org/)
--   [Prettier](https://prettier.io)
 -   [Husky](https://github.com/typicode/husky)
+-   [Prettier](https://prettier.io)
+-   [Stylelint](https://stylelint.io/)
 -   [ls-lint](https://ls-lint.org/)
 
 ## Usage

config/d2-style.config.js

@@ -12,6 +12,7 @@ module.exports = {
     },
     patterns: {
         js: '*.{js,jsx,ts,tsx}',
+        css: '*.css',
         text: '*.{md,json,yml,html}',
     },
 }

config/stylelint.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    plugins: ['stylelint-use-logical'],
+    rules: {
+        'csstools/use-logical': [
+            true,
+            {
+                severity: 'warning',
+            },
+        ],
+    },
+}

package.json

@@ -44,6 +44,8 @@
         "perfy": "^1.1.5",
         "prettier": "^2.4.1",
         "semver": "^7.3.5",
+        "stylelint": "^16.3.1",
+        "stylelint-use-logical": "^2.1.2",
         "yargs": "^16.2.0"
     },
     "publishConfig": {

src/commands/actions/stylelint.js

@@ -0,0 +1,34 @@
+const log = require('@dhis2/cli-helpers-engine').reporter
+const cfg = require('../../utils/config.js')
+
+exports.command = 'stylelint [type]'
+
+exports.desc = 'Add Stylelint configuration to the project.'
+
+exports.builder = (yargs) =>
+    yargs
+        .positional('type', {
+            describe: 'Configuration template for Stylelint.',
+            type: 'string',
+            default: 'base',
+        })
+        .option('overwrite', {
+            describe: 'Overwrite the existing configuration.',
+            type: 'boolean',
+        })
+
+exports.handler = (argv) => {
+    const { add, type, overwrite } = argv
+
+    log.info(`stylelint > ${add ? 'add' : 'remove'}`)
+
+    if (add) {
+        cfg.add({
+            tool: 'stylelint',
+            type: type ? type : 'base',
+            overwrite,
+        })
+    } else {
+        cfg.remove({ tool: 'stylelint', type: type ? type : 'base' })
+    }
+}

src/commands/apply.js

@@ -14,6 +14,7 @@ exports.builder = (yargs) =>
         /*
          * Only list the types that can be automatically fixed here.
          */
+        .command(require('./types/css.js'))
         .command(require('./types/javascript.js'))
         .command(require('./types/structured-text.js'))
 

src/commands/check.js

@@ -1,6 +1,7 @@
 const log = require('@dhis2/cli-helpers-engine').reporter
 const { callback } = require('@dhis2/cli-helpers-engine').exec
 const { exit } = require('@dhis2/cli-helpers-engine')
+const { handler: cssHandler } = require('./types/css.js')
 const { handler: fsHandler } = require('./types/file-system.js')
 const { handler: jsHandler } = require('./types/javascript.js')
 const { handler: textHandler } = require('./types/structured-text.js')
@@ -29,6 +30,11 @@ exports.jscmd = (yargs) =>
                 log.print('')
             }
 
+            if (argv.config.patterns.css) {
+                cssHandler(argv, statusCode)
+                log.print('')
+            }
+
             if (argv.config.patterns.text) {
                 textHandler(argv, statusCode)
                 log.print('')
@@ -56,6 +62,7 @@ exports.builder = (yargs) =>
         /*
          * Only list the types that can be checked here.
          */
+        .command(require('./types/css.js'))
         .command(require('./types/commit.js'))
         .command(require('./types/file-system.js'))
         .command(require('./types/javascript.js'))

src/commands/types/css.js

@@ -0,0 +1,85 @@
+const log = require('@dhis2/cli-helpers-engine').reporter
+const { callback: runCb } = require('@dhis2/cli-helpers-engine').exec
+const { exit } = require('@dhis2/cli-helpers-engine')
+const { prettier } = require('../../tools/prettier.js')
+const { stylelint } = require('../../tools/stylelint.js')
+const { configured } = require('../../utils/config.js')
+const { selectFiles } = require('../../utils/files.js')
+const {
+    sayFilesChecked,
+    sayNoFiles,
+} = require('../../utils/std-log-messages.js')
+
+exports.command = 'css [files..]'
+
+exports.aliases = ['css']
+
+exports.desc = 'CSS code style'
+
+exports.builder = (yargs) =>
+    yargs.positional('files', {
+        describe: '',
+        type: 'string',
+    })
+
+exports.handler = (argv, callback) => {
+    if (
+        !argv.config.patterns ||
+        (argv.config.patterns && !argv.config.patterns.css)
+    ) {
+        log.warn('No css patterns defined, please check the configuration file')
+        exit(1)
+    }
+
+    const finalStatus = callback || runCb()
+
+    const {
+        config: {
+            patterns: { css: cssPattern },
+        },
+        files,
+        staged,
+        apply,
+    } = argv
+
+    const cssFiles = selectFiles(files, cssPattern, staged)
+
+    if (cssFiles.length === 0) {
+        log.debug(sayNoFiles('css', cssPattern, staged))
+        return
+    }
+
+    if (configured('stylelint')) {
+        log.info('css > stylelint')
+        stylelint({
+            apply,
+            files: cssFiles,
+            callback: finalStatus,
+        })
+
+        if (finalStatus() === 0) {
+            log.print('All matched files pass the lint rules.')
+            log.print('')
+        }
+    } else {
+        log.log('No Stylelint configuration found')
+    }
+
+    if (configured('prettier')) {
+        log.info('css > prettier')
+        prettier({
+            apply,
+            files: cssFiles,
+            callback: finalStatus,
+        })
+    } else {
+        log.log('No Prettier configuration found')
+    }
+
+    if (!callback) {
+        log.debug(sayFilesChecked('css', cssFiles.length, apply))
+        exit(finalStatus())
+    }
+
+    return cssFiles.length
+}

src/tools/stylelint.js

@@ -0,0 +1,10 @@
+const { bin } = require('@dhis2/cli-helpers-engine').exec
+const { PACKAGE_ROOT } = require('../utils/paths.js')
+
+exports.stylelint = ({ files = [], apply = false, callback }) => {
+    const cmd = 'stylelint'
+    const cwd = PACKAGE_ROOT
+    const args = [...(apply ? ['--fix'] : []), ...files]
+
+    bin(cmd, { args, cwd }, callback)
+}

src/utils/config.js

@@ -19,11 +19,12 @@ const {
  * referenced from a template config file when installed in a project.
  */
 const packageConfigs = {
-    eslint: path.join(CONFIG_DIR, 'eslint.config.js'),
-    eslintReact: path.join(CONFIG_DIR, 'eslint-react.config.js'),
     commitlint: path.join(CONFIG_DIR, 'commitlint.config.js'),
     d2Style: path.join(CONFIG_DIR, 'd2-style.config.js'),
+    eslint: path.join(CONFIG_DIR, 'eslint.config.js'),
+    eslintReact: path.join(CONFIG_DIR, 'eslint-react.config.js'),
     prettier: path.join(CONFIG_DIR, 'prettier.config.js'),
+    stylelint: path.join(CONFIG_DIR, 'stylelint.config.js'),
 }
 
 /**
@@ -100,6 +101,7 @@ const projectConfigs = {
         ),
     },
     lslint: path.join(PROJECT_ROOT, '.ls-lint.yml'),
+    stylelint: path.join(PROJECT_ROOT, '.stylelintrc.js'),
 }
 
 /**
@@ -158,6 +160,7 @@ const templateConfigs = {
         ),
     },
     lslint: path.join(TEMPLATE_DIR, 'ls-lint-base.yml'),
+    stylelint: path.join(TEMPLATE_DIR, 'stylelint-base.js'),
 }
 
 /**

src/utils/files.js

@@ -22,6 +22,7 @@ const blacklist = [
 
 // whitelists for files
 const whitelists = {
+    css: ['.css'],
     js: ['.js', '.jsx', '.ts'],
     json: ['.json'],
     all: ['.js', '.json', '.css', '.scss', '.md', '.jsx', '.ts'],
@@ -33,6 +34,11 @@ function whitelisted(whitelist) {
     }
 }
 
+function cssFiles(arr) {
+    const whitelist = whitelisted(whitelists.css)
+    return arr.filter(whitelist)
+}
+
 function jsFiles(arr) {
     const whitelist = whitelisted(whitelists.js)
     return arr.filter(whitelist)
@@ -204,6 +210,7 @@ const relativePath = (fp) => path.relative(CONSUMING_ROOT, fp)
 
 module.exports = {
     copy,
+    cssFiles,
     deleteFile,
     jsFiles,
     jsonFiles,

templates/stylelint-base.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.stylelint],
+}