fix(next): fixed issue for multi pages next applications

examples/next/src/app/another-page/page.module.css

@@ -0,0 +1,7 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}

examples/next/src/app/another-page/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next';
+import { Button } from '@/components/Button';
+import { Main } from '@/components/Main';
+import { createUseStyle } from '@morfeo/css';
+import { Link } from '@/components/Link';
+
+export const metadata: Metadata = {
+  title: 'Morfeo | NextJS',
+  description: '',
+};
+
+const useStyle = createUseStyle({
+  componentName: 'Card',
+  p: 'm',
+  my: 'xl',
+});
+
+export default function AnotherPage() {
+  const { className, style } = useStyle();
+  return (
+    <Main>
+      <div className={className} style={style}>
+        <Button>Here is another page</Button>
+      </div>
+      <Link href="/">{'<- '}Go back</Link>
+    </Main>
+  );
+}

examples/next/src/app/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 *, *::before, *::after {
   box-sizing: border-box;
 }

examples/next/src/app/page.tsx

@@ -1,7 +1,8 @@
 import { Metadata } from 'next';
 import { Button } from '@/components/Button';
 import { Card } from '@/components/Card';
-import styles from './page.module.css';
+import { Main } from '@/components/Main';
+import { Link } from '@/components/Link';
 
 export const metadata: Metadata = {
   title: 'Morfeo | NextJS',
@@ -13,7 +14,7 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className={styles.main}>
+    <Main>
       <Card direction="left">
         <Card direction="right">
           <Card direction="left">
@@ -27,6 +28,7 @@ export default function Home() {
           </Card>
         </Card>
       </Card>
-    </main>
+      <Link href="/another-page">Go to another page</Link>
+    </Main>
   );
 }

examples/next/src/components/Button.tsx

@@ -1,27 +1,20 @@
 'use client';
 
 import { ButtonHTMLAttributes, DetailedHTMLProps, useState } from 'react';
-import { Montserrat } from 'next/font/google';
 import { useButton } from './Button.morfeo';
 
 type ButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 >;
 
-const montserrat = Montserrat({
-  subsets: ['latin'],
-});
-
 const variants = ['primary', 'secondary'] as const;
 
 export const Button: React.FC<ButtonProps> = props => {
   const [variantIndex, setVariantIndex] = useState<number>(0);
 
   const { className, style } = useButton({
     variant: variants[variantIndex],
-    className: montserrat.className,
-    style: montserrat.style,
   });
 
   function onClick() {

examples/next/src/components/Link.tsx

@@ -0,0 +1,15 @@
+import { createUseStyle } from '@morfeo/css';
+import NextLink from 'next/link';
+import { ComponentProps } from 'react';
+
+type LinkProps = ComponentProps<typeof NextLink>;
+
+const useLink = createUseStyle({
+  componentName: 'Typography',
+  variant: 'link',
+});
+
+export const Link: React.FC<LinkProps> = props => {
+  const { className, style } = useLink();
+  return <NextLink {...props} className={className} style={style} />;
+};

examples/next/src/components/Main.tsx

@@ -0,0 +1,20 @@
+import { createUseStyle } from '@morfeo/css';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+type CardProps = DetailedHTMLProps<
+  HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>;
+
+const useMain = createUseStyle({
+  display: 'flex',
+  minHeight: '100vh',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+export const Main: React.FC<CardProps> = props => {
+  const { className, style } = useMain();
+  return <div {...props} className={className} style={style} />;
+};

examples/react/src/App.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 *, *::before, *::after {
   box-sizing: border-box;
 }

packages/compiler/src/utils.ts

@@ -8,15 +8,16 @@ export const MORFEO_CSS_PATH = path.join(
   'morfeo.css',
 );
 
+if (!fs.existsSync(path.dirname(MORFEO_CSS_PATH))) {
+  fs.mkdirSync(path.dirname(MORFEO_CSS_PATH));
+}
+
+fs.writeFileSync(MORFEO_CSS_PATH, ``);
+
 export const MORFEO_VIRTUAL_MODULE_PREFIX = 'virtual:morfeo';
 
 function createCssWriter() {
   let css = '';
-  if (!fs.existsSync(path.dirname(MORFEO_CSS_PATH))) {
-    fs.mkdirSync(path.dirname(MORFEO_CSS_PATH));
-  }
-
-  fs.writeFileSync(MORFEO_CSS_PATH, ``);
 
   function collect(content: string) {
     css += content;