feat(e2e/site*): updated due to specification changes.

Author: refirst11

e2e/site/app/page.tsx

@@ -1,10 +1,19 @@
-import { E2ETest } from '@/component/style-create.css';
-import { Conflict } from '@/component/style-not-conflict.css';
+import { E2ETest } from '@/component/style-create';
+import { Conflict } from '@/component/style-not-conflict';
 import Link from 'next/link';
+import cssx from 'typedcssx';
+
+const css = cssx.create({
+  page: {
+    color: 'orange',
+  },
+});
+
 export default function Home() {
   return (
     <main>
       <h1>Typed CSS X E2E Test</h1>
+      <h2 className={css.page}>page.tsx in cssx</h2>
       <Link href="/server">Server Page</Link>
       <E2ETest />
       <Conflict />

e2e/site/app/server/page.tsx

@@ -1,4 +1,4 @@
-import { ServerComponent } from '@/component/style-server-component.css';
+import { ServerComponent } from '@/component/style-server-component';
 import Link from 'next/link';
 
 export default function Page() {

e2e/site/component/style-create.css.tsx e2e/site/component/style-create.tsxe2e/site/component/style-create.css.tsx renamed to e2e/site/component/style-create.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Style, { max_lg } from 'typedcssx';
+import cssx, { max_lg } from 'typedcssx';
 
-const styles = Style.create({
+const css = cssx.create({
   e2e: {
     color: 'pink',
     [max_lg]: {
@@ -11,15 +11,15 @@ const styles = Style.create({
   },
 });
 
-Style.global({
+cssx.global({
   h1: {
     color: 'aqua',
   },
 });
 
 export function E2ETest() {
   return (
-    <div className={styles.e2e} data-testid="e2e-test-div">
+    <div className={css.e2e} data-testid="e2e-test-div">
       Component-attach-class and Responsive-design test
     </div>
   );

…ite/component/style-not-conflict.css.tsx e2e/site/component/style-not-conflict.tsxe2e/site/component/style-not-conflict.css.tsx renamed to e2e/site/component/style-not-conflict.tsx e2e/site/component/style-not-conflict.css.tsx renamed to e2e/site/component/style-not-conflict.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Style from 'typedcssx';
+import cssx from 'typedcssx';
 
-const styles = Style.create({
+const css = cssx.create({
   test_conflict: {
     fontSize: 14,
     color: 'pink',
@@ -11,7 +11,7 @@ const styles = Style.create({
 
 export function Conflict() {
   return (
-    <span className={styles.test_conflict} data-testid="e2e-test-span">
+    <span className={css.test_conflict} data-testid="e2e-test-span">
       Not conflict test
     </span>
   );

…component/style-server-component.css.tsx …ite/component/style-server-component.tsxe2e/site/component/style-server-component.css.tsx renamed to e2e/site/component/style-server-component.tsx e2e/site/component/style-server-component.css.tsx renamed to e2e/site/component/style-server-component.tsx

@@ -1,14 +1,14 @@
-import Style from 'typedcssx';
+import cssx from 'typedcssx';
 
-const styles = Style.create({
+const css = cssx.create({
   test_server: {
     color: 'green',
   },
 });
 
 export const ServerComponent = () => {
   return (
-    <p className={styles.test_server} data-testid="e2e-test-p">
+    <p className={css.test_server} data-testid="e2e-test-p">
       ServerComponent
     </p>
   );