# cf-style-container

> Cloudflare Style Container

Latest version **9.0.0** (published 2018-05-08) · BSD-3-Clause license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install cf-style-container
pnpm add cf-style-container
yarn add cf-style-container
bun add cf-style-container
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 9.0.0 |
| Published | 2018-05-08 |
| First published | 2017-02-27 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 64.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vojtech Miksu |
| Maintainers | adamschwartz, cf-ci, cf-ci-write, ereeves, hamidagh, handrews, hturan, inikulin, jculvey, johndotawesome, jparyani-cloudflare, manatarms, marksteyn, miksu, mpint, nkcmr, rreverser, ryan0x44, sejoker, teffenellis, terinjokes, toekneestuck, vasturiano |

## Links

- npm: https://www.npmjs.com/package/cf-style-container
- npm.io page: https://npm.io/package/cf-style-container

## Dependencies (7)

- [fela](https://npm.io/package/fela.md) ^6.0.5
- [fela-utils](https://npm.io/package/fela-utils.md) ^7.0.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [react-fela](https://npm.io/package/react-fela.md) ^6.1.0
- [cf-style-const](https://npm.io/package/cf-style-const.md) ^3.3.0
- [underscore.string](https://npm.io/package/underscore.string.md) ^3.3.4
- [react-display-name](https://npm.io/package/react-display-name.md) ^0.2.3

## Recent versions

- 9.0.0 (latest) — 2018-05-08
- 8.1.4 — 2018-05-04
- 8.1.3 — 2018-05-02
- 8.1.2 — 2018-05-01
- 8.1.1 — 2018-04-24
- 8.1.0 — 2018-04-24
- 8.0.6 — 2018-04-11
- 8.0.5 — 2018-03-28
- 8.0.4 — 2018-03-28
- 8.0.3 — 2018-03-27
- 8.0.2 — 2018-03-23
- 8.0.1 — 2018-03-16
- 8.0.0 — 2018-03-13
- 7.0.0 — 2018-03-12
- 6.0.2 — 2018-01-18
- … 31 more at https://npm.io/package/cf-style-container/versions

## README

# cf-style-container

> Cloudflare Style Container

Set of high order components and other helpers for fela based applications.

## Installation

```sh
$ npm install cf-style-container
```

### Aliased functions from fela and react-fela

We proxy/alias some useful functions from fela without changing their behaviour. See the original documentation for more details. We wrap all Fela APIs so we can eventually switch Fela to a different CSS in JS lib if ever needed.

- [combineRules](https://github.com/rofrischmann/fela/blob/master/docs/api/fela/combineRules.md)
- [connect](https://github.com/rofrischmann/fela/blob/master/packages/react-fela/docs/connect.md)
- [ThemeProvider](https://github.com/rofrischmann/fela/blob/master/packages/react-fela/docs/ThemeProvider.md)

### createComponent(rule, [type])

Very similar to [createComponent](https://github.com/rofrischmann/fela/blob/master/packages/react-fela/docs/createComponent.md) from react-fela. However, it automatically adds PropTypes from `[type]` in case that it is a React Component.

Adds a displayName to the created component, which is `FelaComponent(${getReactDisplayName(type)})`. If `type` is a primitive such as 'div', then this string is used, otherwise the displayName of the wrapped React Component is used.

The returned Component also has the function `setDisplayName` which can be called to set the display name of the HOC again outside of the call to `createComponent`. If the type being passed into createComponent is a string, such as 'div', and you wish to set the displayName of the HOC, then you should call `setDisplayName` after the call to `createComponent`. this will ensure that the name of the HOC will have 'FelaComponent' wrapped around the name of the inner component for consistency.

You should use this HOC every time when you want to use Fela in your component. **This is a primary way how to style React components**.

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { createComponent } from 'cf-style-container';

const styles = ({ theme, size }) => ({
  fontWeight: theme[`fontWeight${size}`],
  fontSize: theme[`fontSize${size}`],
  lineHeight: theme[`lineHeight${size}`],
  marginTop: theme[`marginTop${size}`]
});

const Heading = ({ size, className, children }) => {
  const tagName = 'h' + size;
  return React.createElement(tagName, { className }, children);
};

Heading.propTypes = {
  size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
  className: PropTypes.string.isRequired,
  children: PropTypes.node
};

export default createComponent(styles, Heading);
```

### createStyledComponent(rules, [type])

Creates a new component that implements the [component styling API](https://wiki.cfops.it/pages/viewpage.action?pageId=126075383) and maps style rules to design system primitives.

Has the same API around `displayName` as `createComponent`.

Style rules can be defined in a similar fashion to `createComponent` during initialisation, but can also be overridden on an instance-by-instance basis using props on the component itself.

```jsx
const Box = createStyledComponent(() => {});
Box.setDisplayName('Box');
<Box backgroundColor="marine" px={3} py={2}>
  What a lovely blue box!
</Box>
```

### createComponentStyles(rules, Component)

Useful when you need multiple classNames (and rules) in one component.

Adds a displayName to the created component, which is `ConnectedFelaComponent(${WrappedComponent.displayName || WrappedComponent.Name})`.

The returned Component also has the function `setDisplayName` which can be called to set the display name of the HOC again outside of the call to `createStyledComponent`. If you wish to set the displayName of the HOC, then you should call `setDisplayName` after the call to `createStyledComponent`. this will ensure that the name of the HOC will have 'ConnectedFelaComponent' wrapped around the name of the inner component for consistency.

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { createComponentStyles } from 'cf-style-container';

const mainStyles = ({ theme }) => ({
  margin: theme.main.margin,
  padding: theme.main.padding,
});

const legendStyles = ({ theme }) => ({
  padding: theme.legend.padding,
  marginBottom: theme.legend.marginBottom,
  borderBottom: theme.legend.borderBottom,
});

const FormFieldset = ({ legend, styles }) => (
  <fieldset className={styles.mainStyles}>
    <legend className={styles.legendStyles}>
      {legend}
    </legend>
  </fieldset>
);

FormFieldset.propTypes = {
  styles: PropTypes.object.isRequired,
  legend: PropTypes.string.isRequired
};

export default createComponentStyles({ mainStyles, legendStyles }, FormFieldset);
```

Notice that rules are now an object. The names you chose will be used for classNames
accessible as `styles.mainStyles` and `styles.legendStyles` in this case.

### applyTheme(Component, ...themes)

A HOC that ties a Fela component with the theme (adds the theme to its
context). The themes can be functions that takes a baseTheme and returns a new
theme, or just an object.

Adds a displayName to the created component, which is `Themed(${WrappedComponent.displayName || WrappedComponent.Name})`.

The returned Component also has the function `setDisplayName` which can be called to set the display name of the HOC again outside of the call to `applyTheme`. If you wish to set the displayName of the HOC, then you should call `setDisplayName` after the call to `applyTheme`. this will ensure that the name of the HOC will have 'Themed' wrapped around the name of the inner component for consistency.

```jsx
import HeadingUnstyled from './Heading';
import HeadingTheme from './HeadingTheme';

import { applyTheme } from 'cf-style-container';

// overrides HeadingTheme fontWeight1
const CustomTheme = () => { fontWeight1: 600 };

const Heading = applyTheme(HeadingUnstyled, HeadingTheme, CustomTheme);

// themed component
<Heading />
```

### withTheme(Component)

A HOC that passes the current theme from context into the prop `theme`. This is useful
when you need to access the theme without using `createComponent`. In other words,
you can't create a new styled component with it.

```jsx
import { withTheme } from 'cf-style-container';

const MyComponent = ({ theme }) => <div>Color: {theme.colors.hail}</div>

export default withTheme(MyComponent);
```

### withRenderer(Component)

A HOC that passes the renderer from context into the prop `renderer`. This is useful
for third party integration when you need to generate a class name and you can't create
a new styled component with it.

Adds a displayName to the created component, which is `withRenderer(${WrappedComponent.displayName || WrappedComponent.Name})`.

The returned Component also has the function `setDisplayName` which can be called to set the display name of the HOC again outside of the call to `withRenderer`. If you wish to set the displayName of the HOC, then you should call `setDisplayName` after the call to `withRenderer`. this will ensure that the name of the HOC will have 'withRenderer' wrapped around the name of the inner component for consistency.

```jsx
import { withRenderer } from 'cf-style-container';

const MyComponent = ({ theme }) => {
  const styles = props => ({
    fontSize: props.fontSize,
    color: 'red'
  });
  const className = renderer.renderRule(styles, { fontSize: 12 });
  return (<div>Class name: {className}</div>);
}

export default withRenderer(MyComponent);
```

### applyStaticStyles(staticStyles, Component)

A HOC that applies a string of static styles to a component using fela's [renderStatic](https://github.com/rofrischmann/fela/blob/master/docs/api/fela/Renderer.md#renderstaticstyle-selector).
Useful for integration with older libraries that require side loading of a static CSS block.

Accepts a function or a string. If a function is provided, the baseTheme will be provided to the function.

Adds a displayName to the created component, which is `WithStaticStyles(${WrappedComponent.displayName || WrappedComponent.Name})`.

The returned Component also has the function `setDisplayName` which can be called to set the display name of the HOC again outside of the call to `applyStaticStyles`. If you wish to set the displayName of the HOC, then you should call `setDisplayName` after the call to `applyStaticStyles`. this will ensure that the name of the HOC will have 'WithStaticStyles' wrapped around the name of the inner component for consistency.

```jsx
import { applyStaticStyles } from 'cf-style-container';

const staticStyles = '.purple-component { background-color: purple }';
// OR
// const staticStyles = baseTheme => `.purple-component{background-color: ${baseTheme.purple} }`

const MyComponent = () => <div className='purple-component' />;

export default applyStaticStyles(staticStyles, MyComponent);
```

---
_Source: https://npm.io/package/cf-style-container · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._