
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jan 16, 2020 04:12 PM
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

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jan 16, 2020 06:02 PM
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

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Apr 19, 2020 02:30 PM
Here’s how I write CSS locally during development.
First of all, I write SCSS and not CSS directly.
- 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
.
- Then I convert
styles.css
to astyles.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
`;
- This
styles.js
can be imported in your Custom block and passed toloadCSSFromString
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.

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Apr 22, 2020 06:51 AM
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

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sep 10, 2020 06:51 PM
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…
-
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 theindex.js
, such that you could justloadCSSFromString(mySerializedCSSFile)
? -
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
intoindex.js
so that it is running when$ block run
is invoked?
Thank you
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sep 11, 2020 10:20 AM
@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%;
}
`;

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sep 11, 2020 10:33 AM
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sep 11, 2020 10:40 AM
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:

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sep 11, 2020 10:42 AM
Awesome - I use VS Code as well, so this will work just fine for me.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sep 11, 2020 10:44 AM
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”
