unused css

README.md

@@ -66,7 +66,7 @@ on development you would import antd.less globally only in dev mode to make hot
 * next-routes - see routes.js.  Put every route in here to enable static assets added to link preload header
 * styleguide - npm run storybook  ()Needed some less fixes in .storybook/webpack.config.js)
 * reason-apollo - the reason-apollo example copied into a page and working
-
+* purge unused css - see next.config.js for whitelist (you would normally only add components you need)
 
 TODO: 
 * auth (likely with AWS Amplify)

assets/styles.less

@@ -7,6 +7,7 @@
 html, body {
   height: 100%;
 }
+/* purgecss ignore */
 #__next {
   height: 100%;
 }

buildspec.yml

@@ -25,7 +25,13 @@ phases:
     - npm install babel-plugin-bucklescript
     - npm uninstall repack-zip-alt
     - npm install repack-zip-alt
-
+    - npm uninstall @zeit/next-css
+    - npm install @zeit/next-css
+    - npm uninstall @zeit/next-less
+    - npm install @zeit/next-less
+    - npm uninstall @zeit/next-stylus
+    - npm install @zeit/next-stylus
+    - npm uninstall bs-ant-design-alt bs-ant-design-mobile bs-css bs-fontawesome bs-next-alt bs-next-seo bs-react-iframe bs-react-intl bs-react-useragent
     - chmod +x codebuild.sh
     - chmod +x codebuildPrep.sh
     - ./codebuildPrep.sh

next.config.js

