Add Astro purgecss integration (#27)

* Implement purgecss main functionality * Add readme docs * Update readme docs * Update readme docs * docs(changeset): add astro-purgecss integration
codiume · Sep 8, 2022 · 24dba42 · 24dba42
1 parent 27ad2e7
commit 24dba42
Show file tree

Hide file tree

Showing 15 changed files with 3,915 additions and 1,172 deletions.
diff --git a/.changeset/cuddly-pianos-cry.md b/.changeset/cuddly-pianos-cry.md
@@ -0,0 +1,5 @@
+---
+'astro-purgecss': major
+---
+
+add astro-purgecss integration
diff --git a/.gitignore b/.gitignore
@@ -26,4 +26,5 @@ yarn.lock
 *.tsbuildinfo
 
 # exclude IntelliJ/WebStorm stuff
-.idea
+.idea
+.vscode
diff --git a/README.md b/README.md
@@ -14,10 +14,10 @@
 
 ## Directory
 
-| Package                                       | Release Notes                                                                                           |
-| --------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| [astro-seo-meta](packages/astro-seo-meta)     | [![version](https://img.shields.io/npm/v/astro-seo-meta.svg)](packages/astro-seo-meta/CHANGELOG.md)     |
-| [astro-seo-schema](packages/astro-seo-schema) | [![version](https://img.shields.io/npm/v/astro-seo-schema.svg)](packages/astro-seo-schema/CHANGELOG.md) |
+| Package                                         | Release Notes                                                                                             |
+| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| [astro-seo-meta](packages/astro-seo-meta)       | [![version](https://img.shields.io/npm/v/astro-seo-meta.svg)](packages/astro-seo-meta/CHANGELOG.md)       |
+| [astro-seo-schema](packages/astro-seo-schema)   | [![version](https://img.shields.io/npm/v/astro-seo-schema.svg)](packages/astro-seo-schema/CHANGELOG.md)   |
 | [astro-svg-loaders](packages/astro-svg-loaders) | [![version](https://img.shields.io/npm/v/astro-svg-loaders.svg)](packages/astro-svg-loaders/CHANGELOG.md) |
 
 ## Support

diff --git a/apps/playground/astro.config.mjs b/apps/playground/astro.config.mjs
@@ -1,4 +1,8 @@
 import { defineConfig } from 'astro/config';
+import cssPurge from 'astro-purgecss';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  // Add purgeCss support to Astro
+  integrations: [cssPurge()]
+});
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -2,6 +2,9 @@
   "name": "@astro/playground",
   "version": "0.0.1",
   "private": true,
+  "keywords": [
+    "astro-integration"
+  ],
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -13,8 +16,9 @@
     "astro": "^1.1.1"
   },
   "dependencies": {
-    "astro-seo-schema": "*",
     "astro-seo-meta": "*",
-    "astro-svg-loaders": "*"
+    "astro-seo-schema": "*",
+    "astro-svg-loaders": "*",
+    "astro-purgecss": "*"
   }
 }
diff --git a/apps/playground/public/main.css b/apps/playground/public/main.css
diff --git a/apps/playground/src/pages/about.astro b/apps/playground/src/pages/about.astro
@@ -0,0 +1,38 @@
+---
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Astro</title>
+  </head>
+  <body>
+    <section class="main">
+      <p>This is an about page</p>
+    </section>
+    <style>
+      /* DO_NOT_REMOVE: The following css rules are unsed,
+       * they are left here on purpose, to test out
+       * the "astro-purgecss" integration
+       */
+      .unused-class-3 {
+        color: red; /* unused */
+      }
+      .unused-class-4 {
+        color: blue; /* unused */
+      }
+      #unused-id-3 {
+        color: red; /* unused */
+      }
+      #unused-id-4 {
+        color: red; /* unused */
+      }
+      p {
+        color: red; /* used */
+      }
+    </style>
+  </body>
+</html>
diff --git a/apps/playground/src/pages/index.astro b/apps/playground/src/pages/index.astro
@@ -23,7 +23,6 @@ import {
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <link rel="stylesheet" href="/main.css" />
     <title>Astro</title>
 
     <Seo
@@ -80,5 +79,102 @@ import {
         <div class="loader"><ThreeDots /></div>
       </div>
     </section>
+    <style is:global>
+      html {
+        height: 100vh;
+      }
+
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: 'Courier New', Courier, monospace;
+        color: white;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        background: #3023ae;
+        background: linear-gradient(135deg, #3023ae 0%, #c86dd7 100%);
+      }
+
+      .main {
+        width: 80%;
+      }
+
+      .loaders {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        gap: 0px 0px;
+        grid-auto-flow: row;
+        grid-template-areas:
+          '. . . .'
+          '. . . .'
+          '. . . .';
+      }
+
+      .loader {
+        height: 150px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .loader:nth-child(1) {
+        background-color: #1abc9c;
+      }
+      .loader:nth-child(2) {
+        background-color: #34495e;
+      }
+      .loader:nth-child(3) {
+        background-color: #f39c12;
+      }
+      .loader:nth-child(4) {
+        background-color: #9b59b6;
+      }
+      .loader:nth-child(5) {
+        background-color: #3498db;
+      }
+      .loader:nth-child(6) {
+        background-color: #e74c3c;
+      }
+      .loader:nth-child(7) {
+        background-color: #2ecc71;
+      }
+      .loader:nth-child(8) {
+        background-color: #2c3e50;
+      }
+      .loader:nth-child(9) {
+        background-color: #f1c40f;
+      }
+      .loader:nth-child(10) {
+        background-color: #8e44ad;
+      }
+      .loader:nth-child(11) {
+        background-color: #2980b9;
+      }
+      .loader:nth-child(12) {
+        background-color: #e74c3c;
+      }
+      /* DO_NOT_REMOVE: The following css rules are unsed,
+       * they are left here on purpose, to test out
+       * the "astro-purgecss" integration
+       */
+      .unused-class {
+        color: red; /* unused */
+      }
+      .unused-class-2 {
+        color: blue; /* unused */
+      }
+      #unused-id {
+        color: red; /* unused */
+      }
+      #unused-id-2 {
+        color: red; /* unused */
+      }
+      footer {
+        color: red; /* unused */
+      }
+    </style>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,4 +26,5 @@ yarn.lock @@
     *.tsbuildinfo
     # exclude IntelliJ/WebStorm stuff
-    .idea
+    .idea
+    .vscode