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
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:
Then I also tried an alternative approach: transpiling the
tsxandtsfiles with the typescript compiler. There you need to usettypescriptto apply custom transformers, which I did using this configuration in thetsconfigfile:{ "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-pluginand labels are still kept as the basic hash.Here are all the versions I'm using: