const { join } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const { createEmotionPlugin } = require('emotion-ts-plugin')

module.exports = {
  entry: './tests/fixtures/simple.tsx',

  output: {
    filename: '[name].[hash].js',
    path: join(process.cwd(), 'dist'),
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
  },

  mode: 'development',

  devtool: 'cheap-module-source-map',

  module: {
    rules: [
      {
        test: /\.(jsx|tsx|js|ts)$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [createEmotionPlugin({ // <------------------- here
              sourcemap: true,          
              autoLabel: true,
              labelFormat: '[local]',
              autoInject: true,     //if the jsxFactory is set, should we auto insert the import statement
            })],   
          }),
          compilerOptions: {
            // set jsx pragma to jsx or alias which is from the @emotion/core package to enable css property in jsx component
            jsxFactory: "jsx"
          }
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader?minimize'],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: join(process.cwd(), 'tests', 'fixtures', 'index.html'),
    }),
  ]
}

interface CustomModule {
  // module name used in import statement
  moduleName: string
  // `true` if you may import libs from 'my-emotion/subpath'
  includesSubPath?: boolean
  // all available names exported from custom module
  exportedNames: string[]
  // we may do some additional work on styled function, so if styled is reexport, you should specify it here
  styledName?: string
  // has default export
  hasDefaultExport?: boolean
}

createEmotionPlugin({
  ...otherConfig,
  customModules: [
    {
      moduleName: 'my-emotion',
      includesSubPath: true,
      exportedNames: ['myStyled', 'myCss']
      styledName: 'myStyled',
    }
  ]
})