chore: bump dependencies (#131)

* chore: bump dependencies

* chore: upgrade PostCSS and plugins

* ci: bump Node version to current LTS

Author: mrmckeb

.eslintrc

@@ -1,11 +1,4 @@
 {
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "prettier/@typescript-eslint"
-  ],
-  "root": true,
-  "rules": {
-    "@typescript-eslint/explicit-function-return-type": 0
-  }
+  "extends": ["plugin:@typescript-eslint/recommended", "prettier"],
+  "root": true
 }

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 10.x
+          node-version: 14.x
       - name: Install
         run: yarn install --frozen-lockfile
       - name: Lint

package.json

@@ -26,7 +26,7 @@
   ],
   "scripts": {
     "build": "rm -rf ./lib && tsc",
-    "lint": "eslint './src/**/*.{js,ts}' --max-warnings 0 && yarn prettier './**/*.{json,md,js,ts,yml}' -c",
+    "lint": "eslint --max-warnings 0 . && yarn prettier -c .",
     "prepublishOnly": "yarn build",
     "test": "jest ./src"
   },
@@ -42,6 +42,9 @@
       "src/**/*.{ts}"
     ],
     "preset": "ts-jest",
+    "setupFiles": [
+      "<rootDir>/src/setup-tests.ts"
+    ],
     "testEnvironment": "node",
     "testPathIgnorePatterns": [
       "/node_modules/",
@@ -62,47 +65,47 @@
     "trailingComma": "all"
   },
   "resolutions": {
-    "postcss": "7.0.27"
+    "postcss": "8.3.0"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
-    "icss-utils": "^4.1.1",
-    "less": "^3.11.1",
+    "dotenv": "^10.0.0",
+    "icss-utils": "^5.1.0",
+    "less": "^4.1.1",
     "lodash.camelcase": "^4.3.0",
-    "postcss": "^7.0.27",
+    "postcss": "^8.3.0",
     "postcss-filter-plugins": "^3.0.1",
     "postcss-icss-keyframes": "^0.2.1",
     "postcss-icss-selectors": "^2.0.3",
-    "postcss-load-config": "^2.1.0",
+    "postcss-load-config": "^3.0.1",
     "reserved-words": "^0.1.2",
-    "sass": "^1.26.5",
-    "stylus": "^0.54.7",
+    "sass": "^1.32.13",
+    "stylus": "^0.54.8",
     "tsconfig-paths": "^3.9.0"
   },
   "devDependencies": {
     "@types/icss-utils": "^4.1.0",
-    "@types/jest": "^25.2.1",
-    "@types/less": "^3.0.1",
+    "@types/jest": "^26.0.23",
+    "@types/less": "^3.0.2",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/node": "^12.12.17",
-    "@types/postcss-load-config": "^2.0.1",
-    "@types/postcss-nested": "^4.1.0",
+    "@types/postcss-load-config": "^3.0.1",
+    "@types/postcss-nested": "^4.2.3",
     "@types/reserved-words": "^0.1.0",
     "@types/sass": "^1.16.0",
-    "@types/stylus": "^0.48.33",
-    "@typescript-eslint/eslint-plugin": "^2.29.0",
-    "@typescript-eslint/parser": "^2.29.0",
-    "bootstrap": "4.4.1",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
+    "@types/stylus": "^0.48.34",
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
+    "bootstrap": "5.0.1",
+    "eslint": "^7.27.0",
+    "eslint-config-prettier": "^8.3.0",
     "husky": "^4.2.5",
-    "jest": "^25.4.0",
-    "lint-staged": "^10.1.7",
+    "jest": "^27.0.2",
+    "lint-staged": "^11.0.0",
     "postcss-import-sync2": "^1.1.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.3.0",
     "sass-svg": "1.2.0",
-    "ts-jest": "^25.4.0",
-    "typescript": "^3.8.3"
+    "ts-jest": "^27.0.1",
+    "typescript": "^4.3.2"
   },
   "peerDependencies": {
     "typescript": ">=3.0.0"

src/@types/postcss-filter-plugins.ts

@@ -5,6 +5,6 @@ declare module 'postcss-filter-plugins' {
     exclude?: string[];
     silent?: boolean;
   }
-  const filter: (options?: Options) => Plugin<unknown>;
+  const filter: (options?: Options) => Plugin;
   export = filter;
 }

src/@types/postcss-icss-keyframes.d.ts

@@ -1,6 +1,6 @@
 declare module 'postcss-icss-keyframes' {
-  import { Plugin } from 'postcss';
-  const plugin: Plugin<{
+  import { PluginCreator } from 'postcss';
+  const plugin: PluginCreator<{
     generateScopeName: (
       keyframesName: string,
       filepath: string,

src/@types/postcss-icss-selectors.d.ts

@@ -1,5 +1,5 @@
 declare module 'postcss-icss-selectors' {
-  import { Plugin } from 'postcss';
-  const plugin: Plugin<{ mode: 'local' | 'global' }>;
+  import { PluginCreator } from 'postcss';
+  const plugin: PluginCreator<{ mode: 'local' | 'global' }>;
   export = plugin;
 }

src/@types/postcss-import-sync2.d.ts

@@ -1,5 +1,5 @@
 declare module 'postcss-import-sync2' {
-  import { Plugin } from 'postcss';
-  const plugin: Plugin<{}>;
+  import { PluginCreator } from 'postcss';
+  const plugin: PluginCreator<unknown>;
   export = plugin;
 }

src/helpers/__tests__/external/package/public.module.scss

@@ -1,3 +1,3 @@
 .public-module {
-    color: green;
+  color: green;
 }

src/helpers/classTransforms.ts

@@ -4,44 +4,44 @@ import { ClassnameTransformOptions } from '../options';
 // The below is based on the CSS Modules implementation found here:
 // https://github.com/webpack-contrib/css-loader/blob/master/lib/compile-exports.js
 
-const dashCase = (className: string) =>
-  className.replace(/-+(\w)/g, (match, firstLetter) =>
+const dashCase = (className: string): string =>
+  className.replace(/-+(\w)/g, (_match, firstLetter) =>
     firstLetter.toUpperCase(),
   );
 
-export const transformClasses = (
-  camelCaseOption?: ClassnameTransformOptions,
-) => (className: string) => {
-  const entries: string[] = [];
+export const transformClasses =
+  (camelCaseOption?: ClassnameTransformOptions) =>
+  (className: string): string[] => {
+    const entries: string[] = [];
 
-  switch (camelCaseOption) {
-    case 'camelCase': {
-      entries.push(className);
-      const targetClassName = camelCase(className);
-      if (targetClassName !== className) {
-        entries.push(targetClassName);
+    switch (camelCaseOption) {
+      case 'camelCase': {
+        entries.push(className);
+        const targetClassName = camelCase(className);
+        if (targetClassName !== className) {
+          entries.push(targetClassName);
+        }
+        break;
       }
-      break;
-    }
-    case 'camelCaseOnly':
-      entries.push(camelCase(className));
-      break;
-    case 'dashes': {
-      entries.push(className);
-      const targetClassName = dashCase(className);
-      if (targetClassName !== className) {
-        entries.push(targetClassName);
+      case 'camelCaseOnly':
+        entries.push(camelCase(className));
+        break;
+      case 'dashes': {
+        entries.push(className);
+        const targetClassName = dashCase(className);
+        if (targetClassName !== className) {
+          entries.push(targetClassName);
+        }
+        break;
       }
-      break;
+      case 'dashesOnly':
+        entries.push(dashCase(className));
+        break;
+      case 'asIs':
+      default:
+        entries.push(className);
+        break;
     }
-    case 'dashesOnly':
-      entries.push(dashCase(className));
-      break;
-    case 'asIs':
-    default:
-      entries.push(className);
-      break;
-  }
 
-  return entries;
-};
+    return entries;
+  };

src/helpers/createExports.ts

@@ -25,7 +25,7 @@ export const createExports = ({
   fileName: string;
   logger: Logger;
   options: Options;
-}) => {
+}): string => {
   const isCamelCase = (className: string) =>
     !NOT_CAMELCASE_REGEXP.test(className);
   const isReservedWord = (className: string) => !reserved.check(className);

src/helpers/createMatchers.ts

@@ -1,8 +1,21 @@
 import { Options } from '../options';
-import { createIsCSS, createIsRelativeCSS } from './cssExtensions';
+import {
+  createIsCSS,
+  createIsRelativeCSS,
+  isCSSFn,
+  isRelativeCSSFn,
+} from './cssExtensions';
 import { Logger } from './logger';
 
-export const createMatchers = (logger: Logger, options: Options = {}) => {
+interface Matchers {
+  isCSS: isCSSFn;
+  isRelativeCSS: isRelativeCSSFn;
+}
+
+export const createMatchers = (
+  logger: Logger,
+  options: Options = {},
+): Matchers => {
   // Allow custom matchers to be used, and handle bad matcher patterns.
   let isCSS = createIsCSS();
   try {

src/helpers/cssExtensions.ts

@@ -1,10 +1,15 @@
 export type isCSSFn = (fileName: string) => boolean;
+export type isRelativeCSSFn = (fileName: string) => boolean;
+
 const DEFAULT_REGEXP = /\.module\.(((c|le|sa|sc)ss)|styl)$/;
 
 const isRelative = (fileName: string) => /^\.\.?($|[\\/])/.test(fileName);
 
-export const createIsCSS = (
-  customMatcher: RegExp = DEFAULT_REGEXP,
-): isCSSFn => (fileName: string) => customMatcher.test(fileName);
-export const createIsRelativeCSS = (isCSS: isCSSFn) => (fileName: string) =>
-  isCSS(fileName) && isRelative(fileName);
+export const createIsCSS =
+  (customMatcher: RegExp = DEFAULT_REGEXP): isCSSFn =>
+  (fileName: string) =>
+    customMatcher.test(fileName);
+export const createIsRelativeCSS =
+  (isCSS: isCSSFn): isRelativeCSSFn =>
+  (fileName: string) =>
+    isCSS(fileName) && isRelative(fileName);

src/helpers/getClasses.ts

@@ -1,29 +1,29 @@
 import path from 'path';
-import postcss from 'postcss';
+import Processor from 'postcss/lib/processor';
 import less from 'less';
 import sass from 'sass';
 import stylus from 'stylus';
-import { extractICSS } from 'icss-utils';
+import { CSSExports, extractICSS } from 'icss-utils';
 import tsModule from 'typescript/lib/tsserverlibrary';
 import { createMatchPath } from 'tsconfig-paths';
 import { sassTildeImporter } from '../importers/sassTildeImporter';
 import { Options, CustomRenderer } from '../options';
 import { Logger } from './logger';
 
-export const enum FileTypes {
+export const enum FileType {
   css = 'css',
   less = 'less',
   sass = 'sass',
   scss = 'scss',
   styl = 'styl',
 }
 
-export const getFileType = (fileName: string) => {
-  if (fileName.endsWith('.css')) return FileTypes.css;
-  if (fileName.endsWith('.less')) return FileTypes.less;
-  if (fileName.endsWith('.sass')) return FileTypes.sass;
-  if (fileName.endsWith('.styl')) return FileTypes.styl;
-  return FileTypes.scss;
+export const getFileType = (fileName: string): FileType => {
+  if (fileName.endsWith('.css')) return FileType.css;
+  if (fileName.endsWith('.less')) return FileType.less;
+  if (fileName.endsWith('.sass')) return FileType.sass;
+  if (fileName.endsWith('.styl')) return FileType.styl;
+  return FileType.scss;
 };
 
 const getFilePath = (fileName: string) => path.dirname(fileName);
@@ -40,9 +40,9 @@ export const getClasses = ({
   fileName: string;
   logger: Logger;
   options: Options;
-  processor: postcss.Processor;
+  processor: Processor;
   compilerOptions: tsModule.CompilerOptions;
-}) => {
+}): CSSExports => {
   try {
     const fileType = getFileType(fileName);
     const rendererOptions = options.rendererOptions || {};
@@ -57,7 +57,7 @@ export const getClasses = ({
         logger,
         compilerOptions,
       });
-    } else if (fileType === FileTypes.less) {
+    } else if (fileType === FileType.less) {
       less.render(
         css,
         {
@@ -70,7 +70,7 @@ export const getClasses = ({
           transformedCss = output.css.toString();
         },
       );
-    } else if (fileType === FileTypes.scss || fileType === FileTypes.sass) {
+    } else if (fileType === FileType.scss || fileType === FileType.sass) {
       const filePath = getFilePath(fileName);
       const { includePaths, ...sassOptions } = rendererOptions.sass || {};
       const { baseUrl, paths } = compilerOptions;
@@ -87,13 +87,13 @@ export const getClasses = ({
       transformedCss = sass
         .renderSync({
           file: fileName,
-          indentedSyntax: fileType === FileTypes.sass,
+          indentedSyntax: fileType === FileType.sass,
           includePaths: [filePath, 'node_modules', ...(includePaths || [])],
           importer: importers,
           ...sassOptions,
         })
         .css.toString();
-    } else if (fileType === FileTypes.styl) {
+    } else if (fileType === FileType.styl) {
       transformedCss = stylus(css, {
         ...(rendererOptions.stylus || {}),
         filename: fileName,

src/helpers/getDtsSnapshot.ts

@@ -1,19 +1,19 @@
-import postcss from 'postcss';
 import tsModule from 'typescript/lib/tsserverlibrary';
 import { Options } from '../options';
 import { getClasses } from './getClasses';
 import { createExports } from './createExports';
 import { Logger } from './logger';
+import Processor from 'postcss/lib/processor';
 
 export const getDtsSnapshot = (
   ts: typeof tsModule,
-  processor: postcss.Processor,
+  processor: Processor,
   fileName: string,
   scriptSnapshot: ts.IScriptSnapshot,
   options: Options,
   logger: Logger,
   compilerOptions: tsModule.CompilerOptions,
-) => {
+): tsModule.IScriptSnapshot => {
   const css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
 
   /*