feat: add stylelint-plugin (#115)

.changeset/big-ties-melt.md

@@ -0,0 +1,8 @@
+---
+'@sourcegraph/eslint-plugin-sourcegraph': patch
+'@sourcegraph/stylelint-plugin-sourcegraph': patch
+'@sourcegraph/codemod-toolkit-css': patch
+'@sourcegraph/codemod-transforms': patch
+---
+
+Upgraded `stylelint` version.

package.json

@@ -16,7 +16,7 @@
     "format:check": "yarn format --write=false",
     "lint": "eslint --ignore-pattern 'demo-app' --cache .",
     "build": "tsc --build",
-    "build:clean": "tsc --build --clean && rimraf ./packages/*/dist ./packages/*/*.tsbuildinfo",
+    "build:clean": "tsc --build --clean && rimraf ./packages/*/dist ./packages/*/*.tsbuildinfo && yarn build",
     "build:watch": "tsc --build --watch",
     "postinstall": "yarn build"
   },
@@ -42,7 +42,7 @@
     "postcss-selector-parser": "^6.0.6",
     "prettier-eslint": "^13.0.0",
     "signale": "^1.4.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "^14.3.0",
     "ts-morph": "14.0.0",
     "ts-node": "^10.1.0",
     "type-fest": "^2.8.0",
@@ -62,7 +62,7 @@
     "@types/jest": "27.0.2",
     "@types/node": "16.11.26",
     "@types/signale": "1.4.4",
-    "@types/stylelint": "13.13.3",
+    "@types/stylelint": "14.0.0",
     "eslint": "^7.32.0",
     "husky": "^7.0.1",
     "jest": "^27.0.6",

packages/eslint-plugin/jest.config.ts

@@ -4,7 +4,7 @@ import baseConfig from '../../jest.config.base'
 
 const config: InitialOptionsTsJest = {
     ...baseConfig,
-    displayName: 'codemod-eslint-plugin',
+    displayName: 'eslint-plugin',
     rootDir: __dirname,
 }
 

packages/stylelint-plugin/README.md

@@ -0,0 +1,27 @@
+# stylelint-plugin-sourcegraph
+
+Recommended Stylelint rules for the Sourcegraph repo.
+
+## Setup
+
+Update your `.stylelintrc.json` file to add the following configuration:
+
+```json
+{
+  "plugins": ["@sourcegraph/stylelint-plugin-sourcegraph"],
+  "rules": {
+    "@sourcegraph/filenames-match-regex": [
+      2,
+      {
+        "regexp": "^.+\\.module(\\.scss)$"
+      }
+    ],
+    "@sourcegraph/no-restricted-imports": [
+      2,
+      {
+        "paths": ["bootstrap*", "reactstrap/styles.css"]
+      }
+    ]
+  }
+}
+```

packages/stylelint-plugin/jest.config.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
+import type { InitialOptionsTsJest } from 'ts-jest'
+
+import baseConfig from '../../jest.config.base'
+
+const stylelintPreset = require('jest-preset-stylelint/jest-preset')
+const tsPreset = require('ts-jest/jest-preset')
+
+const config: InitialOptionsTsJest = {
+    ...baseConfig,
+    ...tsPreset,
+    ...stylelintPreset,
+    displayName: 'stylelint-plugin',
+    rootDir: __dirname,
+    setupFiles: ['./jest.setup.ts'],
+}
+
+// eslint-disable-next-line import/no-default-export
+export default config

packages/stylelint-plugin/jest.setup.ts

@@ -0,0 +1,5 @@
+import path from 'path'
+
+import { getTestRule } from 'jest-preset-stylelint'
+
+global.testRule = getTestRule({ plugins: [path.join(__dirname, './src')] })

packages/stylelint-plugin/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sourcegraph/stylelint-plugin-sourcegraph",
+  "version": "1.0.0",
+  "description": "Custom stylelint rules for Sourcegraph",
+  "keywords": [
+    "stylelint",
+    "stylelintplugin",
+    "stylelint-plugin",
+    "sourcegraph",
+    "typescript"
+  ],
+  "files": [
+    "dist",
+    "docs",
+    "index.d.ts",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sourcegraph/codemod.git",
+    "directory": "packages/stylelint-plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/sourcegraph/codemod/issues"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "tsc --build ./tsconfig.build.json",
+    "build:watch": "tsc  --build ./tsconfig.build.json --watch",
+    "build:clean": "tsc  --build --clean ./tsconfig.build.json && rimraf dist ./*.tsbuildinfo",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "format": "prettier --write \"./**/*.{ts,js,json,md}\" --ignore-path ../../.prettierignore",
+    "generate:configs": "ts-node --files --transpile-only scripts/generate-configs.ts",
+    "lint": "eslint . --ext .js,.ts --ignore-path ../../.eslintignore"
+  },
+  "dependencies": {
+    "@manypkg/find-root": "^1.1.0",
+    "ignore": "^5.1.8",
+    "postcss-value-parser": "^4.2.0"
+  },
+  "devDependencies": {
+    "jest-preset-stylelint": "^5.0.3"
+  },
+  "peerDependencies": {
+    "stylelint": "^14.3.0"
+  }
+}

