Variables start with $ don't throw errors

[d7my11]

stylelint-processor-styled-components ignores variables start with $

Reproduction

https://codesandbox.io/embed/styled-components-3tmvb

Steps to reproduce

• declare a variable starting with $
• assign this variable to a property without ${ }

// Doesn't throw an error
const $primaryBackgroundColor = "papayawhip";
export default styled.section`
  padding: 4em;
  background: $primaryBackgroundColor;
`;

// throws an error
const primaryBackgroundColor = "papayawhip";
export default styled.section`
  padding: 4em;
  background: primaryBackgroundColor;
`;

Expected Behavior

should throw error for invalid value

Actual Behavior

it passes

Environment

npx envinfo --system --binaries --npmPackages stylelint,styled-components,stylelint-processor-styled-components,stylelint-config-styled-components,stylelint-config-recommended --markdown --clipboard

## System:
 - OS: macOS 10.14.4
 - CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
 - Memory: 583.10 MB / 16.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
 - Yarn: 1.16.0 - /usr/local/bin/yarn
 - npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - styled-components: 3.3.3 => 3.3.3
 - stylelint: ^9.10.1 => 9.10.1
 - stylelint-config-recommended: ^2.1.0 => 2.1.0
 - stylelint-config-styled-components: ^0.1.1 => 0.1.1
 - stylelint-processor-styled-components: ^1.8.0 => 1.8.0

---

{
  "processors": ["stylelint-processor-styled-components"],
  "plugins": [
    "stylelint-csstree-validator"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "rules": {
    "csstree/validator": {
      "ignore": ["-styled-mixin0", "-styled-mixin1", "-styled-mixin2"]
    }
  }
}

I can open a PR to fix it it's confirmed. Thanks

[chinesedfan]

I didn't find any stylelint rules that would check the value. If you know, please tell me.

Your error should be thrown by csstree/stylelint-validator. As $var is valid in sass syntax, see codes of csstree/stylelint-validator, it will not throw an error for a variable starting with $.

Maybe your test file has the .sass extension. If not, you can open an issue in https://github.com/csstree/stylelint-validator/issues to ask them not to consider this syntax as valid for normal css files.

[d7my11]

@chinesedfan thank you for your response