Added prod & dev build scripts to reduces bundle size in production

packages/react-ui/bundlesize.config.json

@@ -1,8 +1,12 @@
 {
   "files": [
     {
-      "path": "dist/index.js",
+      "path": "dist/react-ui.js",
       "maxSize": "25KB"
+    },
+    {
+      "path": "dist/react-ui.min.js",
+      "maxSize": "15KB"
     }
   ]
 }

packages/react-ui/main.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/react-ui.min.js');
+} else {
+  module.exports = require('./dist/react-ui.js');
+}

packages/react-ui/package.json

@@ -4,7 +4,7 @@
   "description": "Customisable components and primitives based on design tokens",
   "homepage": "https://react-ui.dev",
   "source": "index.js",
-  "main": "dist/index.js",
+  "main": "main.js",
   "files": [
     "dist",
     "themes"
@@ -27,6 +27,7 @@
     "@reach/menu-button": "^0.10.1",
     "@reach/tabs": "^0.10.1",
     "@reach/tooltip": "^0.10.1",
+    "@rollup/plugin-replace": "^2.3.2",
     "deepmerge": "4.0.0",
     "dlv": "^1.1.3",
     "emotion-theming": "^10.0.27",
@@ -37,13 +38,15 @@
     "@babel/preset-env": "^7.7.4",
     "@babel/preset-react": "^7.7.4",
     "@ds-tools/storybook": "0.0.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bundlesize2": "^0.0.24",
     "rollup": "^1.27.8",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0"
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-terser": "^5.3.0"
   },
   "peerDependencies": {
     "react": "^16.8.6",

packages/react-ui/rollup.config.js

@@ -3,42 +3,45 @@ import commonjs from 'rollup-plugin-commonjs'
 import resolve from 'rollup-plugin-node-resolve'
 import external from 'rollup-plugin-peer-deps-external'
 import json from 'rollup-plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import replace from '@rollup/plugin-replace'
+import reactRemovePropTypes from 'babel-plugin-transform-react-remove-prop-types'
 
 import pkg from './package.json'
 
-const plugins = [
-  external({
-    includeDependencies: true
-  }),
-  resolve(),
-  babel({
-    presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
-    exclude: 'node_modules/**'
-  }),
-  commonjs(),
-  json()
-]
+const getPlugins = (isProd) => {
+  return [
+    external({ includeDependencies: true }),
+    resolve(),
+    babel({
+      presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
+      plugins: [isProd && [reactRemovePropTypes, { mode: 'wrap' }]].filter(Boolean), // using wrap to include propTypes only when process.env.NODE_ENV !== "production" 
+      exclude: 'node_modules/**'
+    }),
+    replace({ 'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development') }),
+    commonjs(),
+    json(),
+    isProd && terser()
+  ].filter(Boolean) // filtering boolean values
+}
+
+const cjs = [{
+  input: pkg.source,
+  output: { file: `dist/${pkg.name}.js`, format: 'cjs', sourcemap: true, esModule: false },
+  plugins: getPlugins(false) // dev env plugins
+}, {
+  input: pkg.source,
+  output: { file: `dist/${pkg.name}.min.js`, format: 'cjs', sourcemap: true },
+  plugins: getPlugins(true) // prod env plugins
+}];
 
 export default [
-  {
-    input: pkg.source,
-    output: [{ file: pkg.main, format: 'cjs' }],
-    plugins
-  },
-  {
+  ...cjs, {
     input: ['src/themes/base.js', 'src/themes/light.js', 'src/themes/dark.js'],
     output: [
-      {
-        dir: 'dist/themes/',
-        format: 'cjs',
-        exports: 'named'
-      },
-      {
-        dir: 'themes',
-        format: 'cjs',
-        exports: 'named'
-      }
+      { dir: 'dist/themes/', format: 'cjs', exports: 'named' },
+      { dir: 'themes', format: 'cjs', exports: 'named' }
     ],
-    plugins
+    plugins: getPlugins(true)
   }
 ]

packages/react-ui/src/components/theme-provider/index.js

@@ -71,10 +71,12 @@ const complainAboutUnits = tokens => {
   })
   if (complainAbout.length) {
     const joined = complainAbout.join(', ')
-    let warning = `Scale values should have units. Found values without units in ${joined}.`
-    warning += `\n\n`
-    warning += `Example: Instead of 4, use 4px or 0.25rem`
-    console.warn(warning)
+    if (process.env.NODE_ENV !== 'production') {
+      let warning = `Scale values should have units. Found values without units in ${joined}.`
+      warning += `\n\n`
+      warning += `Example: Instead of 4, use 4px or 0.25rem`
+      console.warn(warning)
+    }
   }
 }
 

