Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
postcss-styled-syntax
Advanced tools
Changelog
0.6.4
Readme
PostCSS syntax for template literals CSS-in-JS (e. g. styled-components, Emotion). It was built to be used as Stylelint custom syntax or with PostCSS plugins.
Syntax supports:
styled.foo
styled(Component)
styled.foo.attrs({})
styled(Component).attrs({})
css
createGlobalStyle
let Component = styled.p`
color: #bada55;
`;
npm install --save-dev postcss-styled-syntax
Install syntax and add to a Stylelint config:
{
"customSyntax": "postcss-styled-syntax"
}
Stylelint custom syntax documentation.
Install syntax and add to a PostCSS config:
module.exports = {
syntax: 'postcss-styled-syntax',
plugins: [ /* ... */ ],
};
An example assumes using PostCSS CLI or another PostCSS runner with config support.
Syntax parser JavaScript/TypeScript code and find all supported components and functions (e.g., css``
). Then, it goes over them and builds a PostCSS AST, where all found components become Root
nodes inside the Document
node.
All interpolations within the found component CSS end up in the AST. E. g. for a declaration color: ${brand}
Decl
node will look like this:
Decl {
prop: 'color',
value: '${brand}',
}
When interpolation is not part of any node, it goes to the next node's raws.before
. For example, for the following code:
let Component = styled.p`
${textStyles}
color: red;
`;
AST will look like:
Decl {
prop: 'color',
value: 'red',
raws: {
before: '\n\t${textStyles}\n\n\t',
// ...
}
}
If there is no next node after interpolation, it will go to parents raws.after
. For example, for the following code:
let Component = styled.p`
color: red;
${textStyles}
`;
AST will look like:
Root {
nodes: [
Decl {
prop: 'color',
value: 'red',
},
],
raws: {
after: '\n\n\t${textStyles}\n'
// ...
},
}
Mostly, it works just as the default PostCSS stringifyer. The main difference is the css
helper in interpolations within a styled component code. E. g. situations like this:
let Component = styled.p`
${(props) =>
props.isPrimary
? css`
background: green;
`
: css`
border: 1px solid blue;
`}
color: red;
`;
css
helper inside an interpolation within Component
code.
During parsing, the whole interpolation (${(props) ... }
) is added as raws.before
to color: red
node. And it should not be modified. Each css
helper remembers their original content (as a string).
When stringifyer reaches a node's raws.before
, it checks if it has interpolations with css
helpers. If yes, it searches for the original content of css
helper and replaces it with a stringified css
helper. This way, changes to the AST of the css
helper will be stringified.
Double-slash comments (//
) will result in a parsing error. Use standard CSS comments instead (/* */
). It is definitely possible to add support for double-slash comments, but let's use standard CSS as much as possible
Source maps won't work or cannot be trusted. I did not disable them on purpose. But did not test them at all. Because of the way we need to handle css
helpers within a styled component, source.end
positions on a node might change if css
AST changes. See the “How it works” section on stringifying for more info.
PostCSS for tokenizer, parser, stringifier, and tests for them.
Prettier for styled-components detection function in an ESTree AST.
FAQs
PostCSS syntax for template literals CSS-in-JS (e. g. styled-components).
The npm package postcss-styled-syntax receives a total of 215,094 weekly downloads. As such, postcss-styled-syntax popularity was classified as popular.
We found that postcss-styled-syntax demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.