bump smelte

matyunya · Feb 17, 2020 · e04e24a · e04e24a
1 parent 622e8a2
commit e04e24a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4,370 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ yarn-error.log
 /cypress/screenshots/
 /__sapper__/
 mmmm.code-workspace
-static/global.css
+static/global.css
+yarn.lock
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "compression": "^1.7.1",
     "express": "^4.17.1",
     "sirv": "^0.4.0",
-    "smelte": "^0.2.4"
+    "smelte": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -52,14 +52,12 @@
     "rollup-plugin-includepaths": "^0.2.3",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svelte": "^5.0.1",
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.27.4",
-    "svelte": "^3.12.1",
-    "svelte-preprocess": "^2.9.0",
+    "svelte": "latest",
     "tailwindcss": "^1.0.1",
     "tailwindcss-elevation": "^0.3.0"
   }

diff --git a/rollup.config.js b/rollup.config.js
@@ -7,75 +7,12 @@ import { terser } from "rollup-plugin-terser";
 import { string } from "rollup-plugin-string";
 import json from "rollup-plugin-json";
 import config from "sapper/config/rollup.js";
-import getPreprocessor from "svelte-preprocess";
-import postcss from "rollup-plugin-postcss";
 import includePaths from "rollup-plugin-includepaths";
-import path from "path";
 const mode = process.env.NODE_ENV;
 const dev = mode === "development";
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
-const postcssPlugins = (purge = false) => {
-  return [
-    require("postcss-import")(),
-    require("postcss-url")(),
-    require("postcss-nesting")(),
-    require("tailwindcss")("./tailwind.config.js"),
-    require("autoprefixer")(),
-    purge &&
-      require("cssnano")({
-        preset: "default"
-      }),
-    purge &&
-      require("@fullhuman/postcss-purgecss")({
-        content: ["./**/*.svelte"],
-        extractors: [
-          {
-            extractor: content => {
-              const fromClasses = content.match(/class:[A-Za-z0-9-_]+/g) || [];
-
-              return [
-                ...(content.match(/[A-Za-z0-9-_:\/]+/g) || []),
-                ...fromClasses.map(c => c.replace("class:", ""))
-              ];
-            },
-            extensions: ["svelte"]
-          }
-        ],
-        whitelist: [
-          "html",
-          "body",
-          "ripple-gray",
-          "ripple-primary",
-          "ripple-white",
-          "cursor-pointer",
-          "navigation:hover",
-          "navigation.selected",
-          "outline-none",
-          "text-xs",
-          "transition"
-        ],
-        whitelistPatterns: [
-          /bg-gray/,
-          /text-gray/,
-          /yellow-a200/,
-          /language/,
-          /namespace/,
-          /token/,
-          // These are from button examples, infer required classes.
-          /(bg|ripple|text|border)-(red|teal|yellow|lime|primary)-(400|500|200|50)$/
-        ]
-      })
-  ].filter(Boolean);
-};
-
-const preprocess = getPreprocessor({
-  transformers: {
-    postcss: {
-      plugins: postcssPlugins()
-    }
-  }
-});
+const smelte = require("smelte/rollup-plugin-smelte");
 
 export default {
   client: {
@@ -93,8 +30,8 @@ export default {
         dev,
         hydratable: true,
         emitCss: true,
-        preprocess
       }),
+      !dev && smelte,
       resolve(),
       commonjs(),
       includePaths({ paths: ["./src", "./", "./node_modules/smelte/src/"] }),
@@ -152,18 +89,14 @@ export default {
       svelte({
         generate: "ssr",
         dev,
-        preprocess
       }),
+      smelte(),
       string({
         include: "**/*.txt"
       }),
       resolve(),
       includePaths({ paths: ["./src", "./", "./node_modules/smelte/src/"] }),
       commonjs(),
-      postcss({
-        plugins: postcssPlugins(!dev),
-        extract: path.resolve(__dirname, "./static/global.css")
-      })
     ],
     external: [].concat(
       require("module").builtinModules ||

diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
@@ -3,22 +3,21 @@
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
 
-  import AppBar from "components/AppBar";
-  import Tabs from "components/Tabs";
-  import Button from "components/Button";
-  import { Spacer } from "components/Util";
-  import List from "components/List";
-  import ListItem from "components/List/ListItem.svelte";
-  import NavigationDrawer from "components/NavigationDrawer";
-  import ProgressLinear from "components/ProgressLinear";
+  import AppBar from "smelte/src/components/AppBar";
+  import Tabs from "smelte/src/components/Tabs";
+  import Button from "smelte/src/components/Button";
+  import { Spacer } from "smelte/src/components/Util";
+  import List from "smelte/src/components/List";
+  import ListItem from "smelte/src/components/List/ListItem.svelte";
+  import NavigationDrawer from "smelte/src/components/NavigationDrawer";
+  import ProgressLinear from "smelte/src/components/ProgressLinear";
   import { writable } from "svelte/store";
 
   const right = writable(false);
   const persistent = writable(true);
   const elevation = writable(false);
   const showNav = writable(true);
 
-
   const { preloading, page } = stores();
 
   let selected = "";
@@ -45,21 +44,16 @@
   <ProgressLinear app />
 {/if}
 
-<AppBar>
+<AppBar class={i=> i.replace('primary-300', 'dark-600')}>
   <a href="." class="px-2 md:px-8 flex items-center">
     <img src="/logo.png" alt="Smelte logo" width="44" />
     <h6 class="pl-3 text-white tracking-widest font-thin text-lg">SMELTE</h6>
   </a>
   <Spacer />
   <Tabs navigation items={topMenu} bind:selected={path} />
   <div class="md:hidden">
-    <Button
-      icon="menu"
-      small
-      flat
-      add="text-white"
-      remove="p-1 h-4 w-4"
-      iconClasses={i => i.replace('p-4', 'p-3').replace('m-4', 'm-3')}
+    <Button icon="menu" small flat add="text-white" remove="p-1 h-4 w-4" iconClasses={i=> i.replace('p-4',
+      'p-3').replace('m-4', 'm-3')}
       text
       on:click={() => showNav.set(!$showNav)} />
   </div>
@@ -73,8 +67,7 @@
     bind:show={$showNav}
     right={$right}
     persistent={$persistent}
-    elevation={$elevation}
-  >
+    elevation={$elevation}>
     <h6 class="p-6 ml-1 pb-2 text-xs text-gray-900">Menu</h6>
     <List items={menu}>
       <span slot="item" let:item class="cursor-pointer">