chore: improve bundle size (#4011)

Author: layershifter

.babel-preset.js

@@ -16,7 +16,7 @@ const browsers = [
 ]
 
 const plugins = [
-  '@babel/plugin-proposal-class-properties',
+  ['@babel/plugin-proposal-class-properties', { loose: true }],
   '@babel/plugin-proposal-export-default-from',
   '@babel/plugin-proposal-export-namespace-from',
   '@babel/plugin-syntax-dynamic-import',
@@ -58,6 +58,7 @@ module.exports = () => ({
       '@babel/env',
       {
         modules: isESBuild || isUMDBuild ? false : 'commonjs',
+        loose: true,
         targets: { browsers },
       },
     ],

.github/CONTRIBUTING.md

@@ -23,13 +23,16 @@ process.env.NODE_ENV = 'build-es'
 const makeWebpackConfig = (entry) => ({
   devtool: false,
   mode: 'production',
-  name: 'client',
   target: 'web',
 
   entry,
   output: {
     filename: path.basename(entry),
     path: config.paths.base('bundle-size', 'dist'),
+
+    ...(argv.debug && {
+      pathinfo: true,
+    }),
   },
 
   module: {

bundle-size/bundle.js

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import cx from 'clsx'
 import copyToClipboard from 'copy-to-clipboard'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.js

@@ -76,7 +76,7 @@
     "@semantic-ui-react/event-stack": "^3.1.0",
     "@stardust-ui/react-component-event-listener": "~0.38.0",
     "@stardust-ui/react-component-ref": "~0.38.0",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
     "keyboard-key": "^1.1.0",
     "lodash": "^4.17.19",
     "prop-types": "^15.7.2",

package.json

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'

src/collections/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'

src/collections/Form/Form.js

@@ -1,4 +1,4 @@
-import cx from 'classnames'
+import cx from 'clsx'
 import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { createElement } from 'react'