PostCSS Styled Syntax

PostCSS syntax for parsing styled components

Getting Started

First thing's first, install the module:

npm install postcss-styled --save-dev

Use Cases

1const postcss = require('postcss');
2const stylelint = require('stylelint');
3const syntax = require('postcss-styled')({
4	// syntax for parse css blocks (non-required options)
5	css: require('postcss-safe-parser'),
6});
7postcss([stylelint({ fix: true })]).process(source, { syntax: syntax }).then(function (result) {
8	// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
9	result.content
10});

input:

1import styled from 'styled-components';
2const Title = styled.h1`
3	font-size:   1.5em;
4		text-align:  center;
5	color: palevioletred;
6`;

output:

1import styled from 'styled-components';
2const Title = styled.h1`
3	font-size: 1.5em;
4	text-align: center;
5	color: palevioletred;
6`;

Advanced Use Cases

See: postcss-syntax

Style Transformations

The main use case of this plugin is to apply PostCSS transformations to CSS code in template literals.