0.2.1 • Published 2 years ago
postcss-styled-components v0.2.1
postcss-styled-components
A PostCSS and stylelint custom syntax for parsing CSS inside styled-components templates.
For example:
const Div = styled.div`
color: hotpink;
`;
Install
npm i -D postcss-styled-components
Usage with PostCSS
In your postcss.config.js
:
module.exports = {
syntax: 'postcss-styled-components',
plugins: [...]
};
PostCSS with webpack
If you use webpack to execute postcss, you must ensure the right order of loaders, like so:
module.exports = {
entry: './src/my-element.ts',
module: {
rules: [
{
test: /\.ts$/,
use: ['postcss-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts']
},
output: {
filename: 'bundle.js'
}
};
This is important as postcss will transform your CSS before typescript transpiles to JS (which is what you want to happen).
Usage with stylelint
In your .stylelintrc.json
(or other stylelint config file):
{
"customSyntax": "postcss-styled-components"
}
Or with the CLI:
stylelint --custom-syntax postcss-styled-components
Usage with vscode-stylelint
In order to make the vscode-stylelint extension work with this syntax correctly, you must configure it to validate JS and/or TypeScript files.
You can do this by following these instructions.
For example:
{
"stylelint.validate": ["css", "javascript", "typescript"]
}