Yarn dev continually refreshing

sage
1

Hi there,

Long time user of sage, i’ve finally run into an issue i’m not able to figure out trawling trough Discourse and Github – hoping to a get pointed in the right direction.

When I run yarn dev I can see bud is continually compiling a few times a second without me updating any files.

I’ve narrowed this down to a Tailwind plugin i’m using called ‘@_tw/themejson’, which i’ve seen a few others in the community using to create tailwind values based on values in theme.json.

Everything works as expected when I run yarn build, but something is causing yarn dev to loop and I can’t figure it out. Removing the plugin resolves the issue.

For reference, here’s how the plugin is imported in tailwind.config.cjs:
require( '@_tw/themejson' )( require( './theme.json' ) )

Here’s the code inside the plugin itself:

module.exports = plugin.withOptions(
	function() {
		// Use an empty plugin function to accept the options object.
		return function() {};
	}, function( themejson ) {
		// Create an empty object for the theme.json properties.
		const themejsonProps = {};

		// Load all of the colors from the theme.json file.
		if ( Array.isArray( themejson.settings.color.palette ) ) {
			themejsonProps.colors = {};
			themejson.settings.color.palette.forEach( function( color ) {
				themejsonProps.colors[ color.slug ] = color.color;
			} );
		}

		// Load all of the widths from the theme.json file.
		themejsonProps.widths = {};
		[ 'content', 'wide' ].forEach( function( width ) {
			if ( undefined !== themejson.settings.layout[ width + 'Size' ] ) {
				themejsonProps.widths[ width ] = themejson.settings.layout[ width + 'Size' ];
			}
		} );

		// Update the configuration.
		return {
			theme: {
				extend: {
					colors: {
						...themejsonProps.colors,
					},
					maxWidth: {
						...themejsonProps.widths,
					},
				},
			},
		};
	},
);

If anyone has run into a similar issue i’d really appreciate some pointers.

Thanks!

2

That plugin isn’t supported over here — Sage/Bud already comes with a first party solution for theme.json + Tailwind CSS

See Automatically Generating theme.json from a Tailwind Config | Roots and Managing theme.json | bud.js

1 Like
3

Hi Ben,

Thanks for your very quick response.

Understood – i’ll use that instead. I was aware the useTailwind… functions existed, but the set.option function was exactly what I needed.

Thanks!

1 Like