BlueBeka
BlueBeka
Explore posts from servers
TTCTheo's Typesafe Cult
Created by BlueBeka on 8/7/2024 in #questions
Tailwind alias/rename utility?
I've got a theme color config that looks a little like this:
theme: {
colors: {
text: {
vivid: "...",
muted: "...",
},
}
}
theme: {
colors: {
text: {
vivid: "...",
muted: "...",
},
}
}
Is it possible to make it so I can just use text-vivid instead of text-text-vivid? Non-text utilities should be unaffected, so bg-text-valid if for some reason I want to color the background with the text-vivid color. I assume this can probably been done with a plugin, but I'm not sure. Is it possible? Are there any existing solutions? Thanks 🙂
4 replies
TTCTheo's Typesafe Cult
Created by BlueBeka on 8/7/2024 in #questions
How to webpack? (in nextjs)
I can do what I want to do super easy in rollup but I can't for the life of me figure out how to do it in webpack. Essentially all I want to do is run my source code through a tool to transform it before it's compiled. My source code is in TypeScript but my tool only works with JavaScript, so I need to add the transformation after the the TypeScript transpilation. I created a webpack loader that seem to work fine for js file, but I don't know how to get it to work for ts files too. This is what I've got so far:
// next.config.js
export default {
// ...

webpack: (webpackConfig, { dev }) => {
if (!dev) {
webpackConfig.module.rules.push({
test: /\.js/,
exclude: /node_modules/,
loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
});
}
return webpackConfig;
},
};
// next.config.js
export default {
// ...

webpack: (webpackConfig, { dev }) => {
if (!dev) {
webpackConfig.module.rules.push({
test: /\.js/,
exclude: /node_modules/,
loader: fileURLToPath(import.meta.resolve("deassert/webpack-loader")),
});
}
return webpackConfig;
},
};
Is this something that can be done in webpack, hopefully somewhat easily?
4 replies