@guanghechen/rollup-config-tsx

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
    }
  }

Related

• @guanghechen/rollup-config
• @guanghechen/rollup-config-cli
• @guanghechen/rollup-plugin-copy