SCSS support?

[ronilaukkarinen]

I'd like to lint .scss files.

doiuse sass/variables/_spacings.scss 

Produces:

{ CssSyntaxError: /Users/rolle/Projects/airdev/content/themes/air-light/sass/variables/sass/variables/_spacings.scss:3:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
    at Input.error (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/input.js:112:16)
    at Parser.unknownWord (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:518:22)
    at Parser.decl (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:201:16)
    at Parser.other (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:115:18)
    at Parser.parse (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/parser.js:59:16)
    at parse (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/lazy-result.js:122:16)
    at Processor.process (/usr/local/lib/node_modules/doiuse/node_modules/postcss/lib/processor.js:33:12)
    at Transform.write [as _transform] (/usr/local/lib/node_modules/doiuse/stream.js:60:17)
    at Transform._read (/usr/local/lib/node_modules/doiuse/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:177:10)
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  file:
   '/Users/rolle/Projects/airdev/content/themes/air-light/sass/variables/sass/variables/_spacings.scss',
  line: 3,
  column: 1,
  input:
   { line: 3,
     column: 6,
     source:
      '// CSS Variables for responsive paddings and margins\n:root {\n  // Paddings\n  --padding-container-horizontal: 2rem;\n  --padding-container-vertical: 6.4rem;\n  --padding-site-header-vertical: 2rem;\n  --padding-block: 8rem;\n\n  // Margins\n  --margin-between-text-elements: 4rem;\n\n  // Mid-sized screens\n  @media (max-width: $width-grid-base + 150px) {\n    --padding-container-horizontal: 2rem;\n  }',
     url:
      'file:///Users/rolle/Projects/airdev/content/themes/air-light/sass/variables/_spacings.scss',
     file:
      '/Users/rolle/Projects/airdev/content/themes/air-light/sass/variables/_spacings.scss' } }

I never work with outputted CSS files. It would be amazing to be able to use vscode plugin and see the browser support directly on editor linter OR even implement this to a gulp task.

[ronilaukkarinen]

Oh, never mind, that plugin supports SCSS out of the box... closing this.

[ronilaukkarinen]

Got it running on my editor, yes, but let's say I want doiuse to be part of our travis workflow. What command do I use to enable SCSS support in doiuse?

[WebMechanic]

it's reporting You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

I installed said postcss-scss parser, but doiuse won't utilize it. Is there some config option? It' sad we can't lint .scss files :(

[codethief]

I'd be very interested in this as well!

[clshortfuse]

It's not exactly a core feature I think we should support, since we'd be overcomplicating the scope of the project by drawing in more dependencies.

Generally, you'd use postcss with a preprocessor either at the command line level before piping or with stylelint (which also uses postcss). Personally, I don't use the cli much because I have the errors built into the IDE.

That said, we should probably have a guide somewhere at minimum. Next, we should be probably add some tests to ensure you can pipe SCSS over.