Upgrade to latest stylelint and make esm the default module format (#397

)

* Upgrade to latest stylelint and make esm the default module format

* upgrade prettier

* Fixing eslint problems

* simplify jest config

* Remove node version 16

* Update imports

* Create wicked-cobras-juggle.md

* feat(bundle): add rollup for emitting CommonJS and ESM (#398)

* Include dist folder

* update canary job

* Try importing plugins

* Adjust imports for rollup and eslint problems

* Test fixes

* Reduce to minor release

* Use const experimentalVars

* Remove extra comment

* Remove require from plugin

* Move to dependency

* Fix no-override to use all primer

* Remove no experimental vars

* Use with and change parser to typescript

* Update wicked-cobras-juggle.md

* Create proud-ducks-retire.md

---------

Co-authored-by: Josh Black <joshblack@github.com>

.changeset/proud-ducks-retire.md

@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": major
+---
+
+Removing `primer/no-experimental-vars` plugin from config.

.changeset/wicked-cobras-juggle.md

@@ -0,0 +1,5 @@
+---
+"@primer/stylelint-config": major
+---
+
+Upgrade to latest stylelint and make esm the default module format

.eslintignore

@@ -1,2 +1,5 @@
 coverage/
 node_modules/
+dist/
+__tests__/
+rollup.config.js

.eslintrc.json

@@ -1,20 +1,21 @@
 {
+  "parser": "@typescript-eslint/parser",
   "root": true,
   "plugins": ["github"],
   "extends": [
-    "plugin:github/internal",
     "plugin:github/recommended"
   ],
   "env": {
-    "es6": true,
     "node": true
   },
   "parserOptions": {
-    "ecmaVersion": 2020
+    "ecmaVersion": 2023,
+    "requireConfigFile": false
   },
   "rules": {
     "import/no-commonjs": "off",
     "github/no-then": "off",
-    "i18n-text/no-en": "off"
+    "i18n-text/no-en": "off",
+    "import/extensions": ["error", "ignorePackages"]
   }
 }

.github/workflows/ci.yml

@@ -10,16 +10,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
-        with:
-          node-version: 16
       - run: npm ci
       - run: npm run test
+      - run: npm run test:stylelint
   lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
-        with:
-          node-version: 16
       - run: npm ci
       - run: npm run lint

.github/workflows/release_canary.yml

@@ -8,54 +8,11 @@ on:
 
 jobs:
   release-canary:
-    name: Canary
+    name: npm
     if: ${{ github.repository == 'primer/stylelint-config' }}
-
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
-          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Create .npmrc
-        run: |
-          cat << EOF > "$HOME/.npmrc"
-            //registry.npmjs.org/:_authToken=$NPM_TOKEN
-          EOF
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
-
-      - name: Publish canary version
-        run: |
-          echo "$( jq '.version = "0.0.0"' package.json )" > package.json
-          echo -e "---\n'@primer/stylelint-config': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
-          rm -f .changeset/pre.json
-          npx changeset version --snapshot
-          npx changeset publish --tag canary
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Output canary version number
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
-            github.rest.repos.createCommitStatus({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              sha: context.sha,
-              state: 'success',
-              context: `Published ${package.name}`,
-              description: package.version,
-              target_url: `https://unpkg.com/${package.name}@${package.version}/`
-            })
+    uses: primer/.github/.github/workflows/release_canary.yml@v1.0.0
+    with:
+      install: npm i
+    secrets:
+      gh_token: ${{ secrets.GITHUB_TOKEN }}
+      npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

.gitignore

@@ -1,4 +1,5 @@
 *.log
 coverage/
+dist/
 node_modules/
 yarn.lock

.stylelintrc.json

@@ -0,0 +1 @@
+{ "extends": ["./index"] }

__tests__/borders.js

@@ -1,10 +1,10 @@
-const dedent = require('dedent')
-const stylelint = require('stylelint')
-const pluginPath = require.resolve('../plugins/borders')
+import dedent from 'dedent'
+import stylelint from 'stylelint'
+import borders from '../plugins/borders.js'
 
 const ruleName = 'primer/borders'
 const configWithOptions = args => ({
-  plugins: [pluginPath],
+  plugins: [borders],
   rules: {
     [ruleName]: args,
   },

__tests__/box-shadow.js

@@ -1,6 +1,6 @@
-const dedent = require('dedent')
-const stylelint = require('stylelint')
-const pluginPath = require.resolve('../plugins/box-shadow')
+import dedent from 'dedent'
+import stylelint from 'stylelint'
+import pluginPath from '../plugins/box-shadow.js'
 
 const ruleName = 'primer/box-shadow'
 const configWithOptions = args => ({

__tests__/colors.js

@@ -1,7 +1,7 @@
-const dedent = require('dedent')
-const stylelint = require('stylelint')
-const pluginPath = require.resolve('../plugins/colors')
-const scss = require('postcss-scss')
+import dedent from 'dedent'
+import stylelint from 'stylelint'
+import pluginPath from '../plugins/colors.js'
+import scss from 'postcss-scss'
 
 const ruleName = 'primer/colors'
 const configWithOptions = (...args) => ({

__tests__/decl-validator.js

@@ -1,4 +1,4 @@
-const declarationValidator = require('../plugins/lib/decl-validator')
+import declarationValidator from '../plugins/lib/decl-validator.js'
 
 describe('declarationValidator()', () => {
   it('validates values', () => {

__tests__/index.js

@@ -1,4 +1,4 @@
-const {lint} = require('./utils')
+import {lint} from './utils/index.js'
 
 const SAFE_SCSS_EXAMPLE = `
   .Component { float: left; }

__tests__/new-color-vars-have-fallback.js

@@ -1,4 +1,4 @@
-const {ruleName} = require('../plugins/new-color-vars-have-fallback')
+import {ruleName} from '../plugins/new-color-vars-have-fallback.js'
 
 // eslint-disable-next-line no-undef
 testRule({

__tests__/no-deprecated-colors.js

@@ -1,15 +1,11 @@
-const path = require('path')
-const {ruleName} = require('../plugins/no-deprecated-colors')
+import {ruleName} from '../plugins/no-deprecated-colors.js'
 
 // eslint-disable-next-line no-undef
 testRule({
-  plugins: ['./plugins/no-deprecated-colors.js'],
+  plugins: ['./plugins/no-deprecated-colors'],
   ruleName,
   config: [
     true,
-    {
-      deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'),
-    },
   ],
   fix: true,
   accept: [
@@ -75,7 +71,6 @@ testRule({
       config: [
         true,
         {
-          deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'),
           inlineFallback: false,
         },
       ],
@@ -98,12 +93,11 @@ testRule({
 })
 // eslint-disable-next-line no-undef
 testRule({
-  plugins: ['./plugins/no-deprecated-colors.js'],
+  plugins: ['./plugins/no-deprecated-colors'],
   ruleName,
   config: [
     true,
     {
-      deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'),
       inlineFallback: true,
     },
   ],
@@ -164,7 +158,6 @@ testRule({
       config: [
         true,
         {
-          deprecatedFile: path.join(__dirname, '../plugins/lib/primitives-v8.json'),
           inlineFallback: false,
         },
       ],

__tests__/no-display-colors.js

@@ -1,9 +1,12 @@
-const path = require('path')
-const {messages, ruleName} = require('../plugins/no-display-colors')
+import path from 'path'
+import {messages, ruleName} from '../plugins/no-display-colors.js'
+import {fileURLToPath} from 'url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
 
 // eslint-disable-next-line no-undef
 testRule({
-  plugins: ['./plugins/no-display-colors.js'],
+  plugins: ['./plugins/no-display-colors'],
   ruleName,
   config: [
     true,