Replies: 6 comments 1 reply
-
In this case what file would be changing that would trigger a re-run? We'd have to somehow know about that file so we could register it as a dependency with PostCSS otherwise it won't trigger a rebuild of your CSS. |
Beta Was this translation helpful? Give feedback.
-
In my case i'm handling the dependency registration, it's a Gatsbyjs theme tho, so this is more of "easier to build tooling" request than a normal app dev case. That said, postcss-loader for webpack exposes the ability to add one's own dependencies, by passing through the loader. So the situation now, is that I can fairly easily register my own bespoke dependencies, or trigger rebuilds, but the rebuilds don't do anything b/c the config reference is now stale inside the plugin |
Beta Was this translation helpful? Give feedback.
-
This would be super for configurability too. We're using Tailwind as a dependency of our internal CSS lib/distributable. It's basically a node package, which is exposing a single function for using Tailwind (and other PostCSS plugins) in a PostCSS build chain. We've got some (again, internal) Tailwind plugins we'd like to configure from the outside too. What we've got is this (see inline comments): Consumer PostCSS configpostcss.config.js module.exports = (ctx) => {
return {
plugins: [
...require('our-package').defaultPostCssPlugins(), // 👈👈Point of configuration
],
};
}; Our packageindex.js const { defaultPlugins } = require('./lib/postcss-plugins');
exports.defaultPostCssPlugins = defaultPlugins; // 👈👈Point of configuration postcss-plugins.js exports.defaultPlugins = () => [
require('postcss-import')(),
require('tailwindcss')(), // 👈👈Point of configuration
require('postcss-nested')(),
require('postcss-color-function')(),
require('postcss-hexrgba')(),
require('autoprefixer')(),
]; tailwind.config.js module.exports = {
// ...
plugins: [
// Use all colors as CSS variables on the :root element
require('./src/plugins/tailwind-variables')({
useP3: true, // 👈👈Configure this variable if module.exports was a function
}),
require('./src/plugins/tailwind-dark-mode')(),
],
} So if I realise this is a breaking change, since the function exported by |
Beta Was this translation helpful? Give feedback.
-
I can make it work with a function sure but I still don't think I totally understand the benefit here. To be clear you want to be able to do this? // tailwind.config.js
module.exports = function () {
return {
// ...
plugins: [
// Use all colors as CSS variables on the :root element
require('./src/plugins/tailwind-variables')({
useP3: true, // 👈👈Configure this variable if module.exports was a function
}),
require('./src/plugins/tailwind-dark-mode')(),
],
}
} What arguments do you want this function to receive and what would you do with them? If you can show me a complete example of how you want it to work that might be helpful. To @jquense, can you show me an example of what you mean by doing theme composition above Tailwind? By the way in case it's helpful for you guys, Tailwind supports many different configuration "formats" already: // Pass your config object directly
require('tailwindcss')({ theme: ..., variants: ... })
// Pass an object with a `config` key pointing to a file path
require('tailwindcss')({ config: 'custom-config.js' })
// Pass an object with a `config` key pointing to a config object
require('tailwindcss')({ config: { theme: ..., variants: ... } })
// Pass a file path directly
require('tailwindcss')('custom-config.js') So you're already not forced to put your configuration in a file if you don't want to. |
Beta Was this translation helpful? Give feedback.
-
@adamwathan Thanks for quick reply. I'd like to be able to do this: // tailwind.config.js
/** `opts` here comes from the external 'postcss.config.js' */
module.exports = function (opts = {}) {
return {
// ...
plugins: [
// Use all colors as CSS variables on the :root element
require('./src/plugins/tailwind-variables')({
useP3: opts.useP3,
}),
require('./src/plugins/tailwind-dark-mode')(),
],
}
} postcss.config.js // ...
// The value passed to the default function exposed on `tailwindcss` should be
// passed to the function exported in `tailwind.config.js`.
require('tailwindcss')({
useP3: true,
}) |
Beta Was this translation helpful? Give feedback.
-
Originally i was just hoping that the postcss plugin itself would take a function that returned a config, not have configs export a function. That said, the thing we settled on here is actually a function config, so maybe that is what i really want :P theme The over all idea is that a user can opt into "full" "minimal" or "none" with the gatsby theme, the first being all of tailwind and default config, second just enough tailwind to render the template ui, and finally, no tailwind. |
Beta Was this translation helpful? Give feedback.
-
the tailwind plugin helpfully allows reloading config's if a file path is passed by declaring dependencies and re reading the the config on each pass. However, if you want to do additional theme composition above tailwind, or it's not feasible to pass a file path you end up opting out of this really nice DX effect of not having to restart bundlers when adjusting the theme file. For these cases it'd be helpful if a function could be provided for the config so that the theme is reread on every run, which would give an API for implementing less straightforward reloading situations
Beta Was this translation helpful? Give feedback.
All reactions