@decisiv/styled-components-static-styles

styled-components-static-styles

Contents

• Overview
• Installation
• Usage
• Configuration
  • config
  • formatMainClassName
  • formatStateClassName
  • exportName/exportPath

Overview

Extracts styles of styled-components and returns them as a string.

Installation

$ yarn add @decisiv/styled-components-static-styles

Usage

Example using a simple configuration, and writing the resulting styles to disk.

import fs from 'fs';
import collectStyles from '@decisiv/styled-components-static-styles';
import { Text, Icon } from '@decisiv/ui-components';

const config = [
  { name: 'my-text', component: Text },
  { name: 'my-icon', component: Icon },
];

const styles = collectStyles(config);

fs.writeFileSync('path/to/a/file.css', styles, { encoding: 'utf8' });

// the file will contain something like:
//
// .my-text {...}
// .my-icon {...}
// .my-icon::before {...}

Configuration

The default export is a function with the following signature:

export default (
  config: ComponentConfig[],
  formatMainClassName: (componentName: string) => string,
  formatStateClassName: (mainClassName: string, stateName: string) => string,
) => string;

config

An array of objects, each with the following properties:

• name: Required - A name that represents this component. It is used as the class name for the component, unless overridden.

• component: Required - The styled-component for which to extract the styles.

• requiredProps: Optional - An object with the props the component requires to be rendered.

• states: Optional - An array of objects representing the states in which the component should be rendered its styles extracted. Each object requires the following properties:

  • name: Required - The name that represents this state. It is used in the class name generated for this state.
  • props: Required - The props to render the component with. These will be merged with requiredProps, if provided.

• exportName: Optional - The name the component was exported as, in the file it was defined in. Please set to __default__ if it is the default unnamed export (export default styled.div``).

• exportPath: Optional - The relative path where the component was defined in. Must be relative to the root of the repository (the result of find-yarn-workspace-root).

formatMainClassName

A callback that is used to specify the main class name for a component. It's called with the name provided in each config object.

Example use:

const config = [{ name: 'my-text', component: Text }];

// Default formatters
collectStyles(config); // => .my-text {...}

// Custom main class name formatter
collectStyles(config, (name) => `.some-prefix_${name}`); // => .some-prefix_my-text {...}

formatStateClassName

A callback that is used to specify the class name for each state of the component. It's called with the name provided in each config object and the name of the current state being rendered.

Example use:

const config = [
  {
    name: 'my-text',
    component: Text,
    states: [{ name: 'success', props: { status: 'success' } }],
  },
];

// Default formatters
collectStyles(config); // => .my-text--success {...}

// Custom state class name formatter
collectStyles(config, undefined, (name, stateName) => `${name}_${stateName}`); // => .my-text_success {...}

// Custom main and state class names formatters
collectStyles(
  config,
  (name) => `.some-prefix_${name}`,
  (name, stateName) => `${name}__${stateName}`,
); // => .some-prefix_my-text__success {...}

exportName/exportPath

These config properties are only used and useful if the styled-components provided in the config are referencing other styled-components inside their template string, and they used @decisiv/babel-plugin-styled-components-references to replace those references with strings that uniquely identify the components across the whole collection of extracted styles. Please refer to the babel-plugin-styled-components-references documentation for information on how it works and how to set it up.

If you have nested references and are using the Babel plugin, you might end up with extracted styles similar to the following:

.text {
  /* main component styles */
}

.text [__default__:some/path/to/a/styled-component/index.js] {
  /* nested component styles */
}

Most likely you'll want to replace those references with proper class names. In order to do that, you must provide a config entry where you set component, exportName, and exportPath to appropriate values.

Example use:

const config = [
  { name: 'text', component: Text },
  {
    name: 'icon',
    component: Icon,
    exportName: '__default__',
    exportPath: 'some/path/to/a/styled-component/index.js',
  },
];

const styles = collectStyles(config);

where styles would then contain something like:

.text {
  /* main component styles */
}

.text .icon {
  /* nested component styles */
}