Don’t cache .css files in build

Resolves #3041, #3246
FredKSchott · May 20, 2021 · 735ae60 · 735ae60
1 parent 458487a
commit 735ae60
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 1 deletion.
diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md
@@ -0,0 +1,10 @@
+---
+layout: layouts/main.njk
+title: Tailwind
+---
+
+### Learn more
+
+- [Tailwind docs on Snowpack][tailwind]
+
+[tailwind]: https://www.snowpack.dev/guides/tailwind-css/
diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@snowpack/example-react-loadable-components",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "snowpack dev",
+    "build": "snowpack build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@snowpack/plugin-postcss": "^1.2.2",
+    "postcss": "^8.2.15",
+    "postcss-cli": "^8.3.1",
+    "snowpack": "^3.4.0",
+    "tailwindcss": "^2.1.2"
+  }
+}
diff --git a/examples/tailwind/postcss.config.js b/examples/tailwind/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    // other plugins can go here, such as autoprefixer
+  },
+};
diff --git a/examples/tailwind/public/global.css b/examples/tailwind/public/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/tailwind/public/index.html b/examples/tailwind/public/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tailwind Example</title>
+    <link rel="stylesheet" type="text/css" href="/global.css" />
+  </head>
+  <body>
+    <figure class="md:flebg-gray-100 rounded-xl p-8">
+      <img
+        class="w-32 h-32 rounded-full mx-auto"
+        src="https://images.unsplash.com/photo-1621415346777-188c7f9d9727?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=75"
+        alt=""
+        width="384"
+        height="512"
+      />
+      <div class="pt-6 space-y-4">
+        <blockquote>
+          <p class="text-lg font-semibold">
+            “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to
+            customize, adapts to any design, and the build size is tiny.”
+          </p>
+        </blockquote>
+        <figcaption class="font-medium">
+          <div class="text-green-600">Sarah Dayan</div>
+          <div class="text-gray-500">Staff Engineer, Algolia</div>
+        </figcaption>
+      </div>
+    </figure>
+  </body>
+</html>
diff --git a/examples/tailwind/snowpack.config.js b/examples/tailwind/snowpack.config.js
@@ -0,0 +1,8 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+  mount: {
+    public: '/',
+    src: '/_dist',
+  },
+  plugins: ['@snowpack/plugin-postcss'],
+};
diff --git a/examples/tailwind/tailwind.config.js b/examples/tailwind/tailwind.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
+  // specify other options here
+};
diff --git a/snowpack/src/commands/dev.ts b/snowpack/src/commands/dev.ts
@@ -683,7 +683,12 @@ export async function startServer(
         config,
         hmrEngine,
       });
-      inMemoryBuildCache.set(cacheKey, fileBuilder);
+
+      const shouldCache = !fileLoc.endsWith('.css'); // Tailwind workaround: don’t cache built .css files
+
+      if (shouldCache) {
+        inMemoryBuildCache.set(cacheKey, fileBuilder);
+      }
     }
 
     function handleFinalizeError(err: Error) {