add css module to create app demo

electrode-io · Mar 2, 2021 · 13230e5 · 13230e5
1 parent f167882
commit 13230e5
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 10 deletions.
diff --git a/packages/xarc-create-app/template/_package.js b/packages/xarc-create-app/template/_package.js
@@ -33,17 +33,19 @@ module.exports = (base, merge) => {
     },
     dependencies: {
       "@babel/runtime": "^7.12.5",
-      "@xarc/app": "^8.2.0", // version will come from ../package.json
+      "@xarc/app": "^9.0.3", // version will come from ../package.json
       "@xarc/fastify-server": "^3.2.3",
       "@xarc/react": "^0.1.0", // version will come from ../package.json
-      "@xarc/react-query": "^0.1.1", // version will come from ../package.json
-      "@xarc/react-redux": "^0.1.0" // version will come from ../package.json
+      "@xarc/react-query": "^0.1.3", // version will come from ../package.json
+      "@xarc/react-redux": "^0.1.6" // version will come from ../package.json
     },
     devDependencies: {
       "@types/node": "^14.14.6",
-      "@xarc/app-dev": "^8.2.0", // version will come from ../package.json
-      "ts-node": "^9.0.0",
-      typescript: "^4.0.3"
+      "@xarc/app-dev": "^9.0.3", // version will come from ../package.json
+      "@xarc/opt-postcss": "^1.0.0",
+      "@xarc/opt-stylus": "^1.0.0",
+      "ts-node": "^9.1.1",
+      typescript: "^4.1.3"
     }
   };
 

diff --git a/packages/xarc-create-app/template/src/demo1/index.tsx b/packages/xarc-create-app/template/src/demo1/index.tsx
@@ -1,10 +1,15 @@
 import { React, ReactSubApp } from "@xarc/react";
 import { docsLink } from "../info";
+// CSS module support for .styl
+import styles from "../styles/demo1.mod.styl";
+// CSS module support for .css
+import styles2 from "../styles/demo1.mod.css";
 
 const Demo1 = props => {
   return (
     <div style={{ padding: "5px", border: "solid", marginLeft: "15%", marginRight: "15%" }}>
-      <p>subapp demo1</p>
+      <p className={styles.demo1}>subapp demo1 (.styl css module blue color)</p>
+      <p className={styles2.demo1}>.css module demo blue color</p>
       props: {JSON.stringify(props)}
       <p>
         <a href={docsLink}>Electrode Docs</a>

diff --git a/packages/xarc-create-app/template/src/import-assets.d.ts b/packages/xarc-create-app/template/src/import-assets.d.ts
@@ -3,3 +3,13 @@ declare module "*.png" {
   const value: any;
   export default value;
 }
+
+declare module "*.styl" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.css" {
+  const value: any;
+  export default value;
+}
diff --git a/packages/xarc-create-app/template/src/styles/demo1.mod.css b/packages/xarc-create-app/template/src/styles/demo1.mod.css
@@ -0,0 +1,3 @@
+.demo1 {
+  color: blue;
+}
diff --git a/packages/xarc-create-app/template/src/styles/demo1.mod.styl b/packages/xarc-create-app/template/src/styles/demo1.mod.styl
@@ -0,0 +1,2 @@
+.demo1
+  color: blue
diff --git a/packages/xarc-create-app/template/xrun-tasks.ts b/packages/xarc-create-app/template/xrun-tasks.ts
@@ -21,4 +21,8 @@ xrun.updateEnv(
 
 loadDevTasks(xrun, {
   // options to customize features
+  webpackOptions: {
+    // enable CSS module for files other than `.mod.css`
+    cssModuleSupport: "byModExt"
+  }
 });
diff --git a/samples/create-app-demo/package.json b/samples/create-app-demo/package.json
@@ -40,7 +40,9 @@
   "devDependencies": {
     "@types/node": "^14.14.6",
     "@xarc/app-dev": "^9.0.3",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.3"
+    "@xarc/opt-postcss": "^1.0.0",
+    "@xarc/opt-stylus": "^1.0.0",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.3"
   }
 }
diff --git a/samples/create-app-demo/src/demo1/index.tsx b/samples/create-app-demo/src/demo1/index.tsx
@@ -1,10 +1,15 @@
 import { React, ReactSubApp } from "@xarc/react";
 import { docsLink } from "../info";
+// CSS module support for .styl
+import styles from "../styles/demo1.mod.styl";
+// CSS module support for .css
+import styles2 from "../styles/demo1.mod.css";
 
 const Demo1 = props => {
   return (
     <div style={{ padding: "5px", border: "solid", marginLeft: "15%", marginRight: "15%" }}>
-      <p>subapp demo1</p>
+      <p className={styles.demo1}>subapp demo1 (.styl css module blue color)</p>
+      <p className={styles2.demo1}>.css module demo blue color</p>
       props: {JSON.stringify(props)}
       <p>
         <a href={docsLink}>Electrode Docs</a>

diff --git a/samples/create-app-demo/src/import-assets.d.ts b/samples/create-app-demo/src/import-assets.d.ts
@@ -3,3 +3,13 @@ declare module "*.png" {
   const value: any;
   export default value;
 }
+
+declare module "*.styl" {
+  const value: any;
+  export default value;
+}
+
+declare module "*.css" {
+  const value: any;
+  export default value;
+}
diff --git a/samples/create-app-demo/src/styles/demo1.mod.css b/samples/create-app-demo/src/styles/demo1.mod.css
@@ -0,0 +1,3 @@
+.demo1 {
+  color: blue;
+}
diff --git a/samples/create-app-demo/src/styles/demo1.mod.styl b/samples/create-app-demo/src/styles/demo1.mod.styl
@@ -0,0 +1,2 @@
+.demo1
+  color: blue
diff --git a/samples/create-app-demo/xrun-tasks.ts b/samples/create-app-demo/xrun-tasks.ts
@@ -21,4 +21,8 @@ xrun.updateEnv(
 
 loadDevTasks(xrun, {
   // options to customize features
+  webpackOptions: {
+    // enable CSS module for files other than `.mod.css`
+    cssModuleSupport: "byModExt"
+  }
 });