title: stylelint config for SCSS & StyledComponent
body: <p>Our repos have a mix of SCSS &amp; newer StyledComponents and I believe having StyleLint try to manage both SCSS &amp; *.css.js StyledComponents conflicts with rules/processors.  I currently run this with <code>lintstaged</code> during a commit:</p>
  <p>.lintstagedrc file:</p>
  <pre><code>{
    &quot;**/*.(js|jsx|ts|tsx)&quot;: [
      &quot;npm run lint:fix&quot;,
      &quot;npm run prettier:write&quot;,
    ],
    &quot;**/*.(css|less|scss)+?(.js)&quot;: [
      &quot;npm run stylelint&quot;,
    ]
  }
  </code></pre>
  <p>Let's say an SCSS file gets updated:</p>
  <pre><code>@import '../../../styles/variables.scss';
  
  .account-search-list {
    color: $light-grey;
  }
  </code></pre>
  <p>and here is my StyledComponent:</p>
  <pre><code>export const StyledData = styled.div`
    margin-bottom: 0.75rem;
  `;
  </code></pre>
  <p>For example, if I try to use this stylelint config, I get an error :</p>
  <pre><code>{
    &quot;processors&quot;: [&quot;stylelint-processor-styled-components&quot;],
    &quot;extends&quot;: [
      &quot;stylelint-config-sass-guidelines&quot;,
      &quot;stylelint-config-recommended&quot;,
      &quot;stylelint-config-styled-components&quot;
    ],
    &quot;plugins&quot;: [&quot;stylelint-scss&quot;],
    &quot;syntax&quot;: &quot;scss&quot;,
    &quot;rules&quot;: {
      &quot;scss/at-import-partial-extension&quot;: &quot;always&quot;,
      &quot;scss/at-import-partial-extension-blacklist&quot;: [&quot;.scss&quot;],
      &quot;max-nesting-depth&quot;: [3, { &quot;ignore&quot;: &quot;pseudo-classes&quot;, &quot;ignoreAtRules&quot;: &quot;media&quot; }],
      &quot;selector-max-compound-selectors&quot;: [4]
    }
  }
  </code></pre>
  <p>This returns an error:</p>
  <blockquote>
  <p>src/components/common/AccountSearchList/index.scss
  1:1  ✖  Unexpected keyword 'import' (1:1)</p>
  </blockquote>
  <p>Because this is an error with SCSS, let's <strong>remove</strong> the <code>processors</code> field for StyledComponents ‍♂️.  Well that's good, the <code>import</code> error is gone!!  But now there are StyledComponent issues:</p>
  <blockquote>
  <p>7:3  ✖  Expected indentation of 4 spaces   indentation</p>
  </blockquote>
  <p>My ESLinter/Prettier formatter requires 2 spaces, but that's OK there's a stylelint <code>rule</code> for that, so I will add: <code>indentation: 2</code> to the rules above, but that doesn't work either as the processor is missing and likely cannot pickup the JS rules.</p>
  <p>So, how can I combine rules, or run certain rules for certain file types?</p>
  <p>Thanks!</p>