@@ -42,21 +42,14 @@ function moduleDir(m) {
 
 
 const nextConfig = {
+    purgeCss: {
+        whitelist: ["ant-layout"],
+        whitelistPatterns: [/^ant-/, /^fade-/, /^move-/, /^slide-/, /^zoom-/, /^svg-/, /^fa-/],
+        whitelistPatternsChildren: [/^ant-/, /^fade-/, /^move-/, /^slide-/, /^zoom-/, /^svg-/, /^fa-/],
+    },
     stylusLoaderOptions: {
         use: [nib()],
     },
-    translation: {
-        // default / fallback language
-        defaultLanguage: "en",
-        localesPath: "./static/locales/",
-
-        // needed for serverside preload
-        allLanguages: ["en", "de"],
-
-        // optional settings needed for subpath (/de/page1) handling
-        enableSubpaths: true,
-        subpathsOnNonDefaultLanguageOnly: false, // only redirect to /lng/ if not default language
-    },
     // devSwSrc: './static/js/service-worker.js',
     poweredByHeader: false,
     // Try blank prefix as precache has localhost:9000 for service worker
@@ -72,7 +65,10 @@ const nextConfig = {
             {
                 urlPattern: /^https:\/\/fonts\.googleapis\.com/,
                 handler: "cacheFirst",
-                options: {cacheName: "google-fonts-stylesheets", expiration: {maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 * 30}},
+                options: {
+                    cacheName: "google-fonts-stylesheets",
+                    expiration: {maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 * 30},
+                },
             },
             {urlPattern: /^https?.*/, handler: "networkFirst"},
         ],
@@ -131,7 +127,9 @@ module.exports = (phase) => {
         const withLess = require("@zeit/next-less");
         const withCSS = require("@zeit/next-css");
         const withStylus = require("@zeit/next-stylus");
-        return withOffline(withStylus(withLess(withCSS(nextConfig))));
+        const withPurgeCss = require("next-purgecss");
+
+        return withOffline(withStylus(withLess(withCSS(withPurgeCss(nextConfig)))));
     }
     return withOffline(nextConfig);
 };

package.json

@@ -60,27 +60,16 @@
     "@quentin-sommer/react-useragent": "^2.0.0",
     "@sentry/browser": "^4.2.4",
     "@sentry/node": "^4.2.4",
-    "@zeit/next-css": "^1.0.1",
-    "@zeit/next-less": "^1.0.1",
-    "@zeit/next-stylus": "^1.0.1",
     "accepts": "^1.3.5",
     "antd": "^3.10.4",
     "antd-mobile": "^2.2.6",
     "apminsight": "^1.2.0",
-    "apollo-boost": "^0.1.19",
+    "apollo-boost": "^0.1.20",
     "apollo-link-context": "^1.0.9",
+    "apollo-upload-client": "^9.1.0",
     "babel-plugin-import": "^1.11.0",
     "babel-plugin-react-intl": "^3.0.1",
-    "bs-ant-design-alt": "^1.0.7",
-    "bs-ant-design-mobile": "^1.0.3",
-    "bs-css": "^7.3.0",
-    "bs-fontawesome": "^1.0.0",
-    "bs-next-alt": "^1.0.1",
-    "bs-next-seo": "^1.0.0",
-    "bs-react-iframe": "^1.0.0",
-    "bs-react-intl": "^0.6.0",
-    "bs-react-useragent": "^1.0.0",
-    "cors": "^2.8.4",
+    "cors": "^2.8.5",
     "express": "^4.16.4",
     "express-healthcheck": "^0.1.0",
     "glob": "^7.1.3",
@@ -90,15 +79,16 @@
     "hoist-non-react-statics": "^3.1.0",
     "intl": "^1.2.5",
     "isomorphic-unfetch": "^3.0.0",
-    "less": "^3.8.1",
     "next": "^7.0.2",
     "next-offline": "^3.0.4",
     "next-preload-headers": "^2.0.0",
     "next-routes": "^1.4.2",
     "next-rum": "^1.1.0",
     "next-seo": "^1.2.0",
-    "nib": "^1.1.2",
     "pm2": "^3.2.2",
+    "stylus": "^0.54.5",
+    "less": "^3.8.1",
+    "nib": "^1.1.2",
     "react": "^16.6.0",
     "react-apollo": "^2.2.4",
     "react-dom": "^16.6.0",
@@ -108,22 +98,33 @@
     "reason-react": "^0.5.3",
     "recompose": "^0.30.0",
     "require-hacker": "^3.0.1",
-    "shrink-ray-current": "^3.0.0",
-    "stylus": "^0.54.5",
+    "shrink-ray-current": "^3.0.1",
     "svg-sprite-loader": "^4.1.3",
     "throttle-debounce": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-decorators": "^7.1.2",
-    "@storybook/addon-actions": "^4.0.2",
-    "@storybook/addon-links": "^4.0.2",
-    "@storybook/addons": "^4.0.2",
-    "@storybook/react": "^4.0.2",
+    "@storybook/addon-actions": "^4.0.4",
+    "@storybook/addon-links": "^4.0.4",
+    "@storybook/addons": "^4.0.4",
+    "@storybook/react": "^4.0.4",
+    "@zeit/next-css": "^1.0.1",
+    "@zeit/next-less": "^1.0.1",
+    "@zeit/next-stylus": "^1.0.1",
     "babel-eslint": "10.0.1",
     "babel-loader": "^8.0.4",
     "babel-plugin-bucklescript": "^0.5.3",
     "bs-platform": "^4.0.7",
+    "bs-ant-design-alt": "^1.0.7",
+    "bs-ant-design-mobile": "^1.0.3",
+    "bs-css": "^7.3.0",
+    "bs-fontawesome": "^1.0.0",
+    "bs-next-alt": "^1.0.1",
+    "bs-next-seo": "^1.0.0",
+    "bs-react-iframe": "^1.0.0",
+    "bs-react-intl": "^0.6.0",
+    "bs-react-useragent": "^1.0.0",
     "dotenv": "^6.1.0",
     "eslint": "5.8.0",
     "eslint-config-airbnb": "17.1.0",
@@ -138,6 +139,7 @@
     "graphql_ppx": "^0.2.8",
     "husky": "^1.1.3",
     "lint-staged": "^8.0.4",
+    "next-purgecss": "^2.0.0",
     "ngrok": "3.1.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "pre-commit": "^1.2.2",

pages/_app.js

@@ -14,7 +14,6 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 import {UserAgentProvider} from "@quentin-sommer/react-useragent";
 import RUM from "next-rum";
 import {IntlProvider, addLocaleData} from "react-intl";
-import {FormattedMessage} from "react-intl";
 import withApollo from "../apollo/withApollo";
 // import your default seo configuration
 import SEO from "../next-seo.config";

server.js

@@ -1,5 +1,5 @@
 /* eslint no-shadow: "off", "no-console":  off, no-unused-vars: 0, no-param-reassign: 0,
-guard-for-in: 0, no-restricted-syntax: 0,  no-underscore-dangle: 0, global-require: 0 */
+guard-for-in: 0, no-restricted-syntax: 0,  no-underscore-dangle: 0, global-require: 0, import/no-dynamic-require */
 
 // Polyfill Node with `Intl` that has data for all locales.
 // See: https://formatjs.io/guides/runtime-environments/#server
@@ -192,8 +192,6 @@ const createServer = () => {
         // }
 
         const accept = accepts(req);
-        console.log(`here in * - ${accept.language(languages)}`);
-
         const locale = accept.language(languages) || "en";
         req.locale = locale;
         req.localeDataScript = getLocaleDataScript(locale);