How to import CSS or SCSS in Airtable Custom Blocks

Importing style sheets in Airtable is not easy. If you are used to create-react-app, then you would expect to just import a .css or a .scss in your javascript file. But that's not possible in Airtable Custom Blocks. Read on to see my workflow for solving this problem.

Github link

Don't forget to checkout my Udemy

https://www.udemy.com/course/the-complete-airtable-custom-blocks-development-course

Problem:

Airtable has these 2 APIs for loading styles.

loadCSSFromString
loadCSSFromURLAsync

During development, the CSS is not hosted anywhere and we write CSS in their own files and not as a string.

Solution:

Write CSS normally - in their files.
Convert the CSS into a string
Use loadCSSFromString to load this string.

How?

Step 1: Write CSS normally in styles.css

Example styles.css

.main-container {
    max-width: 1000px
}
* {
    border: 1px solid red;
}

2. Step 2: Convert this CSS to a string and write a new file styles.js with the content. We wrap the whole CSS file in template literals to convert into a string.

export default `
	.main-container {
		max-width: 1000px
	}

	* {
		border: 1px solid red;
	}
`;

3. Step 3: Import the new JS file and pass this to loadCSSFromString

import styles from '../styles-directory/styles';
loadCSSFromString(styles);

How do I automate this?

Lets write a file watcher which will watch for changes to styles.css and automatically create styles.js for us.

const fs = require('fs');
// The path to your styles css
const styleFile = '../frontend/styles/styles.css';
// Style String start
let start = 'export default `';
// Style String end
let end = '`';

// Watch your style file for changes
fs.watchFile(styleFile, (curr, prev) => {
  console.log(`${styleFile} file Changed`);

  // Get the file contents
  fs.readFile('../frontend/styles/styles.css', function(err, buf) {
    const contents = buf.toString();
    // Convert the file contents into a string
    let data = start +  contents  + end;

    // Write the file back as `styles.js`
    fs.writeFile("../frontend/styles/styles.js", data, (err) => {
      if (err) console.log(err);
      console.log("Successfully Written to File.");
    });
  })

  
});

Thats it. Everytime your styles.css changes, it will automatically generate styles.js and if these file changes will cause your Airtable Custom Block to automatically reload and load the new styles.

How do I use SCSS ?

I use SCSS for all my styles and don't write CSS directly.

Step 1: Install the scss compiler from https://www.npmjs.com/package/sass globally by running npm install -g sass
Compile your SCSS stylesheets to CSS stylesheets. Also, run this in watch mode so that everytime your SCSS changes, the CSS is automatically generated. The command is sass --watch frontend/styles/main.scss frontend/styles/styles.css
And thats how you go from SCSS to CSS to JS String to loadCSSFromString to your Airtable Custom block.

Improvements

Update: Check this github link - https://github.com/saas-developer/airtable-build-styles . It contains the improvements mentioned below.

node-sass is a package available that can be integrated directly into your javascript code. So that means, you don't need the separate scss compiler step. You can write that code directly in your javascript file.