How can I bundle external css files with block?

Hi Ronen,

Thank you for the feedback, especially around your experiences with the browserify plugins/packages. More robust CSS support for Blocks is something we are definitely considering and hoping to improve in the future.

Thanks,
Richard

Here’s how I write CSS locally during development.

First of all, I write SCSS and not CSS directly.

1. I write styles.scss. I compile it to “css” using SCSS compiler in watch mode
   sass --watch frontend/styles/main.scss frontend/styles/styles.css

Now main.scss gets converted to styles.css.

2. Then I convert styles.css to a styles.js which is the whole css file converted to a string by surrounding with template literals.

So the styles.js looks like:

export default `
    .classname: {
        border: 1px solid red;
    }
    ... rest of your styles css here
`;

3. This styles.js can be imported in your Custom block and passed to loadCSSFromString

import stylesString from './styles/styles.js';;
import { loadCSSFromString } from '@airtable/blocks/ui';
loadCSSFromString(stylesString);

And this allows me to update my stylesheets with hot reloading.

I wrote about this here - How to import CSS or SCSS in Airtable Custom blocks.

Working of making this a github gist.

Hey @Richard_Sinn, did you consider using webpack instead of browserify? It has builtin support for importing css files from js files, as follows:

import css from 'file.css';

Cheers,
Ronen Babayoff
Superblocks.at

export default `
    .classname: {
        border: 1px solid red;
    }
    ... rest of your styles css here
`;

import stylesString from './styles/styles.js';;
import { loadCSSFromString } from '@airtable/blocks/ui';
loadCSSFromString(stylesString);

@Ashwin_P,

Thanks for the blog write-up on this - it was helpful. I have a couple questions (for you or anyone else willing to answer), if you don’t mind helping a JavaScript novice…

1. Is there no way just write CSS in its own file in frontend/styles/styles.css and then stringify/serialize the contents of that file in the index.js, such that you could just loadCSSFromString(mySerializedCSSFile)?

2. In lieu of the option above, this file-watcher code that you wrote – I’m not sure I understand where that goes in order for it to be watching the CSS file and hot-reloading. Does it need to be required into index.js so that it is running when $ block run is invoked?

Thank you

@Jeremy_Oglesby, I save my styles as styles.js and use VS-Code to color/lint the file as CSS. This has been the easiest way for me to keep styles separate without extra environmental overhead.

index.js

import stylesString from './styles.js';
loadCSSFromString(stylesString);

styles.js

export default `

.className {
    color: blue;
    width: 100%;
}

`;

import stylesString from './styles.js';
loadCSSFromString(stylesString);

export default `

.className {
    color: blue;
    width: 100%;
}

`;

Thanks for the response, @Brady_Menegay. This definitely looks like a simpler route to take.

Do you still get CSS syntax perks while writing inside the string template like this? (such as auto-indent, intellisense suggestions, etc)

In your index.js, you are importing something called styleString, but in your styles.js you aren’t exporting something called styleString - you are just exporting the string template itself… is styleString just an arbitrary variable name into which that string template is being saved by default as the only thing exported by styles.js? Am I understanding that correctly?

Thank you, @Brady_Menegay

@Jeremy_Oglesby

You are exactly right. Since styles.js is exporting a single string, styleString that is the variable name I chose. I think of it like assigning any other variable. let styleString = import './style.js';

I can only speak to VS-Code, but yes. After setting the language for this specific file I get the below:

Awesome - I use VS Code as well, so this will work just fine for me.

A word of warning, I did notice the first style can be seen as an error, depending on the plugins I have active. Then I have problems I add a placeholder class to the top of my CSS file. I think the brackets fool VS-Code into ignoring the other syntactical “errors”

If anyone is stumbling upon this in 2022, I think this has gotten way easier now.

From the blocks-cli Readme:

---

The new CLI supports css files within your extension by default. The default webpack bundler is configured with css-loader and style-loader. This means you can import a css file into your extension. Example:

// styles.css
.red {
  color: red;
}

import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';
import './styles.css'

function MyExtension() {
    return <div className="red">Hello world</div>;
}

initializeBlock(() => <MyExtension />);

You can even change the webpack config to support sass files:

// styles.css
.red {
  color: red;
}

import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';
import './styles.css'

function MyExtension() {
    return <div className="red">Hello world</div>;
}

initializeBlock(() => <MyExtension />);

This no longer works. I get Bundle Error: Unexpected token