migrate to the new platform version

.eslintrc.js

@@ -0,0 +1,77 @@
+module.exports = {
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'plugin:react-hooks/recommended'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'prettier', 'import'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/ban-ts-ignore': 0,
+    '@typescript-eslint/no-var-requires': 0,
+    '@typescript-eslint/camelcase': 0,
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always-and-inside-groups',
+        alphabetize: {
+          order: 'asc',
+        },
+        groups: ['builtin', 'external', 'internal', ['parent', 'index', 'sibling']],
+      },
+    ],
+    'padding-line-between-statements': [
+      'error',
+      // IMPORT
+      {
+        blankLine: 'always',
+        prev: 'import',
+        next: '*',
+      },
+      {
+        blankLine: 'any',
+        prev: 'import',
+        next: 'import',
+      },
+      // EXPORT
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: 'export',
+      },
+      {
+        blankLine: 'any',
+        prev: 'export',
+        next: 'export',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: ['const', 'let'],
+      },
+      {
+        blankLine: 'any',
+        prev: ['const', 'let'],
+        next: ['const', 'let'],
+      },
+      // BLOCKS
+      {
+        blankLine: 'always',
+        prev: ['block', 'block-like', 'class', 'function', 'multiline-expression'],
+        next: '*',
+      },
+      {
+        blankLine: 'always',
+        prev: '*',
+        next: ['block', 'block-like', 'class', 'function', 'return', 'multiline-expression'],
+      },
+    ],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+  },
+};

__tests__/ast.spec.tsx

@@ -49,6 +49,7 @@ describe('test ast', () => {
       const ast = buildAst(CSS);
       const single = fromAst(['ble'], ast);
       expect(single).toBe('');
+
       const double = fromAst(['ble', 'dou'], ast);
       expect(double).toBe('.dou.ble { color: red; }\n');
     });

__tests__/css-stream.spec.tsx

