Looker Inline SASS Babel Plugin

This plugin is used by the Relens project to inline SASS styling referenced by ES2015 import statements.

The plugin works by replacing a SASS import with the following code, in this order:

1. Generating an import insertCss from 'insert-css' declaration.
2. Compiling the SASS to CSS.
3. "Modularizing" the CSS classes so they do not have namespace collisions with other CSS classes.
4. Generating a modularized CSS classname map.

Example

Assuming there is a SASS file called buttons.scss that looks like:

.button {
  color: pink;
}

and an import reference to it in an component:

import * as styles from './buttons.scss'

it is transformed into:

import insertCss from 'insert-css'
var styles = {
  "button": "buttons_button__12saH"
  ...
}
insertCss(".button{color: pink;}")

Usage

The only code exposed to the end developer is the style map. It is named according to what the developer named the stylesheet in the import statement.

Installing

yarn add babel-plugin-looker-inline-sass

Development

1. Check out the repository
2. yarn
3. yarn test

Commands

• yarn build - builds the library
• yarn test - runs the tests