Skip to content

Latest commit

 

History

History
184 lines (135 loc) · 4.5 KB

Adding-Styles.md

File metadata and controls

184 lines (135 loc) · 4.5 KB

👈 Return to Overview

Adding Styles

📖 Table of Contents

CSS Modules

Since CSS is global, One App uses the CSS Modules pattern to avoid class name collisions. The main differences will be the strict use of camelCased class names and the way you import the class names.

Example Class Names

/* good */
.myClass {
  color: red;
}

/* not currently supported due to purge-css */
.my-class {
  color: red;
}

Importing and Using Classes

import styles from './MyModule.scss';

const MyModule = () => (
  <div className={styles.myClass}>
    My Module
  </div>
);

Adding a CSS File to Root Module

In order to provide global styles within your application, you can add a stylesheet to the <head> within your root module. You can achieve this by using react-helmet.

import React, { Fragment } from 'react';
import { Helmet } from 'react-helmet';

const MyRoot = ({ children }) => (
  <Fragment>
    <Helmet>
      <link rel="stylesheet" href="https://www.example.com/styles.min.css" />
    </Helmet>
    {children}
  </Fragment>
);

Note: Keep in mind that the domain in the stylesheet needs to be added to the csp.

Adding a CSS File to Child Module

This is done the same way as with the Root Module. However, keep in mind that if you add a stylesheet in the Root Module as well as a Child Module, this can cause collisions as well as multiple loads of the same styles.

Using Reakit with One App

If you are wanting to use Reakit, here is how to do so within One App.

Add Reakit to Root Module

npm install --save reakit

Add default their styling by installing reakit-system-bootstrap. This is optional.

npm install --save reakit-system-bootstrap
import React, { Fragment } from 'react';
import { Provider } from 'reakit';
import * as system from 'reakit-system-bootstrap';


const MyRootModule = ({ children }) => (
  <Fragment>
    <Provider unstable_system={system}>
      { children }
    </Provider>
  </Fragment>
);

export default MyRootModule;

Wrapping your children with Reakit's Provider will make the styles accessible by the children.

Using Reakit in a Child Module

npm install --save reakit

Since reakit-system-bootstrap was added in the root module, you do not need to npm install it in your child modules.

import React, { Fragment } from 'react';
import { Button } from 'reakit';


const MyModule = ({ children }) => (
  <Button>Button</Button>
);

export default MyModule;

Share Reakit Across Your Modules

You can use one-app-bundler's providedExternals and requiredExternals to avoid duplicating Reakit across all your modules. Furthermore, due to Reakit using React's context API, in order for your child modules to leverage this, you MUST add it to providedExternals as well as requiredExternals.

Add Reakit as a providedExternals in your Root Module

Add the following in your root module's package.json.

"one-amex": {
  "bundler": {
    "providedExternals": [
      "reakit"
    ]
  }
},

Add Reakit as a requiredExternals in your Child Module

"one-amex": {
  "bundler": {
    "requiredExternals": [
      "reakit"
    ]
  }
},

⚠️ Caveat

When using externals and how Webpack handles them, you will need to change your import from

import { Button } from 'Reakit/Button';

to

import { Button } from 'Reakit';

☝️ Return To Top