packages/react-ui/src/primitives/element.js

@@ -35,7 +35,7 @@ function Element(
   ref
 ) {
   // warn if theme provider is not used
-  if (!theme.defined) {
+  if (!theme.defined && process.env.NODE_ENV !== 'production') {
     let warning = `Missing ThemeProvider. Please wrap your application in a ThemeProvider from react-ui`
     warning += `\n\n`
     warning += `Refer to the documentation at: /components/ThemeProvider`

packages/react-ui/src/primitives/interpolate.js

@@ -95,7 +95,7 @@ function replaceShortcuts(styles) {
 }
 
 function interpolateFactory(styles) {
-  return function(theme) {
+  return function (theme) {
     return interpolate(styles, theme)
   }
 }
@@ -173,26 +173,28 @@ const showPixelFallbackWarning = (key, value, scaleName, scale, label) => {
   const fallbacksOnScale = getFallbacksOnScale(scaleName, scale, fallback)
   const keysOnScale = getKeysOnScale(scale).join(', ')
 
-  let warning = `${value} is not a valid token for ${key} in ${label} component, applying ${fallback} as fallback.`
-  warning += ` `
-  warning += `Please use one of the keys on the '${scaleName}' scale.`
-  warning += `\n\n`
+  if (process.env.NODE_ENV !== 'production') {
+    let warning = `${value} is not a valid token for ${key} in ${label} component, applying ${fallback} as fallback.`
+    warning += ` `
+    warning += `Please use one of the keys on the '${scaleName}' scale.`
+    warning += `\n\n`
 
-  if (fallbacksOnScale.length) {
-    if (fallbacksOnScale.length === 1) {
-      const expectedValue = fallbacksOnScale[0]
-      warning += `${value}px has the index ${expectedValue} on the scale. You can set the value for ${key} to ${expectedValue} to hide this warning.`
+    if (fallbacksOnScale.length) {
+      if (fallbacksOnScale.length === 1) {
+        const expectedValue = fallbacksOnScale[0]
+        warning += `${value}px has the index ${expectedValue} on the scale. You can set the value for ${key} to ${expectedValue} to hide this warning.`
+      } else {
+        const expectedValues = fallbacksOnScale.join(', ')
+        warning += `${value}px is on your scale, you can set the value for ${key} to one of { ${expectedValues} } to hide this warning.`
+      }
+      warning += `\n\n`
     } else {
-      const expectedValues = fallbacksOnScale.join(', ')
-      warning += `${value}px is on your scale, you can set the value for ${key} to one of { ${expectedValues} } to hide this warning.`
+      warning += `If you are trying to use a custom value not on the scale, you can hide this message by specifying the unit, example: ${value}px or ${value}em`
+      warning += `\n\n`
     }
-    warning += `\n\n`
-  } else {
-    warning += `If you are trying to use a custom value not on the scale, you can hide this message by specifying the unit, example: ${value}px or ${value}em`
-    warning += `\n\n`
-  }
 
-  console.warn(warning)
+    console.warn(warning)
+  }
 }
 
 const showColorWarning = (key, value, scaleName, scale, label) => {
@@ -202,16 +204,28 @@ const showColorWarning = (key, value, scaleName, scale, label) => {
   const fallback = value
   const keysOnScale = getKeysOnScale(scale)
 
-  let warning = `${value} is not a valid token for ${key} in ${label} component, applying "${key}: ${fallback}" as fallback.`
-  warning += ` `
-  warning += `Please use one of the keys on the '${scaleName}' scale.`
-  warning += `\n\n`
-  warning += `If you are trying to use a custom value not on the scale, you can hide this message by using the hex code for the color, example: #38C172`
-  warning += `\n\n`
+  if (process.env.NODE_ENV !== 'production') {
+    let warning = `${value} is not a valid token for ${key} in ${label} component, applying ${fallback} as fallback.`
+    warning += ` `
+    warning += `Please use one of the keys on the '${scaleName}' scale.`
+    warning += `\n\n`
 
-  // find matching fallbacks in colors to suggest
+    if (fallbacksOnScale.length) {
+      if (fallbacksOnScale.length === 1) {
+        const expectedValue = fallbacksOnScale[0]
+        warning += `${value}px has the index ${expectedValue} on the scale. You can set the value for ${key} to ${expectedValue} to hide this warning.`
+      } else {
+        const expectedValues = fallbacksOnScale.join(', ')
+        warning += `${value}px is on your scale, you can set the value for ${key} to one of { ${expectedValues} } to hide this warning.`
+      }
+      warning += `\n\n`
+    } else {
+      warning += `If you are trying to use a custom value not on the scale, you can hide this message by specifying the unit, example: ${value}px or ${value}em`
+      warning += `\n\n`
+    }
 
-  console.warn(warning)
+    console.warn(warning)
+  }
 }
 
 export function getKeysOnScale(scale) {

yarn.lock

@@ -1971,6 +1971,23 @@
   dependencies:
     tslib "^1.11.1"
 
+"@rollup/plugin-replace@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.2.tgz#da4e0939047f793c2eb5eedfd6c271232d0a033f"
+  integrity sha512-KEEL7V2tMNOsbAoNMKg91l1sNXBDoiP31GFlqXVOuV5691VQKzKBh91+OKKOG4uQWYqcFskcjFyh1d5YnZd0Zw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    magic-string "^0.25.5"
+
+"@rollup/pluginutils@^3.0.8":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
+  integrity sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==
+  dependencies:
+    "@types/estree" "0.0.39"
+    estree-walker "^1.0.1"
+    picomatch "^2.2.2"
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -4209,7 +4226,7 @@ babel-plugin-transform-property-literals@^6.9.4:
   dependencies:
     esutils "^2.0.2"
 
-[email protected]:
+[email protected], babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
   integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
@@ -6927,6 +6944,11 @@ estree-walker@^0.6.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
   integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
 
+estree-walker@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
+  integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -11000,7 +11022,7 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-magic-string@^0.25.2:
+magic-string@^0.25.2, magic-string@^0.25.5:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -12522,6 +12544,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
   integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
 
+picomatch@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -14961,7 +14988,18 @@ rollup-plugin-peer-deps-external@^2.2.0:
   resolved "https://registry.yarnpkg.com/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.2.tgz#506cef67fb68f41cca3ec08ca6ff7936b190f568"
   integrity sha512-XcHH4UW9exRTAf73d8rk2dw2UgF//cWbilhRI4Ni/n+t0zA1eBtohKyJROn0fxa4/+WZ5R3onAyIDiwRQL+59A==
 
-rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1:
+rollup-plugin-terser@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.0.tgz#9c0dd33d5771df9630cd027d6a2559187f65885e"
+  integrity sha512-XGMJihTIO3eIBsVGq7jiNYOdDMb3pVxuzY0uhOE/FM4x/u9nQgr3+McsjzqBn3QfHIpNSZmFnpoKAwHBEcsT7g==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    jest-worker "^24.9.0"
+    rollup-pluginutils "^2.8.2"
+    serialize-javascript "^2.1.2"
+    terser "^4.6.2"
+
+rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
@@ -16281,6 +16319,15 @@ terser@^4.1.2, terser@^4.4.3, terser@^4.6.3:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^4.6.2:
+  version "4.6.13"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.13.tgz#e879a7364a5e0db52ba4891ecde007422c56a916"
+  integrity sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 test-exclude@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"