@@ -9,11 +9,12 @@ describe('css stream', () => {
     isReady: true,
     ast: Object.keys(lookup).reduce((acc, file) => {
       lookup[file].forEach(
-        f =>
+        (f) =>
           (acc[f] = {
             selectors: [],
           })
       );
+
       return acc;
     }, {} as any),
     lookup,
@@ -42,7 +43,7 @@ describe('css stream', () => {
         zz: ['file3'],
         notused: ['file4'],
       }),
-      style => {
+      (style) => {
         styles[style] = (styles[style] || 0) + 1;
       }
     );
@@ -65,15 +66,18 @@ describe('css stream', () => {
 
     const streamString = async (readStream: NodeJS.ReadableStream) => {
       const result = [];
+
       for await (const chunk of readStream) {
         result.push(chunk);
       }
+
       return result.join('');
     };
 
     const [tr, base] = await Promise.all([streamString(output.pipe(cssStream)), streamString(output)]);
 
     expect(base).toEqual(tr);
+
     expect(styles).toEqual({
       file1: 1,
       file2: 1,

__tests__/edge-cases/missing-1600.tsx

@@ -1,5 +1,5 @@
-import { buildAst } from '../../src/parser/toAst';
 import { fromAst } from '../../src/parser/fromAst';
+import { buildAst } from '../../src/parser/toAst';
 import { createUsedFilter } from '../../src/utils/cache';
 
 describe('missing 1600px', () => {
@@ -30,6 +30,7 @@ describe('missing 1600px', () => {
     const ast = buildAst(CSS);
 
     const test = fromAst(['content'], ast, createUsedFilter());
+
     expect(test).toMatchInlineSnapshot(`
       ".content {  }
 

__tests__/index.tsx

@@ -3,13 +3,15 @@ import { remapStyles } from '../src/utils/style';
 describe('scanForStyles', () => {
   it('should map simple style', () => {
     const styles = {};
+
     remapStyles(
       {
         a: '.a{}, .b .c{}, .d>.e:not(focused){}',
         b: '.a {}, .f~.g{}, @media (screen) { .media { } }',
       },
       styles
     );
+
     expect(styles).toEqual({
       a: {
         a: true,

__tests__/mapStyles.spec.ts

@@ -4,9 +4,11 @@ describe('test map selector', () => {
   it('should return the single style', () => {
     expect(mapSelector('.a')).toEqual(['a']);
   });
+
   it('should return the double style', () => {
     expect(mapSelector('.a.b')).toEqual(['a', 'b']);
   });
+
   it('should keep the last style', () => {
     expect(mapSelector('.a .b')).toEqual(['b']);
   });

__tests__/media.spec.ts

@@ -40,6 +40,7 @@ describe('media selectors', () => {
 
   it('should extract unmatable parts', () => {
     const css = extractUnmatchableFromAst({ ast });
+
     expect(css[0].css).toEqual(`body { color: red; }
 input { color: rightColor; }
 `);
@@ -52,6 +53,7 @@ input { color: rightColor; }
 
   it('should use media if not used: case a', () => {
     const css = fromAst(['a'], ast);
+
     expect(css.trim()).toEqual(`.a { border: 2px solid; }
 
 @media only screen and (max-width: 600px) {
@@ -63,6 +65,7 @@ input { color: rightColor; }
 
   it('should use media if not used: case c', () => {
     const css = fromAst(['c'], ast);
+
     expect(css.trim()).toEqual(`@media only screen and (max-width: 600px) {
 .c { position: relative; }
 .c { color: red; }

__tests__/react-css-stream.spec.tsx

@@ -9,11 +9,12 @@ describe('React css stream', () => {
     isReady: true,
     ast: Object.keys(lookup).reduce((acc, file) => {
       lookup[file].forEach(
-        f =>
+        (f) =>
           (acc[f] = {
             selectors: [],
           })
       );
+
       return acc;
     }, {} as any),
     lookup,
@@ -44,7 +45,7 @@ describe('React css stream', () => {
         zz: ['file3'],
         notused: ['file4'],
       }),
-      style => {
+      (style) => {
         styles[style] = (styles[style] || 0) + 1;
       }
     );
@@ -67,15 +68,18 @@ describe('React css stream', () => {
 
     const streamString = async (readStream: NodeJS.ReadableStream) => {
       const result = [];
+
       for await (const chunk of readStream) {
         result.push(chunk);
       }
+
       return result.join('');
     };
 
     const [tr, base] = await Promise.all([streamString(output.pipe(cssStream)), streamString(output)]);
 
     expect(base).toEqual(tr);
+
     expect(styles).toEqual({
       file1: 1,
       file2: 1,

__tests__/react.integration.spec.tsx

@@ -1,4 +1,5 @@
 import { resolve } from 'path';
+
 import * as React from 'react';
 import { renderToStaticNodeStream, renderToString } from 'react-dom/server';
 
@@ -19,8 +20,9 @@ describe('File based css stream', () => {
   let styles: StyleDefinition;
 
   beforeEach(() => {
-    styles = discoverProjectStyles(resolve(__dirname, 'css'), name => {
+    styles = discoverProjectStyles(resolve(__dirname, 'css'), (name) => {
       const match = name.match(/file(\d+).css/);
+
       return match && +match[1];
     });
   });
@@ -31,15 +33,16 @@ describe('File based css stream', () => {
 
   it('skip: test', async () => {
     await styles;
+
     const s1 = getCriticalStyles('<div class="class2 someclass">', styles);
     const s2 = getCriticalStyles(
       '<div class="class2 someclass">',
-      alterProjectStyles(styles, { filter: x => x.indexOf('file2') !== 0 })
+      alterProjectStyles(styles, { filter: (x) => x.indexOf('file2') !== 0 })
     );
     const s3 = getCriticalStyles(
       '<div class="class2 someclass">',
-      alterProjectStyles(alterProjectStyles(styles, { filter: x => x.indexOf('file2') !== 0 }), {
-        filter: x => x.indexOf('file1') !== 0,
+      alterProjectStyles(alterProjectStyles(styles, { filter: (x) => x.indexOf('file2') !== 0 }), {
+        filter: (x) => x.indexOf('file1') !== 0,
       })
     );
 
@@ -52,9 +55,11 @@ describe('File based css stream', () => {
 
   it('memoization: test', async () => {
     await styles;
+
     const s1 = getCriticalStyles('<div class="class2 someclass">', styles);
     // @ts-expect-error
     delete styles.ast.file2;
+
     const s2 = getCriticalStyles('<div class="class2 someclass">', styles);
     const s3 = getCriticalStyles('<div class="class2 somethingNotUsed">', styles);
 
@@ -142,15 +147,18 @@ describe('React css stream', () => {
 
     const streamString = async (readStream: NodeJS.ReadableStream) => {
       const result = [];
+
       for await (const chunk of readStream) {
         result.push(chunk);
       }
+
       return result.join('');
     };
 
     it('setup', () => {
       criticalStream = createCriticalStyleStream(lookup);
       cssStream = createStyleStream(lookup, createLink);
+
       output = renderToStaticNodeStream(
         <div>
           <div className="a">
@@ -172,9 +180,9 @@ describe('React css stream', () => {
       );
     });
 
-    let htmlCritical: string = '';
-    let htmlLink: string = '';
-    let html: string = '';
+    let htmlCritical = '';
+    let htmlLink = '';
+    let html = '';
 
     it('render', async () => {
       // tslint:disable variable-name

package.json

@@ -3,6 +3,9 @@
   "version": "2.2.0",
   "description": "Collect styles used on to create a page",
   "main": "dist/es5/index.js",
+  "jsnext:main": "dist/es2015/index.js",
+  "module": "dist/es2015/index.js",
+  "types": "dist/es5/index.d.ts",
   "scripts": {
     "build": "lib-builder build && yarn size:report",
     "test": "jest",
@@ -23,19 +26,14 @@
   "author": "theKashey <thekashey@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^2.1.6",
-    "@theuiteam/lib-builder": "0.1.4"
+    "@theuiteam/lib-builder": "0.1.4",
+    "@size-limit/preset-small-lib": "^2.1.6"
   },
   "engines": {
     "node": ">=10"
   },
-  "jsnext:main": "dist/es2015/index.js",
-  "module": "dist/es2015/index.js",
-  "types": "dist/es5/index.d.ts",
   "files": [
-    "dist",
-    "*.js",
-    "*.d.ts"
+    "dist"
   ],
   "keywords": [
     "nodejs",
@@ -45,15 +43,20 @@
     "code splitting"
   ],
   "dependencies": {
+    "tslib": "^2.3.1",
     "crc-32": "^1.2.0",
     "kashe": "^1.0.4",
     "postcss": "^7.0.17",
-    "scan-directory": "^1.0.0",
-    "tslib": "^2.3.1"
+    "scan-directory": "^1.0.0"
   },
   "peerDependencies": {
-    "@types/react": "^16.9.0",
-    "react": "^16.9.0"
+    "react": "^16.9.0",
+    "@types/react": "^16.9.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "husky": {
     "hooks": {
@@ -63,7 +66,7 @@
   "lint-staged": {
     "*.{ts,tsx}": [
       "prettier --write",
-      "tslint --fix",
+      "eslint --fix",
       "git add"
     ],
     "*.{js,css,json,md}": [
@@ -77,5 +80,6 @@
     "tabWidth": 2,
     "semi": true,
     "singleQuote": true
-  }
+  },
+  "module:es2019": "dist/es2019/index.js"
 }