Skip to content

gucong3000/postcss-styled

Repository files navigation

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.