Package Exports
- postcss-styled
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-styled) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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
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.