Merge branch 'cjs' into 'develop'

Rename some files to .cjs, make the codebase aware of .cjs and .mjs extensions

See merge request soapbox-pub/soapbox!2190

.eslintignore

@@ -5,4 +5,4 @@
 /tmp/**
 /coverage/**
 /custom/**
-!.eslintrc.js
+!.eslintrc.cjs

.eslintrc.cjs

@@ -43,7 +43,7 @@ module.exports = {
     react: {
       version: 'detect',
     },
-    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/extensions': ['.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx'],
     'import/ignore': [
       'node_modules',
       '\\.(css|scss|json)$',

.gitlab-ci.yml

@@ -48,10 +48,12 @@ lint-js:
     changes:
       - "**/*.js"
       - "**/*.jsx"
+      - "**/*.cjs"
+      - "**/*.mjs"
       - "**/*.ts"
       - "**/*.tsx"
       - ".eslintignore"
-      - ".eslintrc.js"
+      - ".eslintrc.cjs"
 
 lint-sass:
   stage: test
@@ -72,7 +74,7 @@ jest:
       - "app/soapbox/**/*"
       - "webpack/**/*"
       - "custom/**/*"
-      - "jest.config.js"
+      - "jest.config.cjs"
       - "package.json"
       - "yarn.lock"
       - ".gitlab-ci.yml"

.lintstagedrc.json

@@ -1,5 +1,8 @@
 {
   "*.js": "eslint --cache",
+  "*.cjs": "eslint --cache",
+  "*.mjs": "eslint --cache",
   "*.ts": "eslint --cache",
+  "*.tsx": "eslint --cache",
   "app/styles/**/*.scss": "stylelint"
 }

jest.config.cjs

@@ -18,6 +18,8 @@ module.exports = {
   ],
   'collectCoverageFrom': [
     'app/soapbox/**/*.js',
+    'app/soapbox/**/*.cjs',
+    'app/soapbox/**/*.mjs',
     'app/soapbox/**/*.ts',
     'app/soapbox/**/*.tsx',
     '!app/soapbox/features/emoji/emoji-compressed.js',
@@ -43,6 +45,6 @@ module.exports = {
   ],
   'transform': {
     '\\.[jt]sx?$': 'babel-jest',
-    [`\\.(${ASSET_EXTS})$`]: '<rootDir>/jest/assetTransformer.js',
+    [`\\.(${ASSET_EXTS})$`]: '<rootDir>/jest/assetTransformer.cjs',
   },
 };

package.json

@@ -25,7 +25,7 @@
     "test:coverage": "${npm_execpath} run test --coverage",
     "test:all": "${npm_execpath} run test:coverage && ${npm_execpath} run lint",
     "lint": "${npm_execpath} run lint:js && ${npm_execpath} run lint:sass",
-    "lint:js": "npx eslint --ext .js,.jsx,.ts,.tsx . --cache",
+    "lint:js": "npx eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx . --cache",
     "lint:sass": "npx stylelint app/styles/**/*.scss",
     "prepare": "husky install"
   },

tailwind.config.cjs

@@ -1,4 +1,4 @@
-const { parseColorMatrix } = require('./tailwind/colors');
+const { parseColorMatrix } = require('./tailwind/colors.cjs');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {

tailwind/__tests__/colors-test.js

@@ -1,7 +1,7 @@
 import {
   withOpacityValue,
   parseColorMatrix,
-} from '../colors';
+} from '../colors.cjs';
 
 describe('withOpacityValue()', () => {
   it('returns a Tailwind color function with alpha support', () => {

webpack/configuration.ts

@@ -12,7 +12,7 @@ const settings = {
   test_root_path: `${FE_BUILD_DIR}-test`,
   cache_path: 'tmp/cache',
   resolved_paths: [],
-  extensions: [ '.mjs', '.js', '.jsx', '.ts', '.tsx', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
+  extensions: [ '.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
 };
 
 const outputDir = env.NODE_ENV === 'test' ? settings.test_root_path : settings.public_root_path;

webpack/rules/babel.ts

@@ -7,7 +7,7 @@ import type { RuleSetRule } from 'webpack';
 const isDevelopment = process.env.NODE_ENV === 'development';
 
 const rule: RuleSetRule = {
-  test: /\.(js|jsx|mjs|ts|tsx)$/,
+  test: /\.(js|jsx|cjs|mjs|ts|tsx)$/,
   include: [
     settings.source_path,
     ...settings.resolved_paths,