Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
stylelint-processor-styled-components
Advanced tools
A stylelint processor for styled-components
The stylelint-processor-styled-components package is a plugin for Stylelint that allows you to lint styled-components in your JavaScript and TypeScript files. It helps ensure that your styled-components adhere to your project's style guidelines.
Linting styled-components
This feature allows you to lint styled-components within your JavaScript or TypeScript files. The code sample shows a styled-component definition and a Stylelint configuration that uses the stylelint-processor-styled-components processor.
/* Example of a styled-component */
import styled from 'styled-components';
const Button = styled.button`
background: blue;
color: white;
font-size: 16px;
`;
/* Stylelint configuration */
module.exports = {
processors: ['stylelint-processor-styled-components'],
extends: ['stylelint-config-standard'],
rules: {
'color-no-invalid-hex': true,
'font-family-no-duplicate-names': true
}
};
Custom rules for styled-components
This feature allows you to define custom Stylelint rules specifically for styled-components. The code sample shows a styled-component and a Stylelint configuration with custom rules such as 'block-no-empty' and 'unit-whitelist'.
/* Example of a styled-component with custom rules */
import styled from 'styled-components';
const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
`;
/* Stylelint configuration with custom rules */
module.exports = {
processors: ['stylelint-processor-styled-components'],
extends: ['stylelint-config-standard'],
rules: {
'block-no-empty': true,
'unit-whitelist': ['em', 'rem', '%', 's']
}
};
eslint-plugin-styled-components-a11y is an ESLint plugin that provides accessibility linting for styled-components. It focuses on ensuring that styled-components adhere to accessibility standards, which is different from stylelint-processor-styled-components that focuses on style rules.
stylelint-config-styled-components is a shareable configuration for Stylelint that is tailored for styled-components. It provides a set of predefined rules and configurations, whereas stylelint-processor-styled-components is a processor that allows you to lint styled-components within your existing Stylelint setup.
stylelint-processor-styled-components
Lint your styled components with stylelint!
You need:
stylelint
(duh)styled-components
stylelint-config-styled-components
config to disable stylelint rules that clash with styled-components
stylelint
config! (for example stylelint-config-recommended
)(npm install --save-dev \
stylelint \
stylelint-processor-styled-components \
stylelint-config-styled-components \
stylelint-config-recommended)
Now use those in your .stylelintrc
and run stylelint with your JavaScript files!
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}
NOTE: The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in
.ts
or.tsx
)
And it also has some options. Their default values are,
{
"processors": [["stylelint-processor-styled-components", {
"moduleName": "styled-components",
"importName": "default",
"strict": false,
"ignoreFiles": [],
"parserPlugins": [
"jsx",
["decorators", { "decoratorsBeforeExport": true }],
"classProperties",
"exportExtensions",
"functionBind",
"functionSent"
]
}]]
}
moduleName
, importName
and strict
, you can tell the processor what kinds of tagged template literals to lint.import styled, { css, keyframes } from 'styled-components';
// `importName` from `moduleName`, which means where `styled` comes from
styled(Component)``;
styled('div')``;
styled.div``;
// any other imports from `moduleName` (if `strict` is true, they will not be linted)
css``;
keyframes``;
// special extend calls, which have been deprecated in styled-components v4
Component.extend``;
ignoreFiles
is passed to micromatch as the second parameter, which means one or more glob patterns for matching.
parserPlugins
is used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found in Babel's website.
Further documentation for this processor lives on the styled-components website!
Unexpected token
? Even thought the file didn't import styled-components
.You can custom babel plugins by option.parserPlugins
now. An API example is our test. But if someone can implement #231, that will be much better.
If your project includes yarn.lock
or package-lock.json
, an alternative cause can be that babel related dependencies, i.e. @babel/parser
and @babel/traverse
, are outdated, especially when linting files with new TypeScript syntaxes. You can upgrade them by removing their entries in the lockfile and reinstall dependencies.
The processor can not always parse interpolations with right things. But you can use interpolation-tagging to help it. If you have ideas to make it more intelligent, feel free to send a PR or share your solution by an new issue.
What's more, if set syntax: css-in-js
in stylelint@10, it can extract styles from styled-components
without this processor. Even though there are still lots of differences with this processor, we hope this processor's abilities can be migrated to stylelint totally in the future.
css
.You can set option.strict
. More examples are in #258.
Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See LICENSE.md for more information!
Based on Mapbox' excellent stylelint-processor-markdown
, thanks to @davidtheclark!
1.10.0
FAQs
A stylelint processor for styled-components
The npm package stylelint-processor-styled-components receives a total of 226,779 weekly downloads. As such, stylelint-processor-styled-components popularity was classified as popular.
We found that stylelint-processor-styled-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.