Using other styled components in selectors not working
shanedaugherty opened this issue · comments
Having some issues with the component-selector feature (using other styled-components as selectors)
I created this git repo where the issue can be reproduced:
https://github.com/shanedaugherty/styled-components-issue
Pull down, and run npm run lint
If you can get this to pass, I will buy you a cookie
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"
]
}
]
FYI #248. And your workaround looks good.
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
@dguay You can config your stylelint rule as,
"property-no-unknown": [
true,
{
"ignoreProperties": [
"/-styled-mixin/"
]
}
]
@chinesedfan I tried this as well and still have the same stylelint error.
@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/"]}],
@dguay You need write options in the same object.
"property-no-unknown": [true, {"checkPrefixed": true, "ignoreProperties": ["/-styled-mixin/"]}],
@chinesedfan Oh damn you're right ! Thanks !