useflyyer/create-flyyer-app

Scaffold everything you need to create a https://flyyer.io template | Generate social media images and og:image

create-flyyer-app's Issues

Error: Failed to load config "xo-typescript" to extend from.

There is an error with xo when running yarn format.

Error: Failed to load config "xo-typescript" to extend from.
Referenced from: BaseConfig
    at configInvalidError ...

A workaround is manually installing the missing dependency 👇

yarn add --dev eslint-config-xo-typescript

TailwindCSS 2: default tailwind.config.js discussion

Open thread to discuss the best default tailwind.config.js for flayyer projects.

postcss - npm ERR! ERESOLVE unable to resolve dependency tree

If you have this error with Tailwind csss:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.0.0" from @fullhuman/[email protected]
npm ERR! node_modules/@fullhuman/postcss-purgecss
npm ERR!   dev @fullhuman/postcss-purgecss@"^4.0.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/lopezjurip/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/redacted/.npm/_logs/2021-07-16T17_20_25_893Z-debug.log

A possible solution is removing the explicit postcss dependency in your package.json

-  "postcss": "^7",

Then run npm install

react-typescript-tailwind "purge" does not work

Purging is not working. We should try to use https://www.npmjs.com/package/@fullhuman/postcss-purgecss to see if that works.

Here is the output when building a deck with created with the react-typescript-tailwind template.

✨  Built in 3.28s.

.flayyer-dist/flayyer-main.ce7127e9.css      ⚠️  3 MB     22ms
.flayyer-dist/flayyer-main.a5590a07.js     290.53 KB    456ms
.flayyer-dist/background.bad75c3f.jpg       63.68 KB     17ms
.flayyer-dist/logo.c1e61a7b.svg              1.91 KB     17ms
.flayyer-dist/main.html                        271 B    2.73s
🌠   flayyer project successfully built!

Note the 3MB for css.

tailwind.config.js extend config doesn't work

I have extended my tailwind.config.js like this:

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === "production",
    content: [
      "./templates/**/*.ts",
      "./templates/**/*.tsx",
      "./templates/**/*.js",
      "./templates/**/*.jsx",
      "./components/**/*.ts",
      "./components/**/*.tsx",
      "./components/**/*.js",
      "./components/**/*.jsx",
      "./styles/**/*.css",
      "./styles/**/*.scss",
      "./styles/**/*.sass",
      "./styles/**/*.less",
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        secondary: "#071d49",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

And if i hover in the class, is detected by Tailwind CSS Intellisense in a correct way

The problem is that is not being rendered in the browser

All the rest of the default classes works, but if i add a custom class it's like doesn't compile

Hot-Module-Replacement not working

Something changes are not immediately reflected, this may be caused by Parcel V1 (which is being deprecated). If you have this issue please:

1. Stop your current dev server (started by $ flyyer start)
2. Remove .flyyer-* directories: rm -rf .flyyer-*
3. Start dev server again $ flyyer start

We are planing to move to Vite or Parcel V2 in the next major release

EDIT:

PR in process: Use the next version: useflyyer/flyyer-cli#17