How can I bundle external css files with block?

[Ronen_Babayoff]

Hi there,

This question is for the Airtable team.

I see that you are using browserify to bundle the block code, would love to also be able to bundle external css files with the block, instead of loading them asynchronously using loadCSSFromURLAsync (which also makes development and deployment more complex).

There are quite a few browserify transformation packages that can make that happen, but I haven’t been able to make them work so far, when trying to control browserify transformations from the package.json file.

Here are the packages I tried / found so far:

brfs - doesn’t work with es6 modules
brfs-babel - doesn’t do the transform, for some reason, even when i add {"browserify": {"transform": ["brfs-babel"] } } to package.json
browserify-css - haven’t tried it yet

Using loadCSSFromString and providing the css itself isn’t the correct way since then I can’t easily edit it as css in a code editor or share it between blocks.

Would love to know how Airtable would recommend doing this.

Thanks,
Ronen

[wnm]

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: