Skip to content

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

Open
@nicmosc

Description

@nicmosc

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions