feat: add eslint (#801)

2024-11-07 21:34:24 +00:00 · 2020-05-16 11:09:14 -07:00 · 2020-05-16 11:09:14 -07:00 · 9dc1a9ddcf
commit 9dc1a9ddcf
parent 8426c80b11
31 changed files with 1750 additions and 1652 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,9 @@
+/build/
+/node_modules/
+/release/
+
+# site files
+/site/.docusaurus
+/site/build
+/site/node_modules
+/site/static/css/pure
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,50 @@
+module.exports = {
+    'env': {
+        'browser': true,
+        'es6': true,
+        'node': true
+    },
+    'extends': [
+        'eslint:recommended',
+        'plugin:react/recommended'
+    ],
+    'globals': {
+        'Atomics': 'readonly',
+        'SharedArrayBuffer': 'readonly'
+    },
+    'parserOptions': {
+        'ecmaFeatures': {
+            'jsx': true
+        },
+        'ecmaVersion': 11,
+        'sourceType': 'module'
+    },
+    'plugins': [
+        'react'
+    ],
+    'rules': {
+        'indent': [
+            'error',
+            4
+        ],
+        'linebreak-style': [
+            'error',
+            'unix'
+        ],
+        'quotes': [
+            'error',
+            'single'
+        ],
+        'react/no-unescaped-entities': 'off',
+        'react/prop-types': 'off',
+        'semi': [
+            'error',
+            'always'
+        ]
+    },
+    'settings': {
+        'react': {
+            'version': 'detect'
+        }
+    }
+};
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 .DS_Store
+.nyc_output/
 artifacts/
 build/
 coverage/
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+package-lock = false
--- a/.travis.yml
+++ b/.travis.yml
@ -1,11 +1,10 @@
 language: node_js
 node_js:
  - 12
-branches:
-  only:
-    - master
 script:
-  - git config --global user.name "${GH_NAME}"
-  - git config --global user.email "${GH_EMAIL}"
-  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
-  - cd site && npm install && GIT_USER="${GH_NAME}" npm run deploy
+  - npm t
+deploy:
+  provider: script
+  script: scripts/deploy.sh
+  on:
+    branch: master
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,8 +1,8 @@
 module.exports = function (grunt) {

-// -- Config -------------------------------------------------------------------
+    // -- Config -------------------------------------------------------------------

-grunt.initConfig({
+    grunt.initConfig({

        nick : 'pure',
        pkg  : grunt.file.readJSON('package.json'),
@ -233,28 +233,28 @@ grunt.initConfig({
                }
            }
        }
-});
+    });

-// -- Main Tasks ---------------------------------------------------------------
+    // -- Main Tasks ---------------------------------------------------------------

-// npm tasks.
-grunt.loadNpmTasks('grunt-contrib-clean');
-grunt.loadNpmTasks('grunt-contrib-copy');
-grunt.loadNpmTasks('grunt-contrib-concat');
-grunt.loadNpmTasks('grunt-contrib-csslint');
-grunt.loadNpmTasks('grunt-contrib-cssmin');
-grunt.loadNpmTasks('grunt-contrib-compress');
-grunt.loadNpmTasks('grunt-contrib-watch');
-grunt.loadNpmTasks('grunt-css-selectors');
-grunt.loadNpmTasks('grunt-postcss');
-grunt.loadNpmTasks('grunt-pure-grids');
+    // npm tasks.
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-csslint');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-compress');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-css-selectors');
+    grunt.loadNpmTasks('grunt-postcss');
+    grunt.loadNpmTasks('grunt-pure-grids');

-// Local tasks.
-grunt.loadTasks('tasks/');
+    // Local tasks.
+    grunt.loadTasks('tasks/');

