Merge pull request #101 from geotrev/develop

[Version 3.0.0] Release

Author: geotrev

.npmignore

@@ -1,9 +1,7 @@
 .DS_store
-yarn-error.log*
 npm-error.log*
 
 /build/
-/node_modules/
 /.nyc_output/
 
 .ruby-version

README.md

@@ -13,7 +13,7 @@ The framework features:
 - A flex-grid for layouts
 - Styling for common tags: buttons, paragraphs, headers, etc.
 - Configuration file to apply core brand styling to all elements, including an option for name-spacing.
-- Functional JavaScript components: modals, accordions, etc.
+- Functional JavaScript components. Currently includes dropdowns, modals, and accordions.
 
 ## Easy setup
 
@@ -59,7 +59,7 @@ For more details on customizing branding, check out the [Branding](https://under
 
 ### NPM / JS modules
 
-Another option is to use the npm package and borrow the modules you need. This is great for webpack where you can tree shake the modules you won't be needing.
+Another option is to use the npm package and borrow the modules you need. This is great for webpack where you can choose to import specific components directly.
 
 ```sh
 $ npm install --save-dev undernet
@@ -70,16 +70,16 @@ Check out the [documentation](https://undernet.io/docs/overview/javascript) to s
 Then require or import the dependency in your js, or add it to a script tag in your main layout (see the **Easy setup** method above for script usage).
 
 ```js
+// import everything
 import Undernet from "undernet"
-
-// start all components
 Undernet.start()
 
-// or only use a single component, e.g. the Modal:
-// NOTE: if you use Undernet.start(), you're effectively doing nothing with this property call
-Undernet.Modals.start()
+// or import a specific component:
+import Modals from "undernet/js/dist/components/modal"
+Modals.start()
 ```
 
+
 #### React
 
 Undernet fully supports use in React. You simply need to call the `.start()` property in `componentDidMount()`, and then `.stop()` in `componentWillUnmount()` (to prevent unnecessary event listeners when the components are no longer visible):
@@ -96,7 +96,7 @@ export default class SomeComponent extends React.Component {
 
   render() {
     return <div>
-      // ... modal markup here!
+      {/* ... modal markup here! */}
     </div>
   }
 }
@@ -121,7 +121,7 @@ See CONTRIBUTING.md for more details on git flow and recommendations for pull re
 
 ### Fork and clone for development
 
-Clone the repo and re-clone the wiki contents.
+First fork the project on Github. Then set up locally.
 
 ```sh
 $ git clone git@github.com:USER_NAME/undernet.git

babel.config.js

@@ -1,28 +1,31 @@
-function presets(rollup) {
-  if (rollup) {
-    return [["@babel/preset-env", { modules: false }]]
-  } else {
-    return ["@babel/preset-env", "@babel/preset-react"]
+function presets(dist) {
+  let result = ["@babel/preset-env"]
+
+  if (!dist) {
+    result.pop()
+    result.push(["@babel/preset-env", { useBuiltIns: "entry" }])
+    result.push("@babel/preset-react")
   }
+
+  return result
 }
 
 function plugins(options) {
-  let result = ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties"]
+  let result = [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    ["babel-plugin-webpack-aliases", { config: "config/webpack.dev.js" }],
+  ]
 
   if (options.test) result.push("dynamic-import-node")
-
   if (options.dev || options.prod) result.push("emotion")
 
-  if (options.dev || options.test) {
-    result.push(["babel-plugin-webpack-aliases", { config: "config/webpack.dev.js" }])
-  }
-
   return result
 }
 
 module.exports = {
   env: {
-    rollup: {
+    dist: {
       presets: presets(true),
     },
     development: {

config/rollup.config.js

@@ -21,6 +21,7 @@ module.exports = {
     resolve(),
     babel({
       exclude: "node_modules/**",
+      comments: false,
     }),
   ],
 }

config/webpack.prod.js

@@ -17,7 +17,6 @@ module.exports = merge(common(true), {
         parallel: true,
         sourceMap: false,
       }),
-      new OptimizeCSSAssetsPlugin(),
     ],
     runtimeChunk: {
       name: "manifest",
@@ -34,6 +33,15 @@ module.exports = merge(common(true), {
       allowExternal: true,
     }),
 
+    // minify styles
+    new OptimizeCSSAssetsPlugin({
+      cssProcessorPluginOptions: {
+        preset: ['default', {
+          discardComments: { removeAll: true }
+        }],
+      },
+    }),
+
     // create gzip assets
     new CompressionPlugin({
       test: /\.(js|css)$/,