Add purgecss-postcss plugin to remove unused CSS from the bundle (#281)

* Add Vocabulary Select implementation instead of buefy select

* Revert "Add Vocabulary Select implementation instead of buefy select"

This reverts commit 6f09c17

* Add postcss to purge unused css

* Make text inside modals correct color

* Document whitelisting classes in PurgeCSS PostCSS plugin

Author: obulat

README.md

@@ -28,8 +28,8 @@ For information on contributing, please see [Creative Commons' Contribution Guid
 
 If you create a PR for your work, but you are not finished yet, please include `WIP:` in the beginning of your PR title. When your work on your PR is completed and you are ready for a final review, please remove the `WIP:` prefix from the title to indicate that your work is done.
 
-Here's a [handy link](https://github.com/creativecommons/chooser/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22+-label%3A%22in+progress%22) that will show you all open issues in this repo that have the `help wanted` tag, but do not have the `in progress` tag. 
-All issues in this list are up for grabs! 
+Here's a [handy link](https://github.com/creativecommons/chooser/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22+-label%3A%22in+progress%22) that will show you all open issues in this repo that have the `help wanted` tag, but do not have the `in progress` tag.
+All issues in this list are up for grabs!
 If it says "No results matched your search", then there are no issues currently up for grabs.
 
 *If no progress has been made on an issue for seven days after assignment, the assignment will be removed to allow others to contribute.*
@@ -42,8 +42,10 @@ $ npm run test
 ```
 To run e2e tests, you must have Java installed. [[download Java here](https://java.com/download/)]
 
+## CSS Build
+The Chooser uses PostCSS plugin for PurgeCSS to make CSS bundle size smaller. It automatically removes unused CSS based on the classes found in the final built bundle. Some styles for dynamic components or dynamically-imported files can also be removed. If you find that the built site misses some styles, you can manually add the necessary classes or Regex expressions to the `safelist` array in the `postcss.config.js` file.
 
 ## Deployment
-The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location. 
+The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the `./docs/` dir, and are live. Any changes to this dir's contents will be automatically deployed, so please take care when making modifications to this location.
 
-To update the dist bundle, run ```$ npm run build```, and copy the generated files from `./dist/` to `./docs/`, taking care to not delete the CNAME file in `./docs/`.
+To update the dist bundle, run ```$ npm run build```. This and copy the generated files from `./dist/` to `./docs/`, taking care to not delete the CNAME file in `./docs/`.

package-lock.json

@@ -21,6 +21,7 @@
     "dependencies": {
         "@creativecommons/vocabulary": "^2020.11.3",
         "@creativecommons/vue-vocabulary": "^2020.11.3",
+        "@fullhuman/postcss-purgecss": "^3.1.3",
         "@linusborg/vue-simple-portal": "^0.1.4",
         "@sentry/vue": "^5.29.2",
         "buefy": "^0.9.4",

package.json

@@ -0,0 +1,40 @@
+const IN_PRODUCTION = process.env.NODE_ENV === 'production'
+
+module.exports = {
+    plugins: [
+        IN_PRODUCTION &&
+      require('@fullhuman/postcss-purgecss')({
+          content: ['./public/**/*.html', './src/**/*.vue'],
+          defaultExtractor(content) {
+              const contentWithoutStyleBlocks = content.replace(
+                  /<style[^]+?<\/style>/gi,
+                  ''
+              )
+              return (
+                  contentWithoutStyleBlocks.match(
+                      /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
+                  ) || []
+              )
+          },
+          safelist: [
+              /-(leave|enter|appear)(|-(to|from|active))$/,
+              /^(?!(|.*?:)cursor-move).+-move$/,
+              /^router-link(|-exact)-active$/,
+              /data-v-.*/,
+              /is-text/,
+              /control/,
+              /select/,
+              /^tabs.*/,
+              /is-boxed/,
+              /app-modal/,
+              /overlay/,
+              /^modal.*/,
+              /padding.*/,
+              /icon/,
+              /close-button/,
+              /has-color-gray/,
+              /is-size-.*/
+          ]
+      })
+    ]
+}

postcss.config.js

@@ -1,29 +1,44 @@
 <template>
-    <b-navbar wrapper-class="container">
-        <template slot="brand">
-            <b-navbar-item>
-                <a
-                    class="logo"
-                    href="/"
-                >
-                    <img
-                        src="../assets/chooser.svg"
-                        alt="Creative Commons License chooser"
+    <header>
+        <nav class="navbar">
+            <div class="container">
+                <div class="navbar-brand">
+                    <a
+                        class="logo"
+                        aria-current="page"
+                        href="/"
                     >
-                </a>
-            </b-navbar-item>
-        </template>
-        <template slot="end">
-            <b-navbar-item
-                href="https://docs.google.com/forms/d/e/1FAIpQLSfF7MCKxlPsPuMn17v_sLYWMkxBkudQSPXCXoJKjh5GCtx63g/viewform"
-                title="Feedback"
-                class="navbar-item-feedback"
-            >
-                {{ $t('header.nav-feedback') }}
-                <i class="icon external-link" />
-            </b-navbar-item>
-        </template>
-    </b-navbar>
+                        <img
+                            src="../assets/chooser.svg"
+                            alt="Creative Commons License chooser"
+                            height="40"
+                            width="169"
+                        >
+                    </a>
+                    <a
+                        role="button"
+                        aria-label="menu"
+                        aria-expanded="false"
+                        class="navbar-burger"
+                    >
+                        <span aria-hidden="true" />
+                        <span aria-hidden="true" />
+                        <span aria-hidden="true" />
+                    </a>
+                </div>
+                <div class="navbar-menu navbar-end">
+                    <a
+                        class="navbar-item navbar-item-feedback"
+                        href="https://docs.google.com/forms/d/e/1FAIpQLSfF7MCKxlPsPuMn17v_sLYWMkxBkudQSPXCXoJKjh5GCtx63g/viewform"
+                        title="Feedback"
+                    >
+                        {{ $t('header.nav-feedback') }}
+                        <i class="icon external-link" />
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </header>
 </template>
 
 <script>
@@ -39,15 +54,13 @@ export default {
 .navbar-burger {
     background-color:white;
 }
-.navbar-item-feedback {
-    padding-right: 30%;
-    font-family: Roboto Condensed,sans-serif;
-    font-size: 16px;
+.navbar-item.navbar-item-feedback {
+    font-size: 1rem;
     font-weight: bold;
-    color: #787878!important;
+    color: #787878;
     transition: color 300ms ease;
     &:hover {
-        color: #fb7729!important;
+        color: #fb7729;
         background-color: white;
     }
 }

src/components/HeaderSection.vue

@@ -283,6 +283,7 @@ export default {
         padding-top: var(--h-padding);
         padding-bottom: var(--h-padding);
         margin: 0;
+        color: #333333;
 
         article {
             max-width: 85ch;