flyyer-cli@next: Move from Parcel 1 to Parcel 2

[lopezjurip]

This major change upgrades Parcel 1 to the latest RC build of Parcel 2. This is still experimental but it's worth the try to improve TailwindCSS compatibility and more.

Example project using this new version: https://github.com/useflyyer/flyyer-marketplace-angled

Upgrade

Note: importing .svg is failing ⚠️

To install in your project created with create-flyyer-app run:

yarn add --dev @flyyer/cli@next
yarn add @flyyer/proxy@latest

# Add this explicit dependencies if you have issues with just the previous command
yarn add --dev @parcel/config-default @parcel/transformer-image

To debug info execute with DEBUG=* environment variable. Eg: $ DEBUG=* yarn start

TypeScript

If for some reason you are having problems with TypeScript please modify your tsconfig file:

{
  "compilerOptions": {
    ...
+    "target": "esnext",
+    "moduleResolution": "node",
    ...
  }
}

Tailwind CSS

Upgrade your Tailwind setup:

yarn remove @fullhuman/postcss-purgecss @tailwindcss/postcss7-compat
yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

Enable JIT mode:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './.flyyer-processed/**/*.{html,js,jsx,ts,tsx,vue,vuex,css,scss,sass,less}',
    './templates/**/*.{html,js,jsx,ts,tsx,vue,vuex,css,scss,sass,less}',
    './components/**/*.{html,js,jsx,ts,tsx,vue,vuex,css,scss,sass,less}',
    './styles/**/*.{html,js,jsx,ts,tsx,vue,vuex,css,scss,sass,less}'
  ],
  // ...
};