Comments (8)
False alarm, using stylelint-config-recommended
fixed most of the issues.
I did have to add this, I'll let you guys decide if there is an issue here still.
"selector-type-no-unknown": [
true,
{
"ignoreTypes": [
"/-styled-mixin/",
"$dummyValue"
]
}
]
from stylelint-processor-styled-components.
@dguay You need write options in the same object.
"property-no-unknown": [true, {"checkPrefixed": true, "ignoreProperties": ["/-styled-mixin/"]}],
from stylelint-processor-styled-components.
FYI #248. And your workaround looks good.
from stylelint-processor-styled-components.
I have a similar issue with this example:
const defaultButtonStyle = css`
color: #fff;
...
`;
const Button = styled.button`
${defaultButtonStyle}
`;
The following error is on ${defaultButtonStyle}
:
Unexpected unknown property "-styled-mixin0" property-no-unknown
- I've tried adding the config from this @shanedaugherty with no success.
- From #248, I've tried changing the line to
${/* sc-selector */defaultButtonStyle};
but then I get this error:Unknown word CssSyntaxError
NPM Packages
- "styled-components": "^4.3.0"
- "stylelint": "^10.1.0"
- "stylelint-config-recommended": "^2.2.0"
- "stylelint-config-styled-components": "^0.1.1"
- "stylelint-order": "^3.0.0"
- "stylelint-processor-styled-components": "^1.8.0"
- "stylelint-no-px": "^0.12.1"
.stylelintrc
{
"processors": ["stylelint-processor-styled-components"],
"plugins": [
"stylelint-order",
"stylelint-no-px"
],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
],
"rules": {
"at-rule-empty-line-before": ["always", {ignore: ["after-comment"], "except": ["first-nested", "blockless-after-blockless"]}],
"at-rule-no-unknown": [true, {"ignoreAtRules": ["mixin", "content", "include", "extend"]}],
"at-rule-no-vendor-prefix": true,
"block-closing-brace-newline-after": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-closing-brace-space-before": "always-single-line",
"block-no-empty": true,
"block-opening-brace-newline-after": "always-multi-line",
"block-opening-brace-space-after": "always-single-line",
"block-opening-brace-space-before": "always",
"color-hex-case": "lower",
"color-hex-length": "short",
"color-no-invalid-hex": true,
"comment-empty-line-before": ["always", except: ["first-nested"]],
"comment-whitespace-inside": "always",
"declaration-bang-space-after": "never",
"declaration-bang-space-before": "always",
"declaration-block-no-shorthand-property-overrides": true,
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-space-before": "never",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-trailing-semicolon": "always",
"declaration-colon-newline-after": "always-multi-line",
"declaration-colon-space-after": "always-single-line",
"declaration-colon-space-before": "never",
"function-calc-no-unspaced-operator": true,
"function-comma-newline-after": "always-multi-line",
"function-comma-space-after": "always-single-line",
"function-comma-space-before": "never",
"function-linear-gradient-no-nonstandard-direction": true,
"function-parentheses-newline-inside": "always-multi-line",
"function-parentheses-space-inside": "never-single-line",
"function-url-quotes": "always",
"function-whitespace-after": "always",
"indentation": 2,
"length-zero-no-unit": true,
"max-empty-lines": 1,
"max-line-length": [80, {"ignore": "non-comments"}],
"media-feature-colon-space-after": "always",
"media-feature-colon-space-before": "never",
"media-feature-name-no-unknown": true,
"media-feature-name-no-vendor-prefix": true,
"media-feature-parentheses-space-inside": "never",
"media-feature-range-operator-space-after": "always",
"media-feature-range-operator-space-before": "always",
"media-query-list-comma-newline-after": "always-multi-line",
"media-query-list-comma-space-after": "always-single-line",
"media-query-list-comma-space-before": "never",
"meowtec/no-px": [true, { "ignore": ["1px", "border"] }],
"no-eol-whitespace": true,
"no-missing-end-of-source-newline": false,
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"order/properties-order": [
"box-sizing",
"display",
"content",
"position",
"z-index",
"top",
"right",
"bottom",
"left",
"transform",
"flex",
"order",
"align-self",
"flex-direction",
"justify-content",
"align-items",
"flex-wrap",
"align-content",
"flex-flow",
"overflow",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"padding",
"border",
"margin",
"list",
"background",
"box-shadow",
"outline",
"text",
"white-space",
"font",
"line-height",
"color",
"animation",
"transition"
],
"property-no-unknown": [true, {"checkPrefixed": true}],
"property-no-vendor-prefix": true,
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-list-comma-newline-after": "always",
"selector-list-comma-space-before": "never",
"selector-no-vendor-prefix": true,
"selector-pseudo-class-no-unknown": true,
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-element-no-unknown": true,
"selector-type-no-unknown": true,
"shorthand-property-no-redundant-values": true,
"string-quotes": "double",
"unit-no-unknown": true,
"value-list-comma-newline-after": "always-multi-line",
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
"value-no-vendor-prefix": true
}
}
Any help is appreciated
from stylelint-processor-styled-components.
@dguay You can config your stylelint rule as,
"property-no-unknown": [
true,
{
"ignoreProperties": [
"/-styled-mixin/"
]
}
]
from stylelint-processor-styled-components.
@chinesedfan I tried this as well and still have the same stylelint error.
from stylelint-processor-styled-components.
@chinesedfan Ok so the problem was checkedPrefixed
stylelint option.
This works:
"property-no-unknown": [true, {"ignoreProperties": ["/-styled-mixin/"]}],
This does not:
"property-no-unknown": [true, {"checkPrefixed": true}, {"ignoreProperties": ["/-styled-mixin/"]}],
from stylelint-processor-styled-components.
@chinesedfan Oh damn you're right ! Thanks !
from stylelint-processor-styled-components.
Related Issues (20)
- Autofix stylelint doesn't work HOT 3
- Release a new version with stylelint 10 changes HOT 2
- Add support for css prop HOT 4
- Remove or rename invalid `-styled-mixin0` CSS properties caused by using mixins HOT 5
- Variables start with $ don't throw errors HOT 2
- Upgrade outdated "@babel/parser" dependency HOT 3
- Add Support for Object Syntax HOT 3
- Deprecated package HOT 10
- CSS partials cause `CssSyntaxError` HOT 1
- An in-range update of postcss is breaking the build 🚨 HOT 2
- Possible to lint styles outside styled component definition? HOT 4
- Nested `css` blocks inside of styled-components creates invalid code HOT 1
- Support babel 7.8 syntax like null coalescing without plugins HOT 2
- Stylelint doesn't lint nested conditional block of styles
- Stylelint: Unknown word (CssSyntaxError) when commenting out valid css HOT 2
- Do I need this? HOT 2
- style lint don't work HOT 1
- Template literal types cannot have any substitution HOT 1
- Vulnerability Issue HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stylelint-processor-styled-components.