Open
Description
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
Labels
No labels