chore: upgrade eslint, prettier and typescript

__ts-tests__/react.test.tsx

@@ -26,7 +26,7 @@ const Button = styled.button`
 `;
 
 const ColoredButton = styled.button<{ background: string; children: string }>`
-  background-color: ${props => props.background};
+  background-color: ${(props) => props.background};
 `;
 
 const CustomButton = styled(Button)`

package.json

@@ -59,7 +59,7 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
-    "@callstack/eslint-config": "^9.1.0",
+    "@callstack/eslint-config": "^10.0.1",
     "@commitlint/config-conventional": "^8.3.4",
     "@release-it/conventional-changelog": "^1.1.0",
     "@types/babel__core": "^7.1.7",
@@ -72,27 +72,27 @@
     "@types/loader-utils": "^1.1.3",
     "@types/mkdirp": "^0.5.2",
     "@types/normalize-path": "^3.0.0",
-    "@types/prettier": "^1.19.1",
+    "@types/prettier": "^2.0.2",
     "@types/react": "^16.9.25",
     "@types/react-is": "^16.7.1",
     "@types/strip-ansi": "^5.2.1",
-    "@typescript-eslint/eslint-plugin": "^2.25.0",
-    "@typescript-eslint/parser": "^2.25.0",
+    "@typescript-eslint/eslint-plugin": "^3.9.0",
+    "@typescript-eslint/parser": "^3.9.0",
     "all-contributors-cli": "^6.1.1",
     "babel-jest": "^24.5.0",
     "codecov": "^3.2.0",
     "commitlint": "^8.3.5",
     "del-cli": "^1.1.0",
     "dtslint": "^0.9.8",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint": "^7.6.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "husky": "^1.3.1",
     "jest": "^24.7.1",
-    "prettier": "^1.16.4",
+    "prettier": "^2.0.5",
     "react": "^16.8.3",
     "react-test-renderer": "^16.8.3",
     "release-it": "^12.4.3",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.7"
   },
   "dependencies": {
     "@babel/core": "^7.9.0",

src/__tests__/babel.test.ts

@@ -1,6 +1,6 @@
+import { join } from 'path';
 import * as babel from '@babel/core';
 import dedent from 'dedent';
-import { join } from 'path';
 import stripAnsi from 'strip-ansi';
 import serializer from '../__utils__/linaria-snapshot-serializer';
 import { StrictOptions } from '../babel/types';

src/__tests__/detect-core-js.test.js

@@ -1,9 +1,9 @@
 import cp from 'child_process';
 
-const waitForProcess = async process => {
-  return new Promise(resolve => {
+const waitForProcess = async (process) => {
+  return new Promise((resolve) => {
     let output = '';
-    process.stdout.on('data', chunk => {
+    process.stdout.on('data', (chunk) => {
       output += chunk.toString();
     });
     process.on('close', () => {

src/__tests__/evaluators/extractor.test.ts

@@ -1,6 +1,6 @@
+import path from 'path';
 import dedent from 'dedent';
 import * as babel from '@babel/core';
-import path from 'path';
 import exctract from '../../babel/evaluators/extractor';
 
 function getFileName() {

src/__tests__/evaluators/preeval.test.ts

@@ -1,6 +1,6 @@
+import { join } from 'path';
 import * as babel from '@babel/core';
 import dedent from 'dedent';
-import { join } from 'path';
 import serializer from '../../__utils__/linaria-snapshot-serializer';
 import { StrictOptions } from '../../babel/types';
 

src/__tests__/evaluators/shaker.test.ts

@@ -1,7 +1,7 @@
+import path from 'path';
 import dedent from 'dedent';
 import * as babel from '@babel/core';
 import shake from '../../babel/evaluators/shaker';
-import path from 'path';
 
 function getFileName() {
   return path.resolve(__dirname, `../__fixtures__/test.js`);

src/__tests__/module.test.ts

@@ -291,7 +291,7 @@ it('has global objects available without referencing global', () => {
 it('changes resolve behaviour on overriding _resolveFilename', () => {
   const originalResolveFilename = Module._resolveFilename;
 
-  Module._resolveFilename = id => (id === 'foo' ? 'bar' : id);
+  Module._resolveFilename = (id) => (id === 'foo' ? 'bar' : id);
 
   const mod = new Module(getFileName(), options);
 

src/__tests__/preval.test.ts

@@ -1,6 +1,6 @@
+import { join, resolve } from 'path';
 import * as babel from '@babel/core';
 import dedent from 'dedent';
-import { join, resolve } from 'path';
 import stripAnsi from 'strip-ansi';
 
 import Module from '../babel/module';
@@ -70,7 +70,7 @@ function run(
 
   const transpile: TranspileFn = async (
     input: string,
-    conf: (original: typeof babelrc) => typeof babelrc = i => i
+    conf: (original: typeof babelrc) => typeof babelrc = (i) => i
   ) => {
     const { code, metadata } = await transformAsync(input, {
       ...conf(babelrc),
@@ -186,7 +186,7 @@ function run(
         color: ${'${Colors.BLUE}'};
       \`;
       `,
-      config => ({
+      (config) => ({
         ...config,
         plugins: [
           '@babel/plugin-transform-typescript',
@@ -557,7 +557,7 @@ function run(
         color: blue;
       \`;
       `,
-      config => ({
+      (config) => ({
         ...config,
         plugins: ['@babel/plugin-syntax-jsx', ...(config.plugins || [])],
       })
@@ -975,7 +975,7 @@ function run(
 }
 
 describe('shaker', () => {
-  run(require('../babel/evaluators/shaker').default, transpile => {
+  run(require('../babel/evaluators/shaker').default, (transpile) => {
     it('should work with wildcard imports', async () => {
       const { code, metadata } = await transpile(
         dedent`

src/__tests__/styled.test.js

@@ -18,7 +18,7 @@ it('renders tag with display name and class name', () => {
 });
 
 it('renders component with display name and class name', () => {
-  const Custom = props => <div {...props} />;
+  const Custom = (props) => <div {...props} />;
 
   const Test = styled(Custom)({
     name: 'TestComponent',
@@ -41,7 +41,7 @@ it('applies CSS variables in style prop', () => {
     vars: {
       foo: ['tomato'],
       bar: [20, 'px'],
-      baz: [props => props.size, 'px'],
+      baz: [(props) => props.size, 'px'],
     },
   });
 
@@ -104,7 +104,7 @@ it('replaces simple component with as prop', () => {
 });
 
 it('replaces custom component with as prop for primitive', () => {
-  const Custom = props => <div {...props} style={{ fontSize: 12 }} />;
+  const Custom = (props) => <div {...props} style={{ fontSize: 12 }} />;
 
   const Test = styled(Custom)({
     name: 'TestComponent',
@@ -121,7 +121,7 @@ it('replaces custom component with as prop for primitive', () => {
 });
 
 it('replaces primitive with as prop for custom component', () => {
-  const Custom = props => <div {...props} style={{ fontSize: 12 }} />;
+  const Custom = (props) => <div {...props} style={{ fontSize: 12 }} />;
 
   const Test = styled('div')({
     name: 'TestComponent',
@@ -196,7 +196,7 @@ it('does not filter attributes for custom elements', () => {
 });
 
 it('does not filter attributes for components', () => {
-  const Custom = props => <div>{props.unknownAttribute}</div>;
+  const Custom = (props) => <div>{props.unknownAttribute}</div>;
 
   const Test = styled(Custom)({
     name: 'TestComponent',
@@ -211,7 +211,7 @@ it('does not filter attributes for components', () => {
 });
 
 it('provides linaria component className for composition as last item in props.className', () => {
-  const Custom = props => {
+  const Custom = (props) => {
     const classnames = props.className.split(' ');
     const linariaClassName = classnames[classnames.length - 1];
     const newClassNames = [

src/__tests__/transform.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-template-curly-in-string */
 
-import dedent from 'dedent';
 import path from 'path';
+import dedent from 'dedent';
 import transform, { transformUrl } from '../transform';
 import evaluator from '../babel/evaluators/extractor';
 

src/__utils__/linaria-snapshot-serializer.ts

@@ -16,7 +16,7 @@ export default {
 CSS:
 
 ${Object.keys(linaria.rules)
-  .map(selector => `${selector} {${linaria.rules[selector].cssText}}`)
+  .map((selector) => `${selector} {${linaria.rules[selector].cssText}}`)
   .join('\n')}
 
 Dependencies: ${

src/babel/eval-cache.ts

@@ -6,15 +6,12 @@ const fileHashes = new Map<string, string>();
 const evalCache = new Map<string, any>();
 const fileKeys = new Map<string, string[]>();
 
-const hash = (text: string) =>
-  createHash('sha1')
-    .update(text)
-    .digest('base64');
+const hash = (text: string) => createHash('sha1').update(text).digest('base64');
 
 let lastText: string = '';
 let lastHash: string = hash(lastText);
 
-const memoizedHash: typeof hash = text => {
+const memoizedHash: typeof hash = (text) => {
   if (lastText !== text) {
     lastHash = hash(text);
     lastText = text;

src/babel/evaluators/buildOptions.ts

@@ -33,7 +33,7 @@ export default function buildOptions(
       ],
     ],
     plugins: [
-      ...plugins.map(name => require.resolve(name as string)),
+      ...plugins.map((name) => require.resolve(name as string)),
       // We don't support dynamic imports when evaluating, but don't wanna syntax error
       // This will replace dynamic imports with an object that does nothing
       require.resolve('../dynamic-import-noop'),
@@ -51,7 +51,7 @@ export default function buildOptions(
     'presets',
     'plugins',
   ];
-  keys.forEach(field => {
+  keys.forEach((field) => {
     babelOptions[field] = babelOptions[field]
       ? babelOptions[field]!.filter((item: PluginItem) => {
           // If item is an array it's a preset/plugin with options ([preset, options])
@@ -73,7 +73,7 @@ export default function buildOptions(
           }
 
           // Loop through the default presets/plugins to see if it already exists
-          return !defaults[field].some(it =>
+          return !defaults[field].some((it) =>
             // The default presets/plugins can also have nested arrays,
             Array.isArray(it) ? it[0] === name : it === name
           );

src/babel/evaluators/extractor/RequirementsResolver.ts

@@ -19,7 +19,7 @@ export default class RequirementsResolver {
   ): t.Statement[] {
     const resolver = new RequirementsResolver();
     if (Array.isArray(path)) {
-      path.forEach(p => this.resolve(p));
+      path.forEach((p) => this.resolve(p));
     } else {
       resolver.resolve(path);
     }
@@ -33,7 +33,7 @@ export default class RequirementsResolver {
    * Checks that specified node or one of its ancestors is already added
    */
   private isAdded(path: NodePath<t.Node>): boolean {
-    if (this.requirements.some(req => req.path === path)) {
+    if (this.requirements.some((req) => req.path === path)) {
       return true;
     }
 
@@ -143,7 +143,7 @@ export default class RequirementsResolver {
     }
 
     path.traverse({
-      Identifier: p => {
+      Identifier: (p) => {
         const binding = this.resolveIdentifier(p);
         if (binding !== null) {
           set.add(binding.path);
@@ -182,11 +182,11 @@ export default class RequirementsResolver {
         throw new Error('Circular dependency');
       }
 
-      statements.push(...zeroDeps.map(req => req.result));
+      statements.push(...zeroDeps.map((req) => req.result));
       // Let's remove already added statements from the requirements of the rest of the list.
-      requirements = rest.map(req => {
+      requirements = rest.map((req) => {
         const reqs = new Set(req.requirements);
-        zeroDeps.forEach(r => reqs.delete(r.path));
+        zeroDeps.forEach((r) => reqs.delete(r.path));
         return {
           ...req,
           requirements: reqs,

src/babel/evaluators/preeval.ts

@@ -6,10 +6,10 @@ import { NodePath } from '@babel/traverse';
 import { types } from '@babel/core';
 import GenerateClassNames from '../visitors/GenerateClassNames';
 import DetectStyledImportName from '../visitors/DetectStyledImportName';
+import { State, StrictOptions } from '../types';
 import JSXElement from './visitors/JSXElement';
 import ProcessStyled from './visitors/ProcessStyled';
 import ProcessCSS from './visitors/ProcessCSS';
-import { State, StrictOptions } from '../types';
 
 function preeval(_babel: any, options: StrictOptions) {
   return {
@@ -26,8 +26,8 @@ function preeval(_babel: any, options: StrictOptions) {
           // We need our transforms to run before anything else
           // So we traverse here instead of a in a visitor
           path.traverse({
-            ImportDeclaration: p => DetectStyledImportName(p, state),
-            TaggedTemplateExpression: p =>
+            ImportDeclaration: (p) => DetectStyledImportName(p, state),
+            TaggedTemplateExpression: (p) =>
               GenerateClassNames(p, state, options),
             JSXElement,
           });

src/babel/evaluators/shaker/DepsGraph.ts

@@ -59,7 +59,7 @@ export default class DepsGraph {
     const allReferences = [
       ...Array.from(this.dependencies.get(declaration) || []),
       ...Array.from(this.dependents.get(declaration) || []),
-    ].filter(i => t.isIdentifier(i) && i.name === name) as t.Identifier[];
+    ].filter((i) => t.isIdentifier(i) && i.name === name) as t.Identifier[];
     allReferences.push(declaration);
     return allReferences;
   }
@@ -125,7 +125,7 @@ export default class DepsGraph {
   getLeafs(only: string[] | null): Array<t.Node | undefined> {
     this.processQueue();
     return only
-      ? only.map(name => this.exports.get(name))
+      ? only.map((name) => this.exports.get(name))
       : Array.from(this.exports.values());
   }
 }

src/babel/evaluators/shaker/GraphBuilderState.ts

@@ -27,7 +27,7 @@ export default abstract class GraphBuilderState {
   public onVisit(callback: OnVisitCallback) {
     this.callbacks.push(callback);
     return () => {
-      this.callbacks = this.callbacks.filter(c => c !== callback);
+      this.callbacks = this.callbacks.filter((c) => c !== callback);
     };
   }
 

src/babel/evaluators/shaker/Visitors.ts

@@ -1,11 +1,11 @@
 import { types as t } from '@babel/core';
 import peek from '../../utils/peek';
+import { warn } from '../../utils/logger';
 import GraphBuilderState from './GraphBuilderState';
 import identifierHandlers from './identifierHandlers';
 import { Visitor, Visitors } from './types';
 
 import { visitors as core } from './langs/core';
-import { warn } from '../../utils/logger';
 
 const visitors: Visitors = {
   Identifier<TParent extends t.Node>(
@@ -75,10 +75,10 @@ export function getVisitors<TNode extends t.Node>(
 ): Visitor<TNode>[] {
   const aliases: Array<keyof t.Aliases> = t.ALIAS_KEYS[node.type] || [];
   const aliasVisitors = aliases
-    .map(type => visitors[type])
-    .filter(i => i) as Visitor<TNode>[];
+    .map((type) => visitors[type])
+    .filter((i) => i) as Visitor<TNode>[];
   return [...aliasVisitors, visitors[node.type] as Visitor<TNode>].filter(
-    v => v
+    (v) => v
   );
 }