github actions (#381)

* github actions

* update test yml

* rename file & job

* update jest

* install specifically what's in the lockfile

* proper yarn caching

* small jest update

* switch to inline snapshot

* fix eslint

* lint

* cleanup and fix test

* idk why this is being weird

* set baseline node version to 12

* idk

* dep upgrades

* update babel-jest to match jest

* this is some bullshit

* move statement

* update css dependency and a misc one

.babelrc

@@ -1,10 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"]
 }

.eslintignore

@@ -0,0 +1 @@
+**/*.snap

.eslintrc

@@ -3,5 +3,6 @@
   "env": {
     "jest": true
   },
-  "parser": "babel-eslint"
+  "parser": "babel-eslint",
+  "plugins": ["prettier"]
 }

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on: [push, pull_request_target]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v1
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install modules
+        run: yarn --pure-lockfile
+
+      - name: Run tests
+        run: yarn test

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [main]
+  schedule:
+    - cron: "30 21 * * 0"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.gitignore

@@ -1 +1,2 @@
 node_modules
+yarn-error.log

package.json

@@ -14,12 +14,11 @@
   "author": "Michele Bertoli",
   "license": "MIT",
   "scripts": {
-    "test": "yarn test:web && yarn test:native && yarn test:preact && yarn test:ts",
-    "test:web": "jest",
+    "test": "yarn test:web && yarn test:native && yarn test:preact",
+    "test:web": "jest --color",
     "test:web:watch": "jest --watch",
-    "test:native": "jest --config .jest.native.json",
-    "test:preact": "jest --config .jest.preact.json",
-    "test:ts": "tsc --strict ./typings/index.d.ts"
+    "test:native": "jest --color --config .jest.native.json",
+    "test:preact": "jest --color --config .jest.preact.json"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -30,29 +29,29 @@
     "@testing-library/react": "^9.3.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^26.0.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-preact-pure": "^2.2.0",
     "enzyme-adapter-react-16": "^1.5.0",
     "enzyme-to-json": "^3.3.1",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.5.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "husky": "^3.0.9",
-    "jest": "^24.8.0",
+    "jest": "^26.0.0",
     "lint-staged": "^9.4.2",
     "preact": "^10.0.0-beta.2",
     "preact-render-to-json": "^3.6.6",
-    "prettier": "^1.18.2",
+    "prettier": "^2.3.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-is": "^16.8.6",
     "react-native": "^0.61.4",
     "react-test-renderer": "^16.8.0",
-    "styled-components": "^5.0.0",
-    "typescript": "^3.0.3"
+    "styled-components": "^5.0.0"
   },
   "dependencies": {
-    "css": "^2.2.4"
+    "css": "^3.0.0"
   },
   "peerDependencies": {
     "styled-components": ">= 5"
@@ -82,5 +81,8 @@
       "<rootDir>/test/native",
       "<rootDir>/test/preact"
     ]
+  },
+  "engines": {
+    "node": ">= 12"
   }
 }

src/native/toHaveStyleRule.js

@@ -1,30 +1,25 @@
-const { matcherTest, buildReturnMessage } = require('../utils')
+const { matcherTest, buildReturnMessage } = require('../utils');
 
 function toHaveStyleRule(component, property, expected) {
-  const styles = component.props.style.filter(x => x)
+  const styles = component.props.style.filter((x) => x);
 
   /**
    * Convert style name to camel case (so we can compare)
    */
-  const camelCasedProperty = property.replace(/-(\w)/, (_, match) =>
-    match.toUpperCase()
-  )
+  const camelCasedProperty = property.replace(/-(\w)/, (_, match) => match.toUpperCase());
 
   /**
    * Merge all styles into one final style object and search for the desired
    * stylename against this object
    */
-  const mergedStyles = styles.reduce((acc, item) => (Object.assign({}, acc, item )), {})
-  const received = mergedStyles[camelCasedProperty]
-  const pass =
-    !received && !expected && this.isNot
-      ? false
-      : matcherTest(received, expected)
+  const mergedStyles = styles.reduce((acc, item) => Object.assign({}, acc, item), {});
+  const received = mergedStyles[camelCasedProperty];
+  const pass = !received && !expected && this.isNot ? false : matcherTest(received, expected);
 
   return {
     pass,
     message: buildReturnMessage(this.utils, pass, property, received, expected),
-  }
+  };
 }
 
-module.exports = toHaveStyleRule
+module.exports = toHaveStyleRule;

src/styleSheetSerializer.js

@@ -9,16 +9,16 @@ const getNodes = (node, nodes = []) => {
   }
 
   if (node.children) {
-    Array.from(node.children).forEach(child => getNodes(child, nodes));
+    Array.from(node.children).forEach((child) => getNodes(child, nodes));
   }
 
   return nodes;
 };
 
