Cron job that checks if a Webflow site has been published, then exports its CSS code into your app.

medium-article-selenium-cron.js

;(async () => {
	// Secrets
	require('dotenv').config()
	// Webflow
	const Webflow = require('webflow-api')
	// Chron job
	const cron = require('node-cron')
	// Selenium
	const webdriver = require('selenium-webdriver')
	const chrome = require('selenium-webdriver/chrome')
	const chromedriver = require('chromedriver')

	/**
	 * STEP 1. Check Webflow
	 */
	// Obtain your Webflow token on your site’s “Integrations” section:
	// https://webflow.com/dashboard/sites/__WEBFLOW_SITE__/integrations
	const webflow = new Webflow({ token: process.env.WEBFLOW_TOKEN })

	// Schedule cron job once every minute
	const task = cron.schedule('* * * * *', () => {
		const taskStarted = Date.now()
		console.log(`${taskStarted}: Checking for site publication...`)
		// Find your site’s ID: https://developers.webflow.com/?javascript#list-sites
		// Find your webhook ID: https://developers.webflow.com/?javascript#list-webhooks
		const webhook = webflow.webhook({
			siteId: '__YOUR_SITE_ID__',
			webhookId: '__YOUR_WEBHOOK_ID__'
		})
		webhook.then(hook => {
			const hookOccurred = Date.parse(hook.lastUsed)
			if (
				// Site got published...
				hook.triggerType === 'site_publish' &&
				// ...and hook got triggered after previous task completed, so 60 seconds ago...
				hookOccurred > taskStarted - 60000 &&
				// ...and before or when current task got started
				hookOccurred <= taskStarted
			) {
				console.log(`${hookOccurred}: Site was published!`)
				console.log(
					`${hook._meta.rateLimit.remaining} pings of ${hook._meta.rateLimit.limit} remaining.`
				)
				selenium()
			}
		})
	})

	task.start()

	/**
	 * STEP 2. Run Selenium
	 */
	const selenium = async () => {
		// Run Selenium with Chrome on Node
		chrome.setDefaultService(new chrome.ServiceBuilder(chromedriver.path).build())

		// Create driver
		let driver = new webdriver.Builder()
			.withCapabilities(webdriver.Capabilities.chrome())
			// but make it headless, meaning we won’t see a browser window open
			.setChromeOptions(new chrome.Options().headless())
			.build()

		// Add exit handlers
		const exitHandler = async () => {
			console.log('\nShutting down...')
			task.destroy()
			console.log('Shut down.')
			process.exit()
		}
		// Catches ctrl+c event
		process.on('SIGINT', exitHandler)
		// Catches "kill pid" (for example: nodemon restart)
		process.on('SIGUSR1', exitHandler)
		process.on('SIGUSR2', exitHandler)
		// Catches any uncaught exceptions
		process.on('uncaughtException', exitHandler)

		try {
			// Head on over to the Webflow site
			await driver.get('https://__WEBFLOW_SITE__.webflow.io')
			// Find and open the CSS file...
			const cssFile = await driver.findElement(webdriver.By.tagName('link')).getAttribute('href')
			await driver.get(cssFile)
			// ...get its contents...
			const allCss = await driver.findElement(webdriver.By.tagName('pre')).getAttribute('innerText')
			// and be sure to quit Selenium
			await driver.quit()
			// ...and, finally, just get the part that’s your own custom css.
			const customCss = allCss.split(
				'========================================================================== */'
			)[3]
			// Overwrite your custom css file on your hard drive with your new css
			const fs = require('fs')
			fs.writeFileSync(
				// Path to your CSS file on your hard drive; to get the path of your css file, drag it from Finder into Terminal (on Mac)
				'/Users/__PATH_TO_YOUR_CSS_FILE__/src/assets/css/index.css',
				customCss
			)
		} catch (err) {
			// Log any errors
			console.log('Error occurred:', err)
			// And exit
			task.destroy()
			process.exit()
		}
	}
})()