chore: upgrade parcel to v2 (alpha) (#96)

smeijer · web-flow · commit 82b694e83d90 · 2020-06-05T15:57:33.000+02:00
parcel v1 had some trouble with node modules that are importing core-js polyfills.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,6 @@
 {
-  "presets": ["@babel/preset-react","@babel/preset-env"]
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 .rts2_cache*
 .idea
 .cache
+.parcel-cache
+
 dist/
 node_modules/
 
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,7 @@
+{
+  "extends": ["@parcel/config-default"],
+  "transformers": {
+    "*.pcss": ["@parcel/transformer-postcss"],
+    "*.css": ["@parcel/transformer-postcss"],
+  },
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,13 +2,12 @@
   "name": "testing-playground",
   "version": "1.0.0",
   "description": "",
-  "main": "src/index.html",
   "scripts": {
     "start": "run-s start:client",
-    "start:client": "parcel src/index.html --out-dir dist/client",
+    "start:client": "parcel src/index.html --open",
     "start:embed": "parcel src/embed.html --open",
     "build": "run-s clean build:client build:server",
-    "build:client": "parcel build src/index.html src/embed.js --out-dir dist/client",
+    "build:client": "parcel build src/index.html src/embed.js --dist-dir dist/client",
     "postbuild:client": "mkdir -p dist/client/public && cp _redirects dist/client/_redirects && cp public/favicon.ico dist/client/favicon.ico && cp public/android-chrome-512x512.png dist/client/public/icon.png && cp -r .well-known dist/client/.well-known",
     "build:server": "cp -r src/lambda/ dist/server",
     "postbuild:server": "mkdir -p dist/server/server && mv dist/client/index.html dist/server/server/",
@@ -50,8 +49,8 @@
     "jest": "^26.0.1",
     "lint-staged": "^10.2.2",
     "npm-run-all": "^4.1.5",
-    "parcel-bundler": "^1.6.1",
-    "postcss-easy-import": "^3.0.0",
+    "parcel": "^2.0.0-nightly.280",
+    "postcss-import": "^12.0.1",
     "postcss-modules": "^2.0.0",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,9 +1,9 @@
 const tailwindcss = require('tailwindcss');
-const easyImport = require('postcss-easy-import');
+const atImport = require('postcss-import');
 
 const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
 
-const plugins = [easyImport, tailwindcss];
+const plugins = [atImport, tailwindcss];
 
 if (!IS_DEVELOPMENT) {
   const purgecss = require('@fullhuman/postcss-purgecss');
@@ -18,7 +18,7 @@ if (!IS_DEVELOPMENT) {
     purgecss({
       content: ['src/*.html', 'src/**/*.js'],
       whitelist: ['body', /CodeMirror/],
-      whitelistPatternsChildren: [/CodeMirror/],
+      whitelistPatternsChildren: [/CodeMirror/, /cm-s-dracula/],
       defaultExtractor: TailwindExtractor.extract,
     }),
   );
diff --git a/src/components/AddHtml.js b/src/components/AddHtml.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import icon from '../../public/code_thinking.png';
+import icon from 'url:~/public/code_thinking.png';
 
 function AddHtml() {
   return (
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import icon from '../../public/favicon-32x32.png';
+import icon from 'url:~/public/favicon-32x32.png';
 import { links } from '../constants';
 
 const headerLinks = [
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Testing Playground</title>
-    <link rel="stylesheet" href="styles/app.pcss" />
+    <link rel="stylesheet" href="styles/index.css" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="../public/apple-touch-icon.png">
     <link rel="shortcut icon" type="image/x-icon" href="../public/favicon.ico">
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -0,0 +1,7 @@
+/**
+ * Don't rename this file to .pcss, parcel 2 doesn't change the extension, and
+ * browers won't recognize the mime type. We keep using the correct extension
+ * for other files to enable proper syntax highlighting.
+ */
+@import './app.pcss';
+@import './codemirror.pcss';

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
`1`	`1`	`{`
`2`		`- "presets": ["@babel/preset-react","@babel/preset-env"]`
	`2`	`+ "presets": [`
	`3`	`+ "@babel/preset-react",`
	`4`	`+ "@babel/preset-env"`
	`5`	`+ ]`
`3`	`6`	`}`