-const markNodes = nodes => nodes.forEach(node => (node[KEY] = true));
+const markNodes = (nodes) => nodes.forEach((node) => (node[KEY] = true));
 
-const getClassNamesFromDOM = node => Array.from(node.classList);
-const getClassNamesFromProps = node => {
+const getClassNamesFromDOM = (node) => Array.from(node.classList);
+const getClassNamesFromProps = (node) => {
   const classNameProp = node.props && (node.props.class || node.props.className);
 
   if (classNameProp) {
@@ -28,7 +28,7 @@ const getClassNamesFromProps = node => {
   return [];
 };
 
-const getClassNames = nodes =>
+const getClassNames = (nodes) =>
   nodes.reduce((classNames, node) => {
     let newClassNames = null;
 
@@ -38,36 +38,40 @@ const getClassNames = nodes =>
       newClassNames = getClassNamesFromProps(node);
     }
 
-    newClassNames.forEach(className => classNames.add(className));
+    newClassNames.forEach((className) => classNames.add(className));
 
     return classNames;
   }, new Set());
 
-const filterClassNames = (classNames, hashes) => classNames.filter(className => hashes.includes(className));
-const filterUnreferencedClassNames = (classNames, hashes) => classNames.filter(className => className.startsWith('sc-') && !hashes.includes(className));
+const filterClassNames = (classNames, hashes) => classNames.filter((className) => hashes.includes(className));
+const filterUnreferencedClassNames = (classNames, hashes) =>
+  classNames.filter((className) => className.startsWith('sc-') && !hashes.includes(className));
 
 const includesClassNames = (classNames, selectors) =>
-  classNames.some(className => selectors.some(selector => selector.includes(className)));
+  classNames.some((className) => selectors.some((selector) => selector.includes(className)));
 
 const includesUnknownClassNames = (classNames, selectors) =>
   !selectors
-    .flatMap(selector => selector.split(' '))
-    .filter(chunk => chunk.includes('sc-'))
-    .every(chunk => classNames.some(className => chunk.includes(className)))
+    .flatMap((selector) => selector.split(' '))
+    .filter((chunk) => chunk.includes('sc-'))
+    .every((chunk) => classNames.some((className) => chunk.includes(className)));
 
-const filterRules = classNames => rule =>
-  rule.type === 'rule' && !includesUnknownClassNames(classNames, rule.selectors) && includesClassNames(classNames, rule.selectors) && rule.declarations.length;
+const filterRules = (classNames) => (rule) =>
+  rule.type === 'rule' &&
+  !includesUnknownClassNames(classNames, rule.selectors) &&
+  includesClassNames(classNames, rule.selectors) &&
+  rule.declarations.length;
 
 const getAtRules = (ast, filter) =>
   ast.stylesheet.rules
-    .filter(rule => rule.type === 'media' || rule.type === 'supports')
+    .filter((rule) => rule.type === 'media' || rule.type === 'supports')
     .reduce((acc, atRule) => {
       atRule.rules = atRule.rules.filter(filter);
 
       return acc.concat(atRule);
     }, []);
 
-const getStyle = classNames => {
+const getStyle = (classNames) => {
   const ast = getCSS();
   const filter = filterRules(classNames);
   const rules = ast.stylesheet.rules.filter(filter);
@@ -83,10 +87,10 @@ const getClassNamesFromSelectorsByHashes = (classNames, hashes) => {
   const filter = filterRules(classNames);
   const rules = ast.stylesheet.rules.filter(filter);
 
-  const selectors = rules.map(rule => rule.selectors);
+  const selectors = rules.map((rule) => rule.selectors);
   const classNamesIncludingFromSelectors = new Set(classNames);
-  const addHashFromSelectorListToClassNames = hash =>
-    selectors.forEach(selectorList => selectorList[0].includes(hash) && classNamesIncludingFromSelectors.add(hash));
+  const addHashFromSelectorListToClassNames = (hash) =>
+    selectors.forEach((selectorList) => selectorList[0].includes(hash) && classNamesIncludingFromSelectors.add(hash));
 
   hashes.forEach(addHashFromSelectorListToClassNames);
 
@@ -95,12 +99,11 @@ const getClassNamesFromSelectorsByHashes = (classNames, hashes) => {
 
 const replaceClassNames = (result, classNames, style) =>
   classNames
-    .filter(className => style.includes(className))
+    .filter((className) => style.includes(className))
     .reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result);
 
 const stripUnreferencedClassNames = (result, classNames) =>
-    classNames
-      .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`,'g'), ''), result);
+  classNames.reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`, 'g'), ''), result);
 
 const replaceHashes = (result, hashes) =>
   hashes.reduce(