Linting

[mxstbr]

We need to find a way to integrate linting, preferably with a tool that understands stylelint rules. The issue is that we're in the browser, so the question is how do we best handle this? Let it happen in the build step?

[geelen]

Or in dev mode only...

[mxstbr]

I got really close to a solution, but now I'm back at the start. 😢

I had the idea to write an eslint rule that would get the tagged template literals and then lint the CSS string with stylelint. I got as far as getting a string of CSS in eslint, but as it turns out eslint rules have to be sync, while the stylelint API is 100% async.

For example purposes, this is the code for the eslint rule I had – so close, yet so far:

// css-lint.js

module.exports = {
  create(context) {
    const options = context.options[0]

    return {
      TaggedTemplateExpression(node) {
        if(isStyledTagname(node)) {
          // ⚠️ This doesn't work because the function _needs_ to return sync 😭
          stylelint.lint({
            code: node.quasi.quasis[0].value.raw,
            config: options.stylelint,
          }).then(data => {
            // …here I wanted to report success
          }).catch(err => {
            // …here I wanted to report error
          })
        }
      }
    };
  },
}

If anybody has ideas where to go from here, let me know!

[k15a]

Did you file an issue at ESLint to add async rule support or at Stylelint to add sync support?

[mxstbr]

Neither, I got a much better plan now. stylelint has support for processors to lint CSS in any arbitrary file format, e.g. html <style> tags – or styled-components!

I've started writing a first processor and had immediate success, see the WIP at https://github.com/styled-components/stylelint-process-styled-components! I won't get it done this week (speaking at VoxxedDays Thessaloniki on Friday), but linting styled-components CSS isn't far away!!