enhance: Improve provided css

ntucker · Apr 21, 2021 · d4c05d5 · d4c05d5
1 parent cec3a77
commit d4c05d5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 19 deletions.
diff --git a/packages/generator-js/src/anansi-splash/index.ts b/packages/generator-js/src/anansi-splash/index.ts
@@ -3,7 +3,14 @@ import { BetterGenerator } from '../utils';
 module.exports = class extends BetterGenerator {
   writing() {
     this.fs.copyTpl(
-      this.templatePath('src/**'),
+      this.templatePath('src/**/*.ts*'),
+      this.destinationPath(this.config.get('rootPath')),
+      this.config.getAll(),
+      {},
+      { globOptions: { dot: true } },
+    );
+    this.fs.copyTpl(
+      this.templatePath('src/**/*.woff'),
       this.destinationPath(this.config.get('rootPath')),
       this.config.getAll(),
       {},
@@ -18,5 +25,21 @@ module.exports = class extends BetterGenerator {
         { globOptions: { dot: true } },
       );
     }
+    if (this.config.get('style') === 'sass') {
+      this.fs.copyTpl(
+        this.templatePath('src/**/*.scss'),
+        this.destinationPath(this.config.get('rootPath')),
+        this.config.getAll(),
+        {},
+        { globOptions: { dot: true } },
+      );
+    } else {
+      this.fs.copyTpl(
+        this.templatePath('src/style/main.scss'),
+        this.destinationPath(this.config.get('rootPath'), 'style'),
+        this.config.getAll(),
+        {},
+      );
+    }
   }
 };
diff --git a/packages/generator-js/src/anansi-splash/templates/src/pages/Home/index.scss b/packages/generator-js/src/anansi-splash/templates/src/pages/Home/index.scss
@@ -0,0 +1,21 @@
+$margin: 8px;
+
+.home {
+  min-height: 100vh;
+  margin: -$margin;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-direction: column;
+  text-align: center;
+
+  > nav {
+    position: fixed;
+    top: 18px;
+  }
+
+  p:not(:first-child) {
+    margin-top: 20px;
+  }
+}
diff --git a/packages/generator-js/src/anansi-splash/templates/src/pages/Home/index.tsx b/packages/generator-js/src/anansi-splash/templates/src/pages/Home/index.tsx
@@ -16,37 +16,34 @@ const home = css`
   position: relative;
   flex-direction: column;
   text-align: center;
+
+  > nav {
+    position: fixed;
+    top: 18px;
+  }
+
+  p:not(:first-child) {
+    margin-top: 20px;
+  }
 `;
+<% } else { %>
+import styles from './index.scss';
+const home = styles.home
 <% } %>
 
 export default function Home() {
   return (
-    <% if (style === 'linaria') { %>
     <div className={home}>
-    <% } else { %>
-    <div
-      style={{
-        minHeight: '100vh',
-        margin: '-8px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-        flexDirection: 'column',
-        textAlign: 'center',
-      }}
-    >
-    <% } %>
-      <nav style={{ position: 'fixed', top: '18px' }}>Anansi</nav>
+      <nav>Anansi</nav>
       <main>
         <p style={{ fontSize: '30px' }}>
           Congrats! You&apos;ve created <%= appName %>!
         </p>
-        <p style={{ marginTop: '20px', fontSize: '15px' }}>
+        <p style={{ fontSize: '15px' }}>
           Check out the generated ReadMe for instructions on how to use this
           library
         </p>
-        <p style={{ marginTop: '20px', fontSize: '24px' }}>
+        <p style={{ fontSize: '24px' }}>
           <AssetPrice symbol="BTC" />
         </p>
       </main>