Run Prettier on all supported files, not only JS

.codesandbox/ci.json

@@ -1,5 +1,8 @@
 {
-  "packages": ["packages/react-native-web", "packages/babel-plugin-react-native-web"],
+  "packages": [
+    "packages/react-native-web",
+    "packages/babel-plugin-react-native-web"
+  ],
   "buildCommand": "build",
   "sandboxes": ["/packages/react-native-web-examples/"],
   "node": "16"

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,6 +1,6 @@
 name: Bug report
 description: File a bug report
-labels: ["bug"]
+labels: ['bug']
 body:
   - type: markdown
     attributes:
@@ -11,8 +11,8 @@ body:
       label: Is there an existing issue for this?
       description: Please search to see if an issue already exists for the bug you encountered.
       options:
-      - label: I have searched the existing issues
-        required: true
+        - label: I have searched the existing issues
+          required: true
   - type: textarea
     attributes:
       label: Describe the issue
@@ -39,7 +39,7 @@ body:
     attributes:
       label: Test case
       description: Please provide a link to a reduced test case that reproduces the issue.
-      placeholder: "https://codesandbox.io/s/6lx6ql1w5r"
+      placeholder: 'https://codesandbox.io/s/6lx6ql1w5r'
     validations:
       required: true
   - type: textarea

.github/ISSUE_TEMPLATE/feature.yml

@@ -1,6 +1,6 @@
 name: Feature request
 description: If you have a suggestion…
-labels: ["enhancement"]
+labels: ['enhancement']
 body:
   - type: markdown
     attributes:
@@ -11,8 +11,8 @@ body:
       label: Is there an existing request?
       description: Please search open and closed issues to see if this request has already been made.
       options:
-      - label: I have searched for this request
-        required: true
+        - label: I have searched for this request
+          required: true
   - type: textarea
     attributes:
       label: Describe the feature request

.github/labels-config.yml

@@ -1,10 +1,10 @@
 # Configuration for Label Actions - https://github.com/marketplace/actions/label-actions
 
-"needs: issue template":
+'needs: issue template':
   comment: >
     <strong>:warning: This issue is missing required fields</strong>. To avoid this issue being closed, please provide the required information as described in the <a href="https://github.com/necolas/react-native-web/blob/master/.github/ISSUE_TEMPLATE/bug.yml">ISSUE TEMPLATE</a>.
 
-"resolution: no response":
+'resolution: no response':
   comment: >
     This issue is being closed because the requested information has not been provided.
   close: true

.github/workflows/performance.yml

@@ -6,10 +6,10 @@ jobs:
   compressed-size:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: necolas/compressed-size-action@master
-      with:
-        build-script: "compile"
-        exclude: "./packages/react-native-web/dist/cjs/{index.js,**/*.js}"
-        pattern: "./packages/react-native-web/dist/{index.js,**/*.js}"
-        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+      - uses: actions/checkout@v3
+      - uses: necolas/compressed-size-action@master
+        with:
+          build-script: 'compile'
+          exclude: './packages/react-native-web/dist/cjs/{index.js,**/*.js}'
+          pattern: './packages/react-native-web/dist/{index.js,**/*.js}'
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/react-integration.yml

@@ -9,12 +9,12 @@ jobs:
   react-next:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: npm install
-    # Update react-native-web to use react@next
-    - run: npm install --force react@next react-dom@next -w react-native-web
-    # Run the unit tests
-    - run: npm run unit
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      # Update react-native-web to use react@next
+      - run: npm install --force react@next react-dom@next -w react-native-web
+      # Run the unit tests
+      - run: npm run unit

.github/workflows/tests.yml

@@ -3,47 +3,47 @@ name: tests
 on:
   push:
     branches:
-      - "master"
+      - 'master'
   pull_request:
     types: [opened, synchronize, reopened]
 
 jobs:
   format:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: npm install
-    - run: npm run format
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run format
 
   type-check:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: npm install
-    - run: npm run flow
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run flow
 
   lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: npm install
-    - run: npm run lint
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run lint
 
   unit-test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 16
-    - run: npm install
-    - run: npm run unit
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run unit

README.md

@@ -4,27 +4,27 @@ This is the development monorepo for "React Native for Web" and related projects
 
 ## Structure
 
-* `.github`
-  * Contains workflows used by GitHub Actions.
-  * Contains issue templates.
-* `configs`
-  * Contains configuration files used by the monorepo tooling (compiling, linting, testing, etc.)
-* `packages`
-  * [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web)
-  * Contains the individual packages managed in the monorepo.
-* `scripts`
-  * Contains Node.js scripts for miscellaneous tasks.
+- `.github`
+  - Contains workflows used by GitHub Actions.
+  - Contains issue templates.
+- `configs`
+  - Contains configuration files used by the monorepo tooling (compiling, linting, testing, etc.)
+- `packages`
+  - [react-native-web](https://github.com/necolas/react-native-web/blob/master/packages/react-native-web)
+  - Contains the individual packages managed in the monorepo.
+- `scripts`
+  - Contains Node.js scripts for miscellaneous tasks.
 
 ## Tasks
 
-* `build`
-  * Use `npm run build` to run the build script in every package.
-  * Use `npm run build -w <package-name>` to run the build script for a specific package.
-* `dev`
-  * Use `npm run dev` to run the dev script in every package.
-  * Use `npm run dev -w <package-name>` to run the dev script for a specific package.
-* `test`
-  * Use `npm run test` to run tests for every package.
+- `build`
+  - Use `npm run build` to run the build script in every package.
+  - Use `npm run build -w <package-name>` to run the build script for a specific package.
+- `dev`
+  - Use `npm run dev` to run the dev script in every package.
+  - Use `npm run dev -w <package-name>` to run the dev script for a specific package.
+- `test`
+  - Use `npm run test` to run tests for every package.
 
 More details can be found in the contributing guide below.
 

configs/.eslintrc

@@ -17,16 +17,8 @@
     "requireConfigFile": false,
     "sourceType": "module"
   },
-  "extends": [
-    "plugin:flowtype/recommended",
-    "prettier"
-  ],
-  "plugins": [
-    "flowtype",
-    "promise",
-    "react",
-    "react-hooks"
-  ],
+  "extends": ["plugin:flowtype/recommended", "prettier"],
+  "plugins": ["flowtype", "promise", "react", "react-hooks"],
   "env": {
     "browser": true,
     "es6": true,
@@ -41,15 +33,13 @@
     "packages/**/vendor/*",
     "packages/**/.next"
   ],
-  "globals": {
-
-  },
+  "globals": {},
   "rules": {
     "camelcase": 0,
     "constructor-super": 2,
     "default-case": [2, { "commentPattern": "^no default$" }],
     "eqeqeq": [2, "allow-null"],
-    "handle-callback-err": [2, "^(err|error)$" ],
+    "handle-callback-err": [2, "^(err|error)$"],
     "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
     "no-alert": 1,
     "no-array-constructor": 2,
@@ -126,7 +116,11 @@
     "no-with": 2,
     "prefer-const": 2,
     "prefer-rest-params": 2,
-    "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
+    "quotes": [
+      2,
+      "single",
+      { "avoidEscape": true, "allowTemplateLiterals": true }
+    ],
     "radix": 2,
     "use-isnan": 2,
     "valid-typeof": 2,

configs/.prettierignore

@@ -4,3 +4,4 @@
 ../node_modules
 ../packages/**/vendor/*
 ../packages/**/.next
+../packages/react-native-web-docs/src/includes/**/*.html

package.json

@@ -8,8 +8,8 @@
     "compile": "npm run build",
     "dev": "npm run dev --workspaces --if-present",
     "flow": "flow --flowconfig-name ./configs/.flowconfig",
-    "format": "prettier --check --ignore-path ./configs/.prettierignore \"**/*.js\"",
-    "format:fix": "prettier --write --ignore-path ./configs/.prettierignore \"**/*.js\"",
+    "format": "prettier --check --ignore-path ./configs/.prettierignore --ignore-unknown .",
+    "format:fix": "prettier --write --ignore-path ./configs/.prettierignore --ignore-unknown .",
     "lint": "eslint configs packages scripts --config ./configs/.eslintrc",
     "lint:fix": "npm run lint -- --fix",
     "prerelease": "npm run test && npm run build",

packages/benchmarks/README.md

@@ -45,20 +45,20 @@ MacBook Pro (13-inch, Early 2011); 2.3 GHz Intel Core i5; 8 GB 1333 MHz DDR3 RAM
 
 Typical render timings: mean ± standard deviations.
 
-| Implementation                        | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
-| :--- | ---: | ---: | ---: |
-| `css-modules`                         |     `23.41` `±03.06` |     `35.38` `±06.41` |                   - |
-| `react-native-web@0.11.0`             |     `28.37` `±04.39` |     `41.50` `±05.75` |    `23.13` `±03.51` |
-| `inline-styles`                       |     `66.19` `±06.31` |    `104.22` `±10.22` |    `09.96` `±02.76` |
+| Implementation            | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
+| :------------------------ | -------------------: | -------------------: | ------------------: |
+| `css-modules`             |     `23.41` `±03.06` |     `35.38` `±06.41` |                   - |
+| `react-native-web@0.11.0` |     `28.37` `±04.39` |     `41.50` `±05.75` |    `23.13` `±03.51` |
+| `inline-styles`           |     `66.19` `±06.31` |    `104.22` `±10.22` |    `09.96` `±02.76` |
 
 ### Moto G4
 
 Moto G4 (Android 7); Octa-core (4x1.5 GHz & 4x1.2 Ghz); 2 GB RAM. Google Chrome 72.
 
 Typical render timings: mean ± standard deviations.
 
-| Implementation                        | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
-| :--- | ---: | ---: | ---: |
-| `css-modules`                         |     `71.33` `±09.68` |    `101.36` `±12.36` |                   - |
-| `react-native-web@0.11.0`             |     `83.65` `±12.40` |    `123.59` `±14.40` |    `75.41` `±07.74` |
-| `inline-styles`                       |    `188.35` `±17.69` |    `282.35` `±22.48` |    `28.10` `±06.87` |
+| Implementation            | Mount deep tree (ms) | Mount wide tree (ms) | Dynamic update (ms) |
+| :------------------------ | -------------------: | -------------------: | ------------------: |
+| `css-modules`             |     `71.33` `±09.68` |    `101.36` `±12.36` |                   - |
+| `react-native-web@0.11.0` |     `83.65` `±12.40` |    `123.59` `±14.40` |    `75.41` `±07.74` |
+| `inline-styles`           |    `188.35` `±17.69` |    `282.35` `±22.48` |    `28.10` `±06.87` |

packages/benchmarks/index.html

@@ -1,16 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Performance tests</title>
-  <meta name="viewport" content="width=device-width">
-  <style>
-    html, body { height: 100%; width: 100%; overflow: hidden; }
-    .root { height: 100%; overflow: hidden; }
-  </style>
-</head>
-<body>
-  <div class="root"></div>
-  <script src="./bundle.js"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Performance tests</title>
+    <meta name="viewport" content="width=device-width" />
+    <style>
+      html,
+      body {
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
+      .root {
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="root"></div>
+    <script src="./bundle.js"></script>
+  </body>
 </html>

packages/benchmarks/src/implementations/css-modules/box-styles.css

@@ -8,27 +8,27 @@
 }
 
 .color0 {
-  background-color: #14171A;
+  background-color: #14171a;
 }
 
 .color1 {
-  background-color: #AAB8C2;
+  background-color: #aab8c2;
 }
 
 .color2 {
-  background-color: #E6ECF0;
+  background-color: #e6ecf0;
 }
 
 .color3 {
-  background-color: #FFAD1F;
+  background-color: #ffad1f;
 }
 
 .color4 {
-  background-color: #F45D22;
+  background-color: #f45d22;
 }
 
 .color5 {
-  background-color: #E0245E;
+  background-color: #e0245e;
 }
 
 .fixed {