[+] PurgeCSS

README.md

@@ -4,8 +4,8 @@
 <img src=".github/Banner.svg" alt="banner">
 </a>
 
-![SiteBuild](https://img.shields.io/netlify/6780c0f3-7b91-4108-8397-d6a0f93153d5?color=542C85&label=Site%20Build&style=for-the-badge)
-![StorybookBuild](https://img.shields.io/netlify/c376c6c6-eb6b-4d24-9577-17bc22ceb80c?color=FF4785&label=Storybook%20Build&style=for-the-badge)
+![SiteBuild](https://img.shields.io/netlify/6780c0f3-7b91-4108-8397-d6a0f93153d5?color=542C85&label=Gatsby&style=for-the-badge)
+![StorybookBuild](https://img.shields.io/netlify/c376c6c6-eb6b-4d24-9577-17bc22ceb80c?color=FF4785&label=Storybook&style=for-the-badge)
 
 </h1>
 
@@ -19,7 +19,8 @@
 - Use [Tailwind CSS v1](https://tailwindcss.com/) in [Styled-Components](https://www.styled-components.com/).
 - Decouple developing with [Storybook](https://storybook.js.org/).
 - Use [PostCSS](https://postcss.org/) to extend Tailwind's CSS.
-- Enabling [Postcss-Preset-Env](https://preset-env.cssdb.org/) out-of-the box.
+- [PurgeCSS](https://purgecss.com/) out-of-the box.
+- [PostCSS-Preset-Env](https://preset-env.cssdb.org/) out-of-the box.
 
 ```jsx
 // More Tailwind examples https://tailwindcss.com/components/
@@ -60,7 +61,7 @@ export const Default = () => <IndexPage />;
 1. Get the repo with Gatsby CLI **or** clone from Github
 
    ```sh
-   # Create a new Gatsby site using the gatsby CLI
+   # Create a new Gatsby site using the Gatsby CLI
    gatsby new my-tailwind-styled-starter https://github.com/denvash/gatsby-tailwind-styled-components-storybook-starter
    cd my-tailwind-styled-starter/
    ```
@@ -83,71 +84,7 @@ export const Default = () => <IndexPage />;
    >
    > Storybook must have access to `public` folder.
 
-## 📕 Deploying Storybook to Netlify
+3. Deploy
 
-Edit the **Build Command** and the **Publish directory** at **Build & Deploy** section.
-
-```sh
-yarn build-storybook
-storybook-static/
-```
-
-![Image](./.github/BuildSettings.png)
-
-## 🧐 What's inside?
-
-A quick look at the top-level files and directories you'll see in a Gatsby project.
-
-```sh
-./
-  ├── gatsby-browser.js
-  ├── gatsby-config.js
-  ├── gatsby-node.js
-  ├── gatsby-ssr.js
-  ├── jsconfig.json
-  ├── LICENSE
-  ├── node_modules
-  ├── package.json
-  ├── postcss.config.js
-  ├── README.md
-  ├── src
-  ├── static
-  ├── tailwind.config.js
-  └── yarn.lock
-```
-
-1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
-
-2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
-
-3. **`.babelrc`**: This configuration file allows us to fine-tune [Babel's configuration settings](https://babeljs.io/docs/en/configuration). In this starter we are adding the [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby) preset to allow us to customize Babel as needed.
-
-4. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-
-5. **`.prettierignore`**: This file allows us to specifiy files that we want to exclude from formatting with Prettier.
-
-6. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
-
-7. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. By default we are injecting Tailwind's [base styles](https://tailwindcss.com/docs/adding-base-styles/#app) into the browser.
-
-8. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
-
-9. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-
-10. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-
-11. **`LICENSE`**: Gatsby is licensed under the MIT license.
-
-12. **`package-lock.json`**: (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
-
-13. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-
-14. **`postcss.config.js`**: This configuration file allows us to customize our [PostCSS](https://postcss.org/) settings. PostCSS is used to compile the custom css we write outside of `styled-components`.
-
-15. **`README.md`**: A text file containing useful reference information about your project.
-
-16. **`tailwind.config.js`**: This is the default [Tailwind CSS configuration](https://tailwindcss.com/docs/configuration/) file.
-
-## 💫 Deploy Now
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/denvash/gatsby-tailwind-styled-components-storybook-starter)
+   - [Deploy Gatsby App](https://www.gatsbyjs.org/docs/deploying-to-netlify/)
+   - [Deploy Storybook](https://www.learnstorybook.com/intro-to-storybook/react/en/deploy/)

gatsby-config.js

@@ -1,13 +1,22 @@
 module.exports = {
   siteMetadata: {
     title: `Gatsby Tailwind CSS + Styled-Components + Storybook Starter`,
-    description: `A bare-bones Tailwind CSS + Styled-Components + Storybook starter to kickoff your project. `,
+    description: `A bare-bones Tailwind CSS + Styled-Components + Storybook starter to kickoff your project.`,
     author: `@dennisvash`,
   },
   plugins: [
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-postcss`,
     `gatsby-plugin-react-helmet`,
     'gatsby-plugin-resolve-src',
+    {
+      resolve: `gatsby-plugin-purgecss`,
+      options: {
+        tailwind: true,
+        printRejected: true,
+        purgeOnly: [`src/styles/globals.css`],
+        // develop: true, // Enable while using `gatsby develop`
+      },
+    },
   ],
 };

package.json

@@ -56,6 +56,7 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.10.6",
     "babel-preset-gatsby": "^0.2.20",
+    "gatsby-plugin-purgecss": "^4.0.1",
     "gatsby-plugin-styled-components": "^3.1.11",
     "husky": "^3.0.9",
     "postcss-preset-env": "^6.7.0",

postcss.config.js

@@ -1,13 +1,13 @@
 module.exports = {
   plugins: [
-    require("postcss-import"),
-    require("tailwindcss"),
-    require("postcss-preset-env")({
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('postcss-preset-env')({
       autoprefixer: { grid: true },
       features: {
-        "nesting-rules": true,
+        'nesting-rules': true,
       },
-      browsers: ["> 1%", "last 2 versions", "Firefox ESR"],
+      browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
     }),
   ],
-}
+};

src/pages/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IndexPage } from 'components';
 
-export default () => <IndexPage />;
+export default IndexPage;

yarn.lock

@@ -3623,6 +3623,15 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
 clone-deep@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
@@ -5977,6 +5986,15 @@ gatsby-plugin-postcss@^2.1.13:
     "@babel/runtime" "^7.6.3"
     postcss-loader "^3.0.0"
 
+gatsby-plugin-purgecss@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-purgecss/-/gatsby-plugin-purgecss-4.0.1.tgz#e9b85eb6189aa20fff9f0c2e0c8ce748f64624bb"
+  integrity sha512-sYh7gm+9dovl+QASrInSXqB2qIMdfGW+Y7+Gum//jYjvktYlFCjGUXD8k/Wiw+CmXaJh8k5avFC23Cot96SS4w==
+  dependencies:
+    fs-extra "^8.1.0"
+    loader-utils "^1.1.0"
+    purgecss "^1.3.0"
+
 gatsby-plugin-react-helmet@^3.1.13:
   version "3.1.13"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.1.13.tgz#0ba9e2e902ae490b45c898cffece6e17689da9ee"
@@ -6185,6 +6203,11 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
+get-caller-file@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+
 get-port@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -10492,6 +10515,16 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+purgecss@^1.3.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-1.4.2.tgz#67ab50cb4f5c163fcefde56002467c974e577f41"
+  integrity sha512-hkOreFTgiyMHMmC2BxzdIw5DuC6kxAbP/gGOGd3MEsF3+5m69rIvUEPaxrnoUtfODTFKe9hcXjGwC6jcjoyhOw==
+  dependencies:
+    glob "^7.1.3"
+    postcss "^7.0.14"
+    postcss-selector-parser "^6.0.0"
+    yargs "^14.0.0"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -11184,6 +11217,11 @@ require-main-filename@^1.0.1:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
   integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
 
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -12077,7 +12115,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0:
+string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -13132,7 +13170,7 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
-wrap-ansi@^5.0.0:
+wrap-ansi@^5.0.0, wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
   integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
@@ -13253,6 +13291,14 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
+  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
@@ -13278,6 +13324,23 @@ [email protected], yargs@^12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
+yargs@^14.0.0:
+  version "14.2.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
+  integrity sha512-/4ld+4VV5RnrynMhPZJ/ZpOCGSCeghMykZ3BhdFBDa9Wy/RH6uEGNWDJog+aUlq+9OM1CFTgtYRW5Is1Po9NOA==
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.0"
+
 yargs@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-9.0.1.tgz#52acc23feecac34042078ee78c0c007f5085db4c"