rollup.config.js

import cssnano from 'cssnano';
import simplevars from 'postcss-simple-vars';
import nested from 'postcss-nested';
import cssnext from 'postcss-cssnext';
import postcssModules from 'postcss-modules';
import tslint from 'rollup-plugin-tslint';
import uglify from 'rollup-plugin-uglify';
import postcss from 'rollup-plugin-postcss';
import replace from 'rollup-plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript';
import pkg from './package.json';

const isProduction = process.env.NODE_ENV === 'production';
const cssExportMap = {};

export default {
  name: pkg.name,
  input: 'src/index.ts',
  output: [
    // Webpack/Browserify/Node bundle
    {
      file: pkg.main,
      format: 'umd',
    },
  ],
  banner: `/* Totemic UI -- version ${pkg.version} */`,
  sourcemap: true,
  external: ['react', 'react-dom'],
  globals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  plugins: [
    resolve({
      jsnext: true,
      browser: true,
      main: true,
      customResolveOptions: {
        moduleDirectory: 'node_modules',
      },
    }),
    commonjs({
      include: ['node_modules/**'],
      exclude: ['node_modules/process-es6/**'],
      namedExports: {
        [require.resolve('react')]: [
          'Children',
          'Component',
          'PropTypes',
          'createElement',
        ],
        [require.resolve('react-dom')]: ['render'],
      },
    }),
    postcss({
      scopeBehavior: 'local',
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      extensions: ['.css'],
      plugins: [
        simplevars(),
        nested(),
        cssnext({ warnForDuplicates: false }),
        cssnano(),
        postcssModules({
          getJSON(id, exportTokens) {
            cssExportMap[id] = exportTokens;
          },
        }),
      ],
      getExportNamed: true,
      getExport: id => cssExportMap[id],
    }),
    tslint({
      include: ['src/**/*.tsx', 'src/**/*.ts'],
    }),
    typescript({
      exclude: 'node_modules/**',
      typescript: require('typescript'),
    }),
    replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
    isProduction && uglify(),
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "module": "umd",
    "target": "es5",
    "jsx": "react",
    "lib": ["es2015", "es2016", "dom"]
  },
  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
}