https://github.com/firebaseextended/remote-styles

Conditionally load CSS from Firebase Remote Config
https://github.com/firebaseextended/remote-styles

css firebase firebase-remote-config

Last synced: about 2 months ago
JSON representation

Conditionally load CSS from Firebase Remote Config

• Host: GitHub
• URL: https://github.com/firebaseextended/remote-styles
• Owner: FirebaseExtended
• License: apache-2.0
• Archived: true
• Created: 2019-10-22T17:47:11.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T23:35:30.000Z (about 2 years ago)
• Last Synced: 2024-05-19T04:49:27.847Z (8 months ago)
• Topics: css, firebase, firebase-remote-config
• Language: TypeScript
• Homepage:
• Size: 1.4 MB
• Stars: 64
• Watchers: 4
• Forks: 3
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-firebase - Remote Styles with Remote Config - Firebase Remote Config에 저장된 CSS를 동적/조건부로 불러올 수 있는 라이브러리입니다. ([포스트 이동](https://medium.com/firebase-developers/introducing-remote-styles-conditional-css-loading-made-easy-daddbbcce050)). (웹)

README

        
# remote-styles

> Conditionally load CSS from Firebase Remote Config

### Status: Alpha

## Install

```bash

npm i remote-styles firebase

# OR

yarn add remote-styles firebase

```

## Basic Example

Webpack/Module Bundler usage

```ts

import { initialize } from 'remote-styles';

async function importStyles() {

  // Be smart and lazy load. Dynamic styles

  // are not likely needed for page load.

  const firebase = await import('firebase/app');

  await import('firebase/analytics');

  await import('firebase/remote-config');

  const firebaseApp = firebase.initializeApp({ 

    /* config */ 

  });

  const getStyles = await initialize(firebaseApp);

  const styles = getStyles('dark_mode');

  styles.insert();

}

importStyles();

```

## Script Tags / Loader Version

`remote-styles` has a sub-package that lazy loads Firebase. This is useful for sites that use script tags instad of module bundling.

```html

  
This can be configured remotely!

  

  

      (async function(window, remoteStyles) {

        const getStyles = await remoteStyles.initialize({

          /* config */

        });

        const styles = getStyles('dark_mode');

        styles.insert();

      }(window, window.remoteStyles));

  


```

## Upload/Download CSS from Remote Config via the CLI

To use the CLI you'll need to download a Service Account from the Firebase Console.

### Downloading CSS

Downloading CSS currently works only with default parameters.

```bash

node_modules/.bin/remote-styles get --key="CSS" --sa="./sa.json" --out="styles.css"

```

### Uploading CSS

Uploading CSS currently works only with default parameters.

```bash

node_modules/.bin/remote-styles put --key="CSS" --sa="./sa.json" styles.css

```