LeetCode-OpenSource/emotion-ts-plugin

Transformation does nothing (both with webpack and tsc as a transformer)

nicmosc opened this issue · 1 comments

Been trying to use this plugin to apply custom labels to the generated emotion css output, but to no avail.
First following the proposed configuration with webpack and ts-loader, but the generated code does not take any of the options in the plugin into account. Here is the minimal config:

module.exports = {
  watch: ! isProduction,
  mode: process.env.NODE_ENV,
  devtool: isProduction === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
  entry: './src/index.ts',
  resolve: {
    modules: [
      path.resolve(__dirname, './src'),
      'node_modules',
    ],
    extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
  },
  output: {
    path: path.resolve(__dirname, './lib'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [{
          loader: 'ts-loader',
          options: {
            getCustomTransformers: () => ({
              before: [createEmotionPlugin({
                sourcemap: true,
                autoLabel: true,
                labelFormat: '[filename]__[local]',
              })],   
            }),
          },
        }],
        exclude: /node_modules/,
      },
    ],
  },
};

Then I also tried an alternative approach: transpiling the tsx and ts files with the typescript compiler. There you need to use ttypescript to apply custom transformers, which I did using this configuration in the tsconfig file:

{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node",
    "module": "commonjs",
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./lib/",
    "declarationDir": "./lib/types/",
    "incremental": true,
    "noUnusedLocals": false,
    "noUnusedParameters": true,
    "strict": true,
    "baseUrl": "./",
    "declaration": true,
    "declarationMap": true,
    "plugins": [
      {
        "transform": "emotion-ts-plugin",
        "import": "createEmotionPlugin",
        "type": "program",
        "after": false,
        "sourceMap": true,
        "autoLabel": true,
        "labelFormat": "[filename]__[local]"
      }
    ]
  }
}

Again, this does not consider any of the options for the emotion-ts-plugin and labels are still kept as the basic hash.

Here are all the versions I'm using:

  • webpack: 4.29.6
  • ts-loader: 6.2.1
  • typescript: 3.8.3
  • ttypescript: 1.5.10
  • emotion-ts-plugin: 0.5.3
  • emotion: 10.0.23

Could you please provide a repo to reproduce your issue?
Checked the demo and everything works fine