Skip to content

gucong3000/postcss-styled

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

PostCSS Styled Syntax

NPM version Travis Travis Codecov David

PostCSS syntax for parsing styled components

Getting Started

First thing's first, install the module:

npm install postcss-styled --save-dev

Use Cases

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

input:

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

output:

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

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.