Modern CSS Formatter for the component age

+

Installation

with yarn:

yarn add --dev styled-components-stylefmt

or with npm:

npm install --save-dev styled-components-stylefmt

Features

• works just as stylefmt, addind support for formatting styled-components!

Example

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
 text-align: center;
    color: palevioletred;
`;

const Wrapper = styled.section`
  padding   : 4em;
  background: papayawhip   ;
`;

yields:

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

Usage

in command line

CLI help:

styled-components-stylefmt --help

Usage: styled-components-stylefmt [options] input-name [output-name]

Options:

  -b, --config-basedir   Path to the directory that relative paths defining \\"extends\\"
  -c, --config           Path to a specific configuration file (JSON, YAML, or CommonJS)
  -d, --diff             Output diff against original file
  -r, --recursive        Format list of space seperated files(globs) in place
  -v, --version          Output the version number
  -h, --help             Output usage information
  -i, --ignore-path      Path to a file containing patterns that describe files to ignore.

in Node.js

const formatter = require('styled-components-stylefmt')

const stylefmtOptions = {
  // ...
}

const formatted = formatter('input.js', stylefmtOptions)

stylelint rules it can handle

All the rules that stylefmt can.