fix: 🎨 Fix google fonts css class name (#18)

Author: damianpumar

demo/analog-app/src/app/pages/index.page.ts

@@ -6,8 +6,8 @@ import { Component } from '@angular/core';
   template: `
     <div>
       <h1>Google</h1>
-      <p class="poppins">Poppins</p>
-      <p class="press-start">Press Start 2P</p>
+      <p class="google-poppins">Poppins</p>
+      <p class="google-press-start">Press Start 2P</p>
 
       <h1>Bunny</h1>
       <p class="bunny-aclonica">Aclonica</p>

demo/qwik-app/src/routes/index.tsx

@@ -1,5 +1,5 @@
-import type { DocumentHead } from '@qwik.dev/router';
 import { component$, useStyles$ } from '@qwik.dev/core';
+import type { DocumentHead } from '@qwik.dev/router';
 import styles from './index.css?inline';
 
 export default component$(() => {
@@ -8,8 +8,8 @@ export default component$(() => {
   return (
     <div>
       <h1>Google</h1>
-      <p class="poppins">Poppins</p>
-      <p class="press-start">Press Start 2P</p>
+      <p class="google-poppins">Poppins</p>
+      <p class="google-press-start">Press Start 2P</p>
 
       <h1>Bunny</h1>
       <p class="bunny-aclonica">Aclonica</p>

demo/react-app/src/App.tsx

@@ -4,8 +4,8 @@ function App() {
   return (
     <div>
       <h1>Google</h1>
-      <p className="poppins">Poppins</p>
-      <p className="press-start">Press Start 2P</p>
+      <p className="google-poppins">Poppins</p>
+      <p className="google-press-start">Press Start 2P</p>
 
       <h1>Bunny</h1>
       <p className="bunny-aclonica">Aclonica</p>

demo/remix-app/app/routes/_index.tsx

@@ -13,8 +13,8 @@ export default function Index() {
   return (
     <div>
       <h1>Google</h1>
-      <p className="poppins">Poppins</p>
-      <p className="press-start">Press Start 2P</p>
+      <p className="google-poppins">Poppins</p>
+      <p className="google-press-start">Press Start 2P</p>
 
       <h1>Bunny</h1>
       <p className="bunny-aclonica">Aclonica</p>

demo/solid-app/src/App.tsx

@@ -4,8 +4,8 @@ function App() {
   return (
     <div>
       <h1>Google</h1>
-      <p class="poppins">Poppins</p>
-      <p class="press-start">Press Start 2P</p>
+      <p class="google-poppins">Poppins</p>
+      <p class="google-press-start">Press Start 2P</p>
 
       <h1>Bunny</h1>
       <p class="bunny-aclonica">Aclonica</p>

demo/svelte-app/src/App.svelte

@@ -1,8 +1,8 @@
 <main>
   <div>
     <h1>Google</h1>
-    <p class="poppins">Poppins</p>
-    <p class="press-start">Press Start 2P</p>
+    <p class="google-poppins">Poppins</p>
+    <p class="google-press-start">Press Start 2P</p>
 
     <h1>Bunny</h1>
     <p class="bunny-aclonica">Aclonica</p>

demo/vanilla-app/src/main.ts

@@ -3,8 +3,8 @@ import './style.css';
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
     <div>
       <h1>Google</h1>
-      <p class="poppins">Poppins</p>
-      <p class="press-start">Press Start 2P</p>
+      <p class="google-poppins">Poppins</p>
+      <p class="google-press-start">Press Start 2P</p>
 
       <h1>Bunny</h1>
       <p class="bunny-aclonica">Aclonica</p>

demo/vue-app/src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <h1>Google</h1>
-    <p class="poppins">Poppins</p>
-    <p class="press-start">Press Start 2P</p>
+    <p class="google-poppins">Poppins</p>
+    <p class="google-press-start">Press Start 2P</p>
 
     <h1>Bunny</h1>
     <p class="bunny-aclonica">Aclonica</p>