@procore/core-react/config.js

JSX implementations for core-css

const prefixer = require('postcss-prefixer')
const path = require('path')
const webpack = require('webpack')

const pkg = require('./package.json')

const version = pkg.version.split('-')[0].replace(/\./g, '_')

const isDev = process.env.NODE_ENV === 'development'

module.exports = entry => ({
  mode: isDev ? 'development' : 'production',
  devtool: isDev ? 'eval-source-map' : 'source-map',
  entry,
  output: {
    path: path.resolve(__dirname, 'lib'),
    libraryTarget: 'umd',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules',
        include: /flexboxgrid/,
      },
      {
        test: /\.s?css$/,
        exclude: /flexboxgrid/, // so we have to exclude it
        use: [
          'style-loader',
          {
            loader: `css-loader`,
            options: {
              modules: true,
              localIdentName: isDev
                ? `[local]-[hash:base64:5]-${version}`
                : `[hash:base64:5]-${version}`,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [prefixer({ prefix: 'core-' })],
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  externals: {
    react: 'umd react',
    'react-dom': 'umd react-dom',
    'prop-types': 'umd prop-types',
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
  ],
})