packages/stylelint-plugin/src/index.ts

@@ -0,0 +1,5 @@
+import { filenameMatchRegexRule } from './rules/filenames-match-regex/filenames-match-regex'
+import { noRestrictedImports } from './rules/no-restricted-imports/no-restricted-imports'
+
+// eslint-disable-next-line import/no-default-export
+export default [filenameMatchRegexRule, noRestrictedImports]

packages/stylelint-plugin/src/rules/filenames-match-regex/__tests__/filenames-match-regex.test.ts

@@ -0,0 +1,28 @@
+import { messages, ruleName } from '../filenames-match-regex'
+
+const ruleConfig = { regexp: '^.+\\.module(\\.css)$' }
+
+testRule({
+    ruleName,
+    config: [true, ruleConfig],
+    codeFilename: 'test.module.css',
+    accept: [
+        {
+            code: 'div {}',
+            description: 'CSS module file',
+        },
+    ],
+})
+
+testRule({
+    ruleName,
+    config: [true, ruleConfig],
+    codeFilename: 'test.css',
+    reject: [
+        {
+            code: 'div {}',
+            description: 'global CSS file',
+            message: messages.expected('test.css'),
+        },
+    ],
+})

packages/stylelint-plugin/src/rules/filenames-match-regex/filenames-match-regex.ts

@@ -0,0 +1,70 @@
+import path from 'path'
+
+import stylelint from 'stylelint'
+
+import { createPlugin, isString } from '../../utils'
+
+export const ruleName = '@sourcegraph/filenames-match-regex'
+export const messages = stylelint.utils.ruleMessages(ruleName, {
+    expected: fileName => {
+        return `Filename ${String(fileName)} does not match the regular expression.`
+    },
+})
+
+interface RuleConfig {
+    regexp: string
+}
+
+export const filenameMatchRegexRule = createPlugin<RuleConfig>(ruleName, (isEnabled, config) => {
+    if (!config) {
+        throw new Error(`The ${ruleName} rule configuration is not provided!`)
+    }
+
+    const regexp = new RegExp(config.regexp)
+
+    return function (postcssRoot, postcssResult) {
+        if (!isEnabled) {
+            return
+        }
+
+        const areOptionsValid = stylelint.utils.validateOptions(
+            postcssResult,
+            ruleName,
+            {
+                actual: isEnabled,
+                optional: false,
+                possible: [true, false],
+            },
+            {
+                actual: config,
+                optional: false,
+                possible: {
+                    regexp: [isString],
+                },
+            }
+        )
+
+        if (!areOptionsValid) {
+            return
+        }
+
+        const filePath = postcssRoot.source?.input.from
+
+        if (!filePath || !postcssRoot.first) {
+            return
+        }
+
+        const fileName = path.basename(filePath)
+        const isRegexMatch = regexp.test(fileName)
+
+        if (!isRegexMatch) {
+            stylelint.utils.report({
+                message: messages.expected(fileName),
+                ruleName,
+                node: postcssRoot.first,
+                result: postcssResult,
+                line: 1,
+            })
+        }
+    }
+})

packages/stylelint-plugin/src/rules/filenames-match-regex/index.ts

@@ -0,0 +1 @@
+export * from './filenames-match-regex'

packages/stylelint-plugin/src/rules/no-restricted-imports/__tests__/no-restricted-imports.test.ts

@@ -0,0 +1,38 @@
+import { messages, ruleName } from '../no-restricted-imports'
+
+testRule({
+    ruleName,
+    config: [true, { paths: ['bootstrap*', 'reactstrap/index.css'] }],
+    codeFilename: 'packages/stylelint-plugin/test.css',
+    accept: [
+        {
+            code: '@import "reactstrap/not-banned.css"',
+            description: 'Absolute import',
+        },
+        {
+            code: '@import "./branded/src/global-styles/index.scss";',
+            description: 'Relative import',
+        },
+        {
+            code: '@import "../../branded/src/global-styles/index.scss";',
+            description: 'Deep relative import',
+        },
+    ],
+    reject: [
+        {
+            code: '@import "reactstrap/index.css";',
+            description: 'Banned import exact path',
+            message: messages.rejected('reactstrap/index.css'),
+        },
+        {
+            code: '@import "bootstrap";',
+            description: 'Banned import via glob',
+            message: messages.rejected('bootstrap'),
+        },
+        {
+            code: '@import "bootstrap/scss/functions";',
+            description: 'Banned nested import via glob',
+            message: messages.rejected('bootstrap/scss/functions'),
+        },
+    ],
+})

packages/stylelint-plugin/src/rules/no-restricted-imports/index.ts

@@ -0,0 +1 @@
+export * from './no-restricted-imports'