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