fix: fix esm compilation

.babelrc

@@ -1,14 +1,31 @@
 {
   "presets": [
-    ["@babel/preset-env", {
-      "modules": false,
-      "useBuiltIns": false
-    }],
+    "@babel/preset-env",
     "@babel/preset-react"
   ],
   "plugins": [
     ["@babel/plugin-proposal-class-properties", { "loose": true }],
     "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-export-default-from"
+  ],
+  "env": {
+    "module": {
+      "presets": [
+        ["@babel/preset-env", {
+          "modules": false,
+          "useBuiltIns": false,
+          "targets": {
+            "esmodules": true
+          }
+        }]
+      ],
+      "plugins": [
+        "./plugins/babel/stylus"
+      ],
+      "ignore": [
+        "node_modules/**"
+      ]
+    },
+  }
 }

package.json

@@ -3,8 +3,8 @@
   "version": "0.0.1-beta.6",
   "description": "🏔 Junipero Design System React components",
   "main": "dist/junipero.cjs.js",
-  "jsnext:main": "dist/junipero.es.js",
-  "module": "dist/junipero.es.js",
+  "jsnext:main": "dist/lib/index.js",
+  "module": "dist/lib/index.js",
   "unpkg": "dist/junipero.min.js",
   "cdn": "dist/junipero.min.js",
   "esnext": "src",
@@ -18,8 +18,10 @@
     "react-popper": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/cli": "^7.2.0",
+    "@babel/core": "^7.2.0",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-proposal-optional-chaining": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.1.0",
@@ -28,6 +30,7 @@
     "autoprefixer": "^9.3.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.4",
+    "clean-css": "^4.2.1",
     "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^1.0.1",
     "eslint": "^5.8.0",
@@ -73,10 +76,11 @@
     "prop-types": "^15.6.2"
   },
   "scripts": {
-    "serve": "./node_modules/.bin/webpack-dev-server --config ./webpack.dev.js --hot --inline --open",
+    "serve": "./node_modules/.bin/webpack-dev-server --config ./webpack.config.js --hot --inline --open",
     "clean": "rm -r ./dist || true",
-    "build-webpack": "./node_modules/.bin/webpack --config webpack.release.js",
-    "build-rollup": "yarn clean && ./node_modules/.bin/rollup -c",
-    "prepack": "yarn build-rollup"
+    "build:module": "BABEL_ENV=module ./node_modules/.bin/babel ./src --out-dir ./dist/lib",
+    "build:browser": "BABEL_ENV=browser ./node_modules/.bin/rollup -c",
+    "build": "yarn clean && yarn build:browser && yarn build:module",
+    "prepack": "yarn build"
   }
 }

plugins/babel/stylus.js

@@ -0,0 +1,99 @@
+/* global process */
+
+const fs = require('fs');
+const { dirname, isAbsolute, resolve } = require('path');
+const postCSS = require('postcss');
+const autoprefixer = require('autoprefixer');
+const stylus = require('stylus');
+
+const cleanCSS = require('../post-css/clean-css');
+
+/*
+  MODULE REGEX WILL RETURN STYLUS NODE_MODULE IMPORT
+  WILL RETURN TRUE FOR
+  * @import '~module'
+  * @require '~another-module'
+  WILL RETURN FALSE FOR
+  * @require 'module.styl'
+  * @require 'module'
+  * div ~ input
+*/
+
+const MODULE_REGEX = /(~*@).*/;
+
+const fileExists = filename => {
+  try {
+    const stats = fs.statSync(filename);
+    return stats.isFile(filename);
+  } catch (e) {
+    if (e.code === 'ENOENT') {
+      return false;
+    } else {
+      throw Error(e);
+    }
+  }
+};
+
+const compileStylusFile = (jsFile, stylusFile) => {
+  // try to resolve as file path
+  const from = resolveModulePath(jsFile);
+  let path = resolve(from, stylusFile);
+  if (!fileExists(path)) {
+    // try to resolve from node modules
+    path = resolve('./node_modules', stylusFile);
+  }
+
+  if (!fileExists(path)) {
+    throw Error('Cannot find stylus file: ' + stylusFile);
+  }
+
+  let stylusContent = fs.readFileSync(path, 'utf8');
+
+  if (stylusContent.match(MODULE_REGEX) !== null) {
+    const match = stylusContent.match(MODULE_REGEX);
+    stylusContent = stylusContent
+      .replace(MODULE_REGEX, match[0].replace('~', ''));
+  }
+
+  let parsed = stylus(stylusContent)
+    .include(dirname(path))
+    .include(resolve('./node_modules'))
+    .render();
+
+  return postCSS([
+    autoprefixer,
+    cleanCSS,
+  ]).process(parsed).css;
+};
+
+const resolveModulePath = (filename) => {
+  const dir = dirname(filename);
+  if (isAbsolute(dir)) { return dir; }
+  if (process.env.PWD) { return resolve(process.env.PWD, dir); }
+  return resolve(dir);
+};
+
+module.exports = ({types: t}) => {
+  return {
+    visitor: {
+      ImportDeclaration: (path, state) => {
+        const node = path.node;
+        if (node && node.source && node.source.value &&
+          node.source.type === 'StringLiteral' &&
+          node.source.value.endsWith('.styl')
+        ) {
+          const jsFile = state.file.opts.filename;
+          const stylusFile = node.source.value;
+          const css = compileStylusFile(jsFile, stylusFile);
+
+          const id = node.specifiers[0].local.name;
+          path.replaceWith(
+            t.variableDeclaration('var', [
+              t.variableDeclarator(t.identifier(id), t.stringLiteral(css)),
+            ])
+          );
+        }
+      },
+    },
+  };
+};

plugins/post-css/clean-css.js

@@ -0,0 +1,10 @@
+const PostCSS = require('postcss');
+const CleanCSS = require('clean-css');
+
+module.exports = (css, res) => {
+  const cleancss = new CleanCSS();
+  const minified = cleancss.minify(css.toString());
+
+  res.root = PostCSS.parse(minified.styles);
+  return res;
+};

rollup.config.js

@@ -66,7 +66,6 @@ const libConfig = (config = defaultConfig()) => ({
   ...config,
   output: [
     { file: 'dist/junipero.cjs.js', format: 'cjs' },
-    { file: 'dist/junipero.es.js', format: 'es' },
   ],
 });
 

src/index.js

@@ -1,25 +1,26 @@
 import { injectStyles } from './utils';
 
-export TextField from './TextField';
-export CodeField from './CodeField';
+export BreadCrumb from './BreadCrumb';
+export Button from './Button';
 export CheckBox from './CheckBox';
+export CodeField from './CodeField';
+export ColorPicker from './ColorPicker';
+export DateField from './DateField';
+export Dropdown from './Dropdown';
+export DropdownItem from './DropdownItem';
+export DropdownMenu from './DropdownMenu';
+export DropdownToggle from './DropdownToggle';
+export Modal from './Modal';
 export SelectField from './SelectField';
 export Slider from './Slider';
-export Toggle from './Toggle';
-export DateField from './DateField';
-export Button from './Button';
+export Switch from './Switch';
+export Tab from './Tab';
+export Tabs from './Tabs';
 export TagsField from './TagsField';
-export BreadCrumb from './BreadCrumb';
+export TextField from './TextField';
+export Toggle from './Toggle';
 export Tooltip from './Tooltip';
-export Tabs from './Tabs';
-export Tab from './Tab';
-export Modal from './Modal';
-export ColorPicker from './ColorPicker';
-export Switch from './Switch';
-export Dropdown from './Dropdown';
-export DropdownToggle from './DropdownToggle';
-export DropdownMenu from './DropdownMenu';
-export DropdownItem from './DropdownItem';
+export { getContainerNode, omit, classNames } from './utils';
 
 import styles from './theme/index.styl';
 injectStyles(styles, { id: 'junipero-main-styles' });

webpack.common.js → webpack.config.js

@@ -1,13 +1,35 @@
+const webpack = require('webpack');
 const path = require('path');
 const autoprefixer = require('autoprefixer');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   entry: {
-    'junipero': './src/index.js',
+    'examples': './examples/index.js',
   },
-  target: 'web',
-  optimization: {
-    minimize: false,
+  devtool: 'inline-source-map',
+  mode: 'development',
+  devServer: {
+    contentBase: './dist',
+    port: 65000,
+    host: 'localhost',
+    historyApiFallback: true,
+  },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      debug: true,
+    }),
+    new HtmlWebpackPlugin({
+      template: './examples/index.html',
+      chunks: ['examples'],
+      inject: true,
+    }),
+  ],
+  resolve: {
+    extensions: ['.js'],
+    alias: {
+      '@poool/junipero': path.resolve('./src'),
+    },
   },
   module: {
     rules: [{
@@ -37,12 +59,4 @@ module.exports = {
       loader: 'file-loader',
     }],
   },
-  node: false,
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].js',
-    library: 'junipero',
-    libraryTarget: 'umd',
-    sourceMapFilename: '[name].js.map',
-  },
 };