Features

Usage

const{ join}=require('path')constMiniCssExtractPlugin=require('mini-css-extract-plugin')constHtmlWebpackPlugin=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:/\.(j|t)sx?$/,loader:'ts-loader',options:{transpileOnly:true,getCustomTransformers:()=>({before:[createEmotionPlugin({// <------------------- heresourcemap:true,autoLabel:true,labelFormat:'[local]',// if the jsxFactory is set, should we auto insert the import statementautoInject:true,// set for react@17 new jsx runtime// only effect if `autoInject` is true// set it in createEmotionPlugin options rather than in `tsconfig.json` will generate more optimized codes:// import { jsx } from 'react/jsx-runtime' for files not using emotion// import { jsx } from '@emotion/react/jsx-runtime' for files using emotionjsxImportSource:'@emotion/react',}),],}),compilerOptions:{// set jsx pragma to jsx or alias which is from the@emotion/react package to enable css property in jsx componentjsxFactory:'jsx',},},exclude:/node_modules/,},{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader?minimize'],},],},plugins:[newHtmlWebpackPlugin({template:join(process.cwd(),'tests','fixtures','index.html'),}),],}

interfaceCustomModule{// module name used in import statementmoduleName:string// `true` if you may import libs from 'my-emotion/subpath'includesSubPath?:boolean// all available names exported from custom moduleexportedNames:string[]// we may do some additional work on styled function, so if styled is reexport, you should specify it herestyledName?:string// has default exporthasDefaultExport?:boolean}createEmotionPlugin({  ...otherConfig,customModules:[{moduleName:'my-emotion',includesSubPath:true,exportedNames:['myStyled','myCss']styledName:'myStyled',}]})