postcss-styled
PostCSS syntax for parsing styled components
Last updated 7 years ago by gucong .
MIT · Repository · Bugs · Original npm
$ cnpm install postcss-styled 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 0.34.0                                ...           latest (7 years ago)

1 Versions

  • 0.34.0                                ...           7 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (7)
Dependents (0)
None

Copyright 2013 - present © cnpmjs.org