needed to move the loading of the USWDS javascript to the body of the…

… page. Made some other minor updates including introducing minification of the javascript and updating the autoprefixer config.
mbucknell · Mar 31, 2021 · f03a108 · f03a108
1 parent f91192b
commit f03a108
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -28,9 +28,10 @@ specified on the --load-path option along with the uswds/src/stylesheets when th
 the style sheets the css should also be processed by postcss using the autoprefixer and postcss-csso using a postcss.config.js file:
 ```javascript
 const autoprefixerOptions = [
-    '>2%',
+    '> 2%',
     'Last 2 versions',
-    'IE 11'
+    'IE 11',
+    'not dead'
 ];
 
 module.exports = ctx => ({

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "src"
   ],
   "dependencies": {
-    "uswds": "2.10.1"
+    "uswds": "2.11.1"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",
@@ -75,6 +75,7 @@
     "postcss-csso": "^5.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "rollup": "^2.44.0",
+    "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.32.8",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended-scss": "^4.2.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,8 @@
 const autoprefixerOptions = [
-    '>2%',
+    '> 2%',
     'Last 2 versions',
-    'IE 11'
+    'IE 11',
+    'not dead'
 ];
 
 module.exports = ctx => ({

diff --git a/rollup.config.js b/rollup.config.js
@@ -5,19 +5,27 @@
 const buble = require('@rollup/plugin-buble');
 const commonjs = require('@rollup/plugin-commonjs');
 const resolve = require('@rollup/plugin-node-resolve');
+const {terser} = require('rollup-plugin-terser');
 
 const bubleConfig = require('./buble.config');
 
 const pkg = require('./package.json');
 
+const env = process.env.NODE_ENV || 'development';
+
 module.exports = {
     input: 'src/js/main.js',
     plugins: [
         resolve.nodeResolve({
             mainFields: ['module']
         }),
         commonjs(),
-        buble(bubleConfig)
+        buble(bubleConfig),
+        env === 'production' && terser({
+                compress: {
+                    drop_console: true
+                }
+            })
     ],
     output: [{
         file: pkg.main,

diff --git a/src/index.html b/src/index.html
@@ -6,10 +6,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
         <script src="uswds-init.min.js"></script>
         <link rel="stylesheet" href="wdfnviz.css">
-        <script src="wdfnviz.js"></script>
         <title>Test Page - USGS Water Data For The Nation</title>
     </head>
     <body>
+        <script async src="wdfnviz.js"></script>
         {% macro url_for(path) %}{{ path }}{% endmacro %}
         {% include "templates/header.html" %}
         <main>