Problems with @charset "utf-8"; [animate.css doesn't work]

evilmonkey19 commented 9 months ago

Hi dinasours,

First of all, congratulations for the awesome framework you are creating. I really love it! ❤️ It's awesome how intuitive it is. Please, keep with this awesome ecosystem you're creating around Deno. Most of my new projects, I'm starting them with Deno.

I was trying to use the library animate.css and came across a small issue to integrate it with fresh. If I add it via a CDN there isn't any trouble in the integration. However, when i try to use via npm it always through the following error:

error: Uncaught (in promise) TypeError: Expression expected at file:///Users/.../Developer/cv/node_modules/.deno/animate.css@4.1.1/node_modules/animate.css/animate.css:1:1

  @charset "utf-8";/*!
  ~
  const manifest = (await import(toFileUrl(join(dir, "fresh.gen.ts")).href))
                    ^
    at async dev (https://deno.land/x/fresh@1.6.0/src/dev/dev_command.ts:38:21)
    at async file:///Users/.../Developer/cv/dev.ts:8:1

I tried to look into the animate.css file and I found out that it starts as:

@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
...

Everything seems correct and I don't know where is the error. Can someone help me?

Thank you, evilmonkey19

I add some file which maybe helpful:

deno.json

{
  "nodeModulesDir": true,
  "lock": false,
  "tasks": {
    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts",
    "update": "deno run -A -r https://fresh.deno.dev/update ."
  },
  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
  "exclude": ["**/_fresh/*"],
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.0/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "$std/": "https://deno.land/std@0.193.0/",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "animate.css": "npm:animate.css@4.1.1"
  },
  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" }
}

app.tsx

import { AppProps } from "$fresh/server.ts";
import 'animate.css'; <-- the problem

export default function App({ Component }: AppProps) {
  return (
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> */}
        <link rel="stylesheet" href="/styles.css" />
        <link rel="icon" href="/favicon.ico" />
        <title>Title</title>
      </head>
      <body className="bg-black">
        <Component />
      </body>
    </html>
  );
}

If you need any other file, please let me know!

marvinhagemeister commented 9 months ago

Thanks for the kind words! Happy to hear that you enjoy the framework.

At the moment Fresh doesn't pre-transpile code, other than creating bundles for islands. This means that deno receives the .css import and get's confused because it doesn't understand them. It's something I'm hoping to address for the next release. Spent some time this cycle already on exploring all the possible options, but it needs more time to bake.

Long story short, for now CSS files can be either loaded from CDN or by putting them in Fresh's static/ directory and pointing the <link>-tag to that.

evilmonkey19 commented 9 months ago

Thank you very much for the quick answer! I will use for now your suggestions of the CDN and the static/.

denoland / fresh

Problems with @charset "utf-8"; [animate.css doesn't work] #2115

deno.json

app.tsx