-grunt.registerTask('default', ['test', 'build']);
-grunt.registerTask('test', ['csslint']);
-grunt.registerTask('build', [
+    grunt.registerTask('default', ['test', 'build']);
+    grunt.registerTask('test', ['csslint']);
+    grunt.registerTask('build', [
        'clean:build',
        'copy:build',
        'pure_grids',
@ -264,17 +264,17 @@ grunt.registerTask('build', [
        'postcss',
        'cssmin',
        'license'
-]);
+    ]);

-// Makes the `watch` task run a build first.
-grunt.renameTask('watch', 'observe');
-grunt.registerTask('watch', ['default', 'observe']);
+    // Makes the `watch` task run a build first.
+    grunt.renameTask('watch', 'observe');
+    grunt.registerTask('watch', ['default', 'observe']);

-grunt.registerTask('release', [
+    grunt.registerTask('release', [
        'default',
        'clean:release',
        'copy:release',
        'compress:release'
-]);
+    ]);

 };
--- a/package.json
+++ b/package.json
@ -6,7 +6,9 @@
    "url": "git://github.com/pure-css/pure.git"
  },
  "scripts": {
+    "lint": "eslint . --ext .js",
    "prepare": "grunt release",
+    "pretest": "npm run lint",
    "site:build": "npm run pretest && cd site && npm install && npm run build",
    "site:start": "cd site && npm run start",
    "test": "grunt test && tap test/*.js"
@ -14,6 +16,8 @@
  "files": "build/",
  "devDependencies": {
    "autoprefixer": "^9.6.1",
+    "eslint": "^7.0.0",
+    "eslint-plugin-react": "^7.20.0",
    "grunt": "^1.0.1",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-clean": "^2.0.0",
@ -26,6 +30,7 @@
    "grunt-css-selectors": "^1.1.0",
    "grunt-postcss": "^0.9.0",
    "grunt-pure-grids": "^2.0.0",
+    "husky": "^4.2.5",
    "normalize.css": "^8.0.1",
    "tap": "^14.4.1"
  },
@ -55,5 +60,10 @@
    "ie >= 10",
    "iOS >= 12",
    "Android >= 6"
-  ]
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test"
+    }
+  }
 }
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@ -0,0 +1,6 @@
+git config --global user.name "${GH_NAME}"
+git config --global user.email "${GH_EMAIL}"
+echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
+cd site
+npm install
+GIT_USER="${GH_NAME}" npm run deploy
--- a/site/components/Footer.js
+++ b/site/components/Footer.js
@ -1,5 +1,4 @@
 import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

 function Footer({ siteConfig }) {
    const { customFields, organizationName, projectName } = siteConfig;
--- a/site/components/Menu.js
+++ b/site/components/Menu.js
@ -1,7 +1,7 @@
 import Link from '@docusaurus/Link';
 import React from 'react';

-function Menu(props) {
+function Menu() {
    return (
        <>
            <a href="#menu" id="menuLink" className="menu-link">
@ -46,9 +46,11 @@ function Menu(props) {
                        <li className="pure-menu-item">
                            <Link to="/extend/" className="pure-menu-link">Extend</Link>
                        </li>
+                        {/*
                        <li className="pure-menu-item">
                            <a href="http://blog.purecss.io/" className="pure-menu-link">Blog</a>
                        </li>
+                        */}
                        <li className="pure-menu-item">
                            <a href="https://github.com/pure-css/pure/releases/" className="pure-menu-link">Releases</a>
                        </li>
--- a/site/components/SectionHeader.js
+++ b/site/components/SectionHeader.js
@ -1,10 +1,10 @@
 import React from 'react';

-    function SectionHeader({ heading, TagName = 'h2' }) {
+function SectionHeader({ heading, TagName = 'h2' }) {
    // Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.
    const id = heading.toLowerCase()
        .replace(/&[^\s;]+;?/g, '')
-            .replace(/[^\s\w\-]+/g, '')
+        .replace(/[^\s\w-]+/g, '')
        .replace(/\s+/g, '-');

    return (
--- a/site/lib/pure.js
+++ b/site/lib/pure.js
@ -18,8 +18,8 @@ module.exports.moduleSizes = function moduleSizes() {
    const files = fs.readdirSync(pureDir);

    // collect all minified module files
-    const modules = files.filter(file => (/\-min\.css$/).test(file))
-                         .map(file => file.replace(/\-min\.css$/, ''));
+    const modules = files.filter(file => (/-min\.css$/).test(file))
+        .map(file => file.replace(/-min\.css$/, ''));

    // get sizes across all modules
    const moduleSizes = modules.map(module => {
@ -33,4 +33,4 @@ module.exports.moduleSizes = function moduleSizes() {
        map[modules[i]] = size;
        return map;
    }, {});
-}
+};
--- a/site/package-lock.json
+++ b/site/package-lock.json
@ -2591,6 +2591,11 @@
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
    },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
    "commondir": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
--- a/site/package.json
+++ b/site/package.json
@ -17,6 +17,7 @@
    "@docusaurus/plugin-content-pages": "^2.0.0-alpha.53",
    "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53",
    "classnames": "^2.2.6",
+    "common-tags": "^1.8.0",
    "gzip-size": "^5.1.1",
    "js-beautify": "^1.11.0",
    "react": "^16.8.4",
--- a/site/src/index.js
+++ b/site/src/index.js
@ -1,5 +1,5 @@
 const path = require('path');
-module.exports = function(context, options) {
+module.exports = function() {
    return {
        name: 'pure-theme',

--- a/site/src/pages/base/index.js
+++ b/site/src/pages/base/index.js
@ -1,5 +1,4 @@
 import Link from '@docusaurus/Link';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
@ -22,7 +21,7 @@ function Base() {
                </p>

                <CodeBlock wrap={true}>
-                {`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">`}
+                    {'<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">'}
                </CodeBlock>

                <h3>A bit about Normalize.css</h3>
@ -52,7 +51,7 @@ function Base() {
                </p>

                <CodeBlock wrap={true}>
-                {`<input type="text" name="_csrf" hidden>`}
+                    {'<input type="text" name="_csrf" hidden>'}
                </CodeBlock>

                <h3>Responsive Images</h3>
@ -62,7 +61,7 @@ function Base() {
                </p>

                <CodeBlock wrap={true}>
-                {`<img class="pure-img" src="...">`}
+                    {'<img class="pure-img" src="...">'}
                </CodeBlock>

                <SectionHeader heading="Moving beyong Normalize" />
--- a/site/src/pages/buttons/index.js
+++ b/site/src/pages/buttons/index.js
@ -1,4 +1,3 @@
-import Link from '@docusaurus/Link';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
--- a/site/src/pages/customize/index.js
+++ b/site/src/pages/customize/index.js
@ -5,7 +5,7 @@ import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
-import { filePercent, fileSize } from '../../../lib/utils';
+import { fileSize } from '../../../lib/utils';

 const title = 'Customize';
 const description = 'Choose the modules that you need.';
@ -79,37 +79,31 @@ function Customize() {
                        <tbody>
                            <tr>
                                <td><a href="http://cdnjs.com/">cdnjs</a></td>
-                                <td>//cdnjs.cloudflare.com/ajax/libs/pure/{pureVersion}/pure-min.css</td>
-                                <td>Yes</td>
-                                <td>No</td>
-                            </tr>
-                            <tr>
-                                <td><a href="http://www.jsdelivr.com/">jsDelivr</a></td>
-                                <td>//cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-min.css</td>
+                                <td>{`//cdnjs.cloudflare.com/ajax/libs/pure/${pureVersion}/build/pure-min.css`}</td>
                                <td>Yes</td>
                                <td>Yes</td>
                            </tr>
                            <tr>
                                <td><a href="https://www.keycdn.com/">KeyCDN</a></td>
-                                <td>//opensource.keycdn.com/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//opensource.keycdn.com/pure/${pureVersion}/pure-min.css`}</td>
                                <td>Yes</td>
                                <td>No</td>
                            </tr>
                            <tr>
                                <td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td>
-                                <td>//oss.maxcdn.com/libs/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//oss.maxcdn.com/libs/pure/${pureVersion}/pure-min.css`}</td>
                                <td>Yes</td>
                                <td>No</td>
                            </tr>
                            <tr>
                                <td><a href="http://rawgit.com/">RawGit</a></td>
-                                <td>//cdn.rawgit.com/pure-css/pure-release/v{pureVersion}/pure-min.css</td>
+                                <td>{`//cdn.rawgit.com/pure-css/pure-release/v${pureVersion}/pure-min.css`}</td>
                                <td>Yes</td>
                                <td>No</td>
                            </tr>
                            <tr>
                                <td><a href="http://www.staticfile.org/">Staticfile</a></td>
-                                <td>//cdn.staticfile.org/pure/{pureVersion}/pure-min.css</td>
+                                <td>{`//cdn.staticfile.org/pure/${pureVersion}/pure-min.css`}</td>
                                <td>Yes</td>
                                <td>No</td>
                            </tr>
--- a/site/src/pages/extend/index.js
+++ b/site/src/pages/extend/index.js
@ -4,6 +4,7 @@ import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
+import { stripIndent } from 'common-tags';

 const title = 'Extend';
 const description = 'Build on top of Pure.';
@ -49,7 +50,7 @@ function Extend() {
                </p>

                <CodeBlock>
-                    {`<form class="pure-form pure-form-stacked"></form>`}
+                    {'<form class="pure-form pure-form-stacked"></form>'}
                </CodeBlock>

                <h4>Stacked Form: CSS</h4>
@ -59,19 +60,21 @@ function Extend() {
                </p>

                <CodeBlock>
-{`/*
+                    {stripIndent`
+                        /*
                            Standard rules that all Pure Forms have. This includes rules for
                            styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
                            rules such as vertical alignments.
-*/
-.pure-form { ... }
+                        */
+                        .pure-form { ... }

-/*
+                        /*
                            Specific rules that apply to stacked forms. This includes rules
                            such as taking child &lt;input&gt; elements and making them display: block
                            for the stacked effect.
-*/
-.pure-form-stacked  { ... }`}
+                        */
+                        .pure-form-stacked  { ... }
+                    `}
                </CodeBlock>

                <SectionHeader heading="Extending Pure" />
@ -81,12 +84,14 @@ function Extend() {
                </p>

                <CodeBlock>
-                    {`<form class="form-custom pure-form"></form>`}
+                    {'<form class="form-custom pure-form"></form>'}
                </CodeBlock>

                <CodeBlock className="test">
-{`/* add your custom styles in this selector */
-.form-custom { ... }`}
+                    {stripIndent`
+                        /* add your custom styles in this selector */
+                        .form-custom { ... }
+                    `}
                </CodeBlock>

                <p>
@ -122,15 +127,16 @@ function Extend() {
                </p>

                <CodeBlock>
-{`<!-- Button to trigger modal -->
-<p>
+                    {stripIndent`
+                        <!-- Button to trigger modal -->
+                        <p>
                            <a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
                            Launch Pure + Bootstrap Modal
                            </a>
-</p>
+                        </p>

-<!-- Modal -->
-<!--
+                        <!-- Modal -->
+                        <!--
                            * Bootstrap v2.3.2
                            *
                            * Copyright 2012 Twitter, Inc
@ -139,7 +145,7 @@ function Extend() {
                            *
                            * Designed and built with all the love in the world @twitter by @mdo and @fat.
                            -->
-<div id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+                        <div id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div className="modal-header">
                                <h1 id="myModalLabel">A Bootstrap Modal with Pure</h1>
                            </div>
@ -168,9 +174,10 @@ function Extend() {
                                <button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
                                <button className="pure-button pure-button-primary">Submit</button>
                            </div>
-</div>
-<script src="//code.jquery.com/jquery-1.9.1.js"></script>
-<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>`}
+                        </div>
+                        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
+                        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+                    `}
                </CodeBlock>
            </div>
        </Layout>
--- a/site/src/pages/grids/index.js
+++ b/site/src/pages/grids/index.js
@ -1,13 +1,13 @@
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
+import { stripIndent } from 'common-tags';

-import styles from './styles.css';
+import './styles.css';

 const title = 'Grids';
 const description = 'Fully customizable and responsive CSS grids.';
@ -57,11 +57,13 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-{`<div class="pure-g">
+                    {stripIndent`
+                        <div class="pure-g">
                            <div class="pure-u-1-3"><p>Thirds</p></div>
                            <div class="pure-u-1-3"><p>Thirds</p></div>
                            <div class="pure-u-1-3"><p>Thirds</p></div>
-</div>`}
+                        </div>
+                    `}
                </CodeBlock>

                <SectionHeader heading="Grids Units Sizes" />
@ -489,11 +491,13 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-                {`<div class="pure-g">
+                    {stripIndent`
+                        <div class="pure-g">
                            <div class="pure-u-1-3"> ... </div>
                            <div class="pure-u-1-3"> ... </div>
                            <div class="pure-u-1-3"> ... </div>
-</div>`}
+                        </div>
+                    `}
                </CodeBlock>

                <p>
@ -501,11 +505,13 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-                {`<div class="pure-g">
+                    {stripIndent`
+                        <div class="pure-g">
                            <div class="pure-u-1 pure-u-md-1-3"> ... </div>
                            <div class="pure-u-1 pure-u-md-1-3"> ... </div>
                            <div class="pure-u-1 pure-u-md-1-3"> ... </div>
-</div>`}
+                        </div>
+                    `}
                </CodeBlock>

                <h3>Default Media Queries</h3>
@ -578,7 +584,7 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-                    {`1em == 16px *`}
+                    {'1em == 16px *'}
                </CodeBlock>

                <p>
@ -733,22 +739,24 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-{`<style>
+                    {stripIndent`
+                        <style>
                            .l-box {
                                padding: 1em;
                            }
-</style>
+                        </style>

-...
+                        ...

-<div class="pure-g">
+                        <div class="pure-g">
                            <div class="pure-u-1-2">
                                <div class="l-box"> ... </div>
                            </div>
                            <div class="pure-u-1-2">
                                <div class="l-box"> ... </div>
                            </div>
-</div>`}
+                        </div>
+                    `}
                </CodeBlock>

                <p>
@ -756,21 +764,23 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-{`<style>
+                    {stripIndent`
+                        <style>
                            .pure-g > div {
                                box-sizing: border-box;
                            }
                            .l-box {
                                padding: 1em;
                            }
-</style>
+                        </style>

-...
+                        ...

-<div class="pure-g">
+                        <div class="pure-g">
                            <div class="pure-u-1-2 l-box"> ... </div>
                            <div class="pure-u-1-2 l-box"> ... </div>
-</div>`}
+                        </div>
+                    `}
                </CodeBlock>

                <p>
@ -784,18 +794,20 @@ function Grids() {
                </p>

                <CodeBlock wrap={true}>
-{`<style>
-/*
-When setting the primary font stack, apply it to the Pure grid units along
-with "html", "button", "input", "select", and "textarea". Pure Grids use
-specific font stacks to ensure the greatest OS/browser compatibility.
-*/
-html, button, input, select, textarea,
-.pure-g [class *= "pure-u"] {
+                    {stripIndent`
+                        <style>
+                        /*
+                        When setting the primary font stack, apply it to the Pure grid units along
+                        with "html", "button", "input", "select", and "textarea". Pure Grids use
+                        specific font stacks to ensure the greatest OS/browser compatibility.
+                        */
+                        html, button, input, select, textarea,
+                        .pure-g [class *= "pure-u"] {
                            /* Set your content font stack here: */
                            font-family: Georgia, Times, "Times New Roman", serif;
-}
-</style>`}
+                        }
+                        </style>
+                    `}
                </CodeBlock>

                <SectionHeader heading="Want to just use Grids?" />
@ -805,9 +817,11 @@ html, button, input, select, textarea,
                </p>

                <CodeBlock>
-{`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/base-min.css">
-<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-min.css">
-<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`}
+                    {stripIndent`
+                        <link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/base-min.css">
+                        <link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-min.css">
+                        <link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">
+                    `}
                </CodeBlock>

                {/*
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@ -5,7 +5,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import CodeBlock from '../../components/CodeBlock';
 import { filePercent, fileSize } from '../../lib/utils';
-import styles from './styles.css';
+import './styles.css';

 const renderModuleSize = (filesizes) => {
    const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
@ -19,7 +19,7 @@ const renderModuleSize = (filesizes) => {
            </Link>
        </div>
    ));
-}
+};

 function Home() {
    const context = useDocusaurusContext();
@ -28,7 +28,6 @@ function Home() {
        customFields: {
            moduleSizes,
            PURE_DOWNLOAD_SNIPPET,
-          pureVersion,
        },
        organizationName,
        projectName,
--- a/site/src/pages/layouts/index.js
+++ b/site/src/pages/layouts/index.js
@ -1,63 +1,62 @@
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '@theme/Layout';
 import Header from '../../../components/Header';
 import SectionHeader from '../../../components/SectionHeader';

-import styles from './styles.css';
+import './styles.css';

 const title = 'Layouts';
 const description = 'Quickstart your next web project with these example layouts.';
 const layouts = [
    {
-        type: "blog",
-        title: "Blog",
-        summary: "A layout example that shows off a blog page with a list of posts.",
-        modules: ["base", "grids", "buttons", "menus"]
+        type: 'blog',
+        title: 'Blog',
+        summary: 'A layout example that shows off a blog page with a list of posts.',
+        modules: ['base', 'grids', 'buttons', 'menus']
    },
    {
-        type: "email",
-        title: "Email",
-        summary: "A layout example that shows off a responsive email layout.",
-        modules: ["base", "grids", "buttons", "menus"]
+        type: 'email',
+        title: 'Email',
+        summary: 'A layout example that shows off a responsive email layout.',
+        modules: ['base', 'grids', 'buttons', 'menus']
    },
    {
-        type: "gallery",
-        title: "Photo Gallery",
-        summary: "A layout example that shows off a responsive photo gallery.",
-        modules: ["base", "grids", "forms", "buttons", "menus"]
+        type: 'gallery',
+        title: 'Photo Gallery',
+        summary: 'A layout example that shows off a responsive photo gallery.',
+        modules: ['base', 'grids', 'forms', 'buttons', 'menus']
    },
    {
-        type: "marketing",
-        title: "Landing Page",
-        summary: "A layout example that shows off a responsive product landing page.",
-        modules: ["base", "grids", "forms", "buttons", "menus"]
+        type: 'marketing',
+        title: 'Landing Page',
+        summary: 'A layout example that shows off a responsive product landing page.',
+        modules: ['base', 'grids', 'forms', 'buttons', 'menus']
    },
    {
-        type: "pricing",
-        title: "Pricing Table",
-        summary: "A layout example that shows off a responsive pricing table.",
-        modules: ["base", "grids", "buttons", "menus"]
+        type: 'pricing',
+        title: 'Pricing Table',
+        summary: 'A layout example that shows off a responsive pricing table.',
+        modules: ['base', 'grids', 'buttons', 'menus']
    },
    {
-        type: "side-menu",
-        title: "Responsive Side Menu",
-        summary: "A layout example with a side menu that hides on mobile, just like the Pure website.",
-        modules: ["base", "grids", "menus"]
+        type: 'side-menu',
+        title: 'Responsive Side Menu',
+        summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.',
+        modules: ['base', 'grids', 'menus']
    },
    {
-        type: "tucked-menu-vertical",
-        title: "Responsive Horizontal-to-Vertical Menu",
-        summary: "A set of horizontal menus that switch to vertical and which hide at small window widths.",
-        modules: ["base", "grids", "menus"]
+        type: 'tucked-menu-vertical',
+        title: 'Responsive Horizontal-to-Vertical Menu',
+        summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.',
+        modules: ['base', 'grids', 'menus']
    },
    {
-        type: "tucked-menu",
-        title: "Responsive Horizontal-to-Scrollable Menu",
-        summary: "Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.",
-        modules: ["base", "menus"]
+        type: 'tucked-menu',
+        title: 'Responsive Horizontal-to-Scrollable Menu',
+        summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.',
+        modules: ['base', 'menus']
    }
 ];

--- a/site/src/pages/start/index.js
+++ b/site/src/pages/start/index.js
@ -1,13 +1,11 @@
-import Link from '@docusaurus/Link';
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import classnames from 'classnames';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import SectionHeader from '../../../components/SectionHeader';
 import CodeBlock from '../../../components/CodeBlock';
-import styles from './styles.css';
+import { stripIndent } from 'common-tags';
+import './styles.css';

 const title = 'Get Started';
 const description = 'Start your next web project with Pure.';
@ -50,7 +48,7 @@ function Start() {
            </div>

            <CodeBlock full={true} wrap={true}>
-              {`<meta name="viewport" content="width=device-width, initial-scale=1">`}
+                {'<meta name="viewport" content="width=device-width, initial-scale=1">'}
            </CodeBlock>

            <div className="content">
@ -65,11 +63,13 @@ function Start() {
                </p>

                <CodeBlock wrap={true}>
-        {`<div class="pure-g">
+                    {stripIndent`
+                    <div class="pure-g">
                        <div class="pure-u-1-3"><p>Thirds</p></div>
                        <div class="pure-u-1-3"><p>Thirds</p></div>
                        <div class="pure-u-1-3"><p>Thirds</p></div>
-</div>`}
+                    </div>
+                `}
                </CodeBlock>
            </div>

--- a/site/src/pages/tables/index.js
+++ b/site/src/pages/tables/index.js
@ -1,4 +1,3 @@
-import Link from '@docusaurus/Link';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
--- a/site/src/pages/tools/index.js
+++ b/site/src/pages/tools/index.js
@ -1,9 +1,9 @@
-import Link from '@docusaurus/Link';
 import React from 'react';
 import Layout from '../../theme/Layout';
 import Header from '../../../components/Header';
 import CodeBlock from '../../../components/CodeBlock';
 import SectionHeader from '../../../components/SectionHeader';
+import { stripIndent } from 'common-tags';

 const title = 'Tools';
 const description = 'Write, manipulate, and do more with CSS.';
@ -84,7 +84,8 @@ function Tools() {
                </p>

                <CodeBlock>
-{`grunt.initConfig({
+                    {stripIndent`
+                    grunt.initConfig({
                        pure_grids: {
                            dest : "build/public/css/main-grid.css",
                            options: {
@ -97,7 +98,8 @@ function Tools() {
                                }
                            }
                        }
-});`}
+                    });
+                `}
                </CodeBlock>

                <h3>Via Rework</h3>
@ -117,20 +119,22 @@ function Tools() {
                </p>

                <CodeBlock>
-{`import rework from 'rework';
-import pureGrids from 'rework-pure-grids';
+                    {stripIndent`
+                    import rework from 'rework';
+                    import pureGrids from 'rework-pure-grids';

-const css = rework('').use(pureGrids.units({
+                    const css = rework('').use(pureGrids.units({
                        mediaQueries: {
                            sm: 'screen and (min-width: 35.5em)', // 568px
                            md: 'screen and (min-width: 48em)',   // 768px
                            lg: 'screen and (min-width: 64em)',   // 1024px
                            xl: 'screen and (min-width: 80em)'    // 1280px
                        }
-})).toString();
+                    })).toString();

-// This will log-out the grid CSS.
-console.log(css);`}
+                    // This will log-out the grid CSS.
+                    console.log(css);
+                `}
                </CodeBlock>

                <SectionHeader heading="Mutating Selectors" />
@ -158,7 +162,8 @@ console.log(css);`}
                </p>

                <CodeBlock>
-{`grunt.initConfig({
+                    {stripIndent`
+                    grunt.initConfig({
                        css_selectors: {
                            options: {
                                mutations: [
@ -169,7 +174,8 @@ console.log(css);`}
                                'dest/foo-prefixed.css': ['src/foo.css'],
                            }
                        }
-});`}
+                    });
+                `}
                </CodeBlock>

                <h3>Via Rework</h3>
@ -189,16 +195,18 @@ console.log(css);`}
                </p>

                <CodeBlock>
-{`import rework from 'rework';
-import selectors from 'rework-mutate-selectors';
+                    {stripIndent`
+                    import rework from 'rework';
+                    import selectors from 'rework-mutate-selectors';

-const css = rework(inputCSS)
+                    const css = rework(inputCSS)
                        .use(selectors.prefix('.foo'))
                        .use(selectors.replace(/^\.pure/g, '.bar'))
                        .toString();

-// This will log-out the resulting CSS.
-console.log(css);`}
+                    // This will log-out the resulting CSS.
+                    console.log(css);
+                `}
                </CodeBlock>

                <aside>
--- a/site/src/theme/Layout.js
+++ b/site/src/theme/Layout.js
@ -26,11 +26,9 @@ function Layout(props) {
    const {
        children,
        title,
-    noFooter,
        description,
        image,
        keywords,
-    pageType,
        permalink,
        version,
    } = props;
--- a/site/static/js/menus.js
+++ b/site/static/js/menus.js
@ -1,3 +1,4 @@
+/* eslint no-unused-vars:0 no-prototype-builtins:0 */
 (function (window, document) {
    'use strict';

@ -13,7 +14,6 @@
            ARIA_HIDDEN = 'aria-hidden',
            MENU_OPEN = 0,
            MENU_CLOSED = 1,
-            MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
            MENU_ACTIVE_SELECTOR = '.pure-menu-active',
            MENU_LINK_SELECTOR = '.pure-menu-link',
            MENU_SELECTOR = '.pure-menu-children',
--- a/site/static/js/ui.js
+++ b/site/static/js/ui.js
@ -2,8 +2,7 @@

    var layout   = document.getElementById('layout'),
        menu     = document.getElementById('menu'),
-        menuLink = document.getElementById('menuLink'),
-        content  = document.getElementById('main');
+        menuLink = document.getElementById('menuLink');

    function toggleClass(element, className) {
        var classes = element.className.split(/\s+/),
--- a/test/index.js
+++ b/test/index.js
@ -6,6 +6,6 @@ tap.ok(pure.getFile);
 tap.ok(pure.getFilePath);

 // assertions
-tap.match(pure.getFile('pure-min.css'), /pure\-button/, 'should load the file');
-tap.match(pure.getFilePath('pure-min.css'), /pure\-min\.css/, 'should return file path');
+tap.match(pure.getFile('pure-min.css'), /pure-button/, 'should load the file');
+tap.match(pure.getFilePath('pure-min.css'), /pure-min\.css/, 'should return file path');
 tap.throws(pure.getFile, new Error('undefined does not exist'));