Introducing remote-styles: Conditional CSS loading made easy

remote-styles keeps out unneeded CSS and dynamically loads styles only when specific conditions are matched.

As web developers, we often want to provide customized experiences to different users. Doing that often involves bloating stylesheets with a bunch of CSS that went unused for the majority of your users

Let’s say your site displays a different layout for super users.

.super-user-banner {
  background: white;
  border: 2px solid blue;
  color: black;
  display: flex;
  justify-content: center;
  width: 420px;
}
/* and about 20kb of other super user layout CSS */

An animated GIF of a demo e-commerce site. It shows a banner for super users that fades in and states “Thanks for being a super user!”

These styles are only needed for a small percentage of users — but yet everyone will still download them. Also, frequent changing of these styles puts you on the hook for deploys and the StyleSheet’s CDN cache will get invalided.

Ideally, we’d like to only load this CSS for these exact conditions. That’s why we released a new library: remote-styles.

How it works

remote-styles is a library that allows you to store CSS in Firebase Remote Config and conditionally load it based on specific conditions. The library itself is only 500 bytes!

npm i remote-styles firebase

A basic example of using Remote Styles to load CSS.

In the code above, styles are retrieved from the super_user_banner parameter in Remote Config. Calling insert() either creates a new StyleSheet in the document or adds an entry to the adoptedStyleSheets array in Chrome 73 and above.

This technique allows you to provide a set of base styles for a faster load and have remote-styles lazily load the styles when needed. Since these styles are loaded after the initial page load, this gives you flexibility to change them on the fly with Remote Config.

Remote Config is a key value store with super powers. Its main super power is the ability to set conditional values for a parameter.

Define a condition

First, you define a condition. Conditions can be generic, such as “Applies if we’re at a certain date and time.”

Firebase Console condition editor. Shows a condition named is_on_new_years that matches between 12/31/2019 and 1/1/2020.

Or even based on the the location of the user.

Firebase Console condition editor. Shows a condition named user_in_span that matches users located in Spain.

Things get powerful when you combine Remote Config with Google Analytics. Google Analytics (as you probably know) helps you understand what kind of events are happening within your web app. But there is a lesser known power of the service: user properties.

User properties are a way to set preferences about a user. This is done with a simple line of code.

firebase.analytics().setUserProperties({ super_user: "true" });

firebase.analytics().setUserProperties({ super_user: "true" });

Then in Remote Config you can create a condition that matches this super_user property.

Firebase Console condition editor. Shows a condition named is_super_user that matches on a Google Analytics user property.

In Remote Config you attach conditions to parameters. In this case the super_user_banner parameter has the conditional value of the CSS for super users and a display: none for everyone else.

This makes sure that only a super_user receives the needed CSS.

While loading CSS based on conditions is very easy, what about managing the CSS itself? Remote Styles has that covered as well!

What’s next?

remote-styles is still in it’s alpha stages, but we are working on some features that will make easy to manage your CSS in Remote Config without leaving the terminal.

Upload / Download CSS from a CLI

Copying and pasting CSS into the Firebase Console can be a pain. That’s why we’re working on a CLI that allows you to upload and download CSS from Remote Config.

Upload CSS

To upload CSS you use the remote-styles CLI to issue a PUT via the Remote Config REST API. You’ll need to provide the parameter key in Remote Config, the CSS file, and a Service Account for secure access. This currently works with the default parameter value only. We’re working on setting conditional values in the next version.

Store your conditional styles in a single CSS file like banner.css.

.super-user-banner {
  background: white;
  border: 2px solid blue;
  color: black;
  display: flex;
  justify-content: center;
  width: 420px;
}

Then with the remote-styles CLI you can upload it as a Remote Config parameter with a single command.

An image of the remote styles command to upload CSS to the Firebase console. The code is provided below.

remote-styles put \ 
  --key="super_user_banner" \ 
  --sa="./sa.json" \
  banner.css

This command will minify and upload your CSS to the Firebase Console. You can also download CSS via the CLI.

Download CSS

The download command is similar to the upload command. You supply the Remote Config key, your Service Account, and the output file on your local machine. Again this only works for the default parameter value. We will have conditional values in the next version.

An image of the remote styles command to download CSS to the Firebase console. The code is provided below.

remote-styles get \
  --key="super_user_banner" \
  --sa="./sa.json" \
  --out="banner.css"

After the command runs you’ll have the styles in a local CSS file on your machine.

CSS in JS support is up next

Remote Styles currently works only with stylesheets. But a lot of developers love using CSS in JS libraries like emotion and styled-components. In the next version we’ll work on providing support for these libraries. So stay tuned!

Give it a try

Remote Styles is great for conditional loading of CSS. It keeps unneeded styles out of your main stylesheet and allows you to update these values on the fly.

Download it via npm.

npm i remote-styles firebase

Or use it via unpkg

<script src="https://unpkg.com/remote-styles/dist/remote-styles.min.js"></script>

We can’t wait to see how you’ll use it in your apps.