Introducing remote-styles: Conditional CSS loading made easy

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

.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!”

How it works

npm i remote-styles firebase
A basic example of using Remote Styles to load CSS.

Define a condition

Firebase Console condition editor. Shows a condition named is_on_new_years that matches between 12/31/2019 and 1/1/2020.
Firebase Console condition editor. Shows a condition named user_in_span that matches users located in Spain.
firebase.analytics().setUserProperties({ super_user: "true" });
firebase.analytics().setUserProperties({ super_user: "true" });
Firebase Console condition editor. Shows a condition named is_super_user that matches on a Google Analytics user property.

What’s next?

Upload / Download CSS from a CLI

Upload CSS

.super-user-banner {
background: white;
border: 2px solid blue;
color: black;
display: flex;
justify-content: center;
width: 420px;
}
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

Download CSS

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"

CSS in JS support is up next

Give it a try

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

--

--

Tutorials, deep-dives, and random musings from Firebase developers all around the world. Views expressed are those of the authors and don’t necessarily reflect those of Firebase or its parent companies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store