@guanghechen/rollup-config-tsx NPM

Rollup configs for bundle typescript + react projects.

Install

npm

//`stylus` is optional.
npm install --save-dev @guanghechen/rollup-config-tsx stylus

yarn

// `stylus` is optional.
yarn add --dev @guanghechen/rollup-config-tsx stylus

Usage

Use in rollup.config.js

import createRollupConfigs from '@guanghechen/rollup-config-tsx'
import type url from 'postcss-url'
import manifest from './package.json'

const configs = createRollupConfigs({
  manifest,
  shouldSourceMap: false,
  preprocessOptions: {
    input: ['src/style/index.styl'],
    pluginOptions: {
      multiEntryOptions: {
        exports: false,
      },
      postcssOptions: {
        modules: {
          localsConvention: 'camelCase',
          generateScopedName: 'ghc-[local]',
        },
        postcssUrlOptions: {
          url: 'inline',
          maxSize: 0.5, // 0.5 KB
          assetsPath: path.join(__dirname, 'lib'),
          fallback: 'copy',
          basePath: [path.join(__dirname, 'src')],
          useHash: false,
        },
      },
    },
  },
  pluginOptions: {
    typescriptOptions: { tsconfig: 'tsconfig.src.json' },
    postcssOptions: {
      extract: 'index.css',
      minimize: false,
      sourceMap: false,
      modules: {
        localsConvention: 'camelCase',
        generateScopedName: 'ghc-[local]',
      },
      postcssUrlOptions: {
        url: 'inline',
        maxSize: 0.5, // 0.5 KB
        basePath: [path.join(__dirname, 'src')],
        fallback: function (asset: Parameters<url.CustomTransformFunction>[0]) {
          const url = asset.url.replace(/^[/]assets[/]/, '../assets/')
          return url
        },
      },
    },
  },
})

export default configs

At the same time, you should have a project structure similar to the following:

├── src
│   ├── assets
│   │   ├── font
│   │   │   └── tangerine.woff2
│   │   └── image
│   │       └── background.jpeg
│   ├── index.tsx
│   └── style
│       └── index.styl
├── package.json
├── rollup.config.js
├── tsconfig.json
└── tsconfig.src.json

Options

Extended from RollupConfigOptions of @guanghechen/rollup-config.

pluginOptions.postcssOptions: options for rollup-plugin-postcss

/**
 * options for rollup-plugin-postcss
 * @see https://github.com/egoist/rollup-plugin-postcss
 */
PostcssOptions & {
  /**
   * options for autoprefixer
   * @see https://github.com/postcss/autoprefixer
   */
  autoprefixerOptions?: PostcssPluginAutoprefixerOptions
  /**
   * options for postcss-flexbugs-fixes
   * @see https://github.com/luisrudge/postcss-flexbugs-fixes#readme
   */
  flexbugsFixesOptions?: PostcssPluginFlexbugsFixesOptions
  /**
   * options for postcss-url
   * @see https://github.com/postcss/postcss-url#readme
   */
  postcssUrlOptions?: PostcssPluginPostcssUrlOptions
}

preprocessOptions: Options on preprocess phase (such as generate *.d.ts for css files).

/**
 * Rollup input config
 */
input: string | string[] | { include?: string[]; exclude?: string }
/**
 * Rollup output config (required in `rollup -w` mode)
 */
output?: rollup.OutputOptions | rollup.OutputOptions[]
/**
 * Rollup plugin options
 */
pluginOptions?: {
  /**
   * options for @rollup/plugin-multi-entry
   */
  multiEntryOptions?: MultiEntryOptions
  /**
   * options for rollup-plugin-postcss
   */
  postcssOptions?: PostcssOptions & {
    /**
     * options for postcss-url
     */
    postcssUrlOptions?: PostcssPluginPostcssUrlOptions
  }
}