Revert "refactor(project): remove theme-preval.js (#3243)"

This reverts commit 8733988.

babel.config.js

@@ -6,6 +6,7 @@ function replacementPlugin(env) {
 
 const sharedPlugins = [
   'macros',
+  'preval',
   'dev-expression',
   'add-react-displayname',
   'babel-plugin-styled-components',
@@ -21,7 +22,17 @@ module.exports = {
   env: {
     development: {
       presets: makePresets(process.env.BABEL_MODULE || false),
-      plugins: [...sharedPlugins, replacementPlugin('development')],
+      plugins: [
+        ...(process.env.BABEL_MODULE === 'commonjs'
+          ? ['@babel/plugin-transform-modules-commonjs']
+          : process.env.STORYBOOK
+          ? []
+          : [
+              'transform-commonjs', // theme-preval is commonjs and needs to be transformed to esm
+            ]),
+        ...sharedPlugins,
+        replacementPlugin('development'),
+      ],
     },
     production: {
       presets: makePresets(false),

package.json

@@ -176,7 +176,9 @@
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
+    "babel-plugin-preval": "5.1.0",
     "babel-plugin-styled-components": "2.1.1",
+    "babel-plugin-transform-commonjs": "1.1.6",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "change-case": "4.1.2",

rollup.config.js

@@ -71,6 +71,8 @@ function createPackageRegex(name) {
 const baseConfig = {
   input: Array.from(input),
   plugins: [
+    // Note: it's important that the babel-plugin-preval is loaded first
+    // to work as-intended
     babel({
       extensions,
       exclude: /node_modules/,
@@ -88,6 +90,7 @@ const baseConfig = {
       ],
       plugins: [
         'macros',
+        'preval',
         'add-react-displayname',
         'dev-expression',
         'babel-plugin-styled-components',
@@ -103,10 +106,10 @@ const baseConfig = {
         ],
       ],
     }),
-    resolve({
+    commonjs({
       extensions,
     }),
-    commonjs({
+    resolve({
       extensions,
     }),
     postcss({