@decisiv/styled-components-static-styles v1.4.2
styled-components-static-styles
Contents
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 withrequiredProps
, 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 offind-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 */
}
1 year ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago