Add importName option

Closes #109

Author: mxstbr

README.md

@@ -218,6 +218,30 @@ if (condition) {
 
 It may be that other tagged template literal styles are coincidentally supported, but no issues will be handled regarding indentation unless the above style was used.
 
+### Usage with other libraries
+
+Some other libraries also implement the `styled.x` pattern with tagged template literals. This processor will lint the CSS in those tagged template literals too.
+
+If you want to avoid edge cases when you assing the default import to a variable not called "styled" set the `importName` option to the library name. (set to `styled-components` by default)
+
+```js
+import cool from 'other-library';
+
+const Button = cool.button`
+  color: blue;
+`
+```
+
+```json
+{
+  "processors": [["stylelint-processor-styled-components", {
+      "importName": "other-library"
+  }]]
+}
+```
+
+> **NOTE:** That double array is on purpose but only necessary if you set options, see the [processors configuration docs](https://stylelint.io/user-guide/configuration/#processors).
+
 ## License
 
 Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See [LICENSE.md](./LICENSE.md) for more information!

src/index.js

@@ -2,13 +2,20 @@ const path = require('path')
 const parse = require('./parsers/index')
 
 const sourceMapsCorrections = {}
+const DEFAULT_OPTIONS = {
+  importName: 'styled-components'
+}
 
-module.exports = (/* options */) => ({
+module.exports = options => ({
   // Get string for stylelint to lint
   code(input, filepath) {
     const absolutePath = path.resolve(process.cwd(), filepath)
     sourceMapsCorrections[absolutePath] = {}
-    const { extractedCSS, sourceMap } = parse(input, absolutePath)
+    const { extractedCSS, sourceMap } = parse(
+      input,
+      absolutePath,
+      Object.assign({}, DEFAULT_OPTIONS, options)
+    )
     // Save source location, merging existing corrections with current corrections
     sourceMapsCorrections[absolutePath] = Object.assign(
       sourceMapsCorrections[absolutePath],

src/parsers/index.js

@@ -17,7 +17,7 @@ const getTTLContent = require('../utils/tagged-template-literal.js').getTaggedTe
 const parseImports = require('../utils/parse').parseImports
 const getSourceMap = require('../utils/parse').getSourceMap
 
-const processStyledComponentsFile = (ast, absolutePath) => {
+const processStyledComponentsFile = (ast, absolutePath, options) => {
   const extractedCSS = []
   let ignoreRuleComments = []
   let importedNames = {
@@ -37,7 +37,7 @@ const processStyledComponentsFile = (ast, absolutePath) => {
           }
         })
       }
-      if (isStyledImport(node)) {
+      if (isStyledImport(node, options.importName)) {
         importedNames = parseImports(node)
         return
       }
@@ -76,7 +76,7 @@ const processStyledComponentsFile = (ast, absolutePath) => {
   }
 }
 
-module.exports = (input, absolutePath) => {
+module.exports = (input, absolutePath, options) => {
   let ast = null
   if (absolutePath.endsWith('.ts') || absolutePath.endsWith('.tsx')) {
     // We import it dynamically in order to be able to not include typescript as a dependency
@@ -87,5 +87,5 @@ module.exports = (input, absolutePath) => {
   } else {
     ast = estreeParse(input)
   }
-  return processStyledComponentsFile(ast, absolutePath)
+  return processStyledComponentsFile(ast, absolutePath, options)
 }

src/utils/styled.js

@@ -3,8 +3,8 @@ const isTaggedTemplateLiteral = require('./tagged-template-literal').isTaggedTem
 /**
  * Check if something is a styled-components import declaration
  */
-const isStyledImport = node =>
-  node.type === 'ImportDeclaration' && node.source.value === 'styled-components'
+const isStyledImport = (node, importName) =>
+  node.type === 'ImportDeclaration' && node.source.value === importName
 
 /**
  * Check if something is a styled shorthand call

test/fixtures/options/import-name.js

@@ -0,0 +1,6 @@
+import emotion from 'emotion'
+
+// ⚠️ EMPTY BLOCK ⚠️
+const Button = emotion.div`
+
+`

test/options.test.js

@@ -0,0 +1,71 @@
+const stylelint = require('stylelint')
+const path = require('path')
+
+const processor = path.join(__dirname, '../src/index.js')
+const rules = {
+  'block-no-empty': true,
+  indentation: 2,
+  'rule-empty-line-before': [
+    'always-multi-line',
+    {
+      except: ['first-nested'],
+      ignore: ['after-comment']
+    }
+  ],
+  'selector-type-no-unknown': true
+}
+
+describe('options', () => {
+  let fixture
+  let data
+
+  // NOTE beforeEach() runs _after_ the beforeAll() hooks of the describe() blocks, so `fixture`
+  // will have the right path
+  beforeEach(done => {
+    stylelint
+      .lint({
+        files: [fixture],
+        syntax: 'scss',
+        config: {
+          // Set importName option to "emotion"
+          processors: [[processor, { importName: 'emotion' }]],
+          rules
+        }
+      })
+      .then(result => {
+        data = result
+        done()
+      })
+      .catch(err => {
+        console.log(err)
+        data = err
+        done()
+      })
+  })
+
+  describe('importName', () => {
+    beforeAll(() => {
+      fixture = path.join(__dirname, './fixtures/options/import-name.js')
+    })
+
+    it('should have one result', () => {
+      expect(data.results.length).toEqual(1)
+    })
+
+    it('should use the right file', () => {
+      expect(data.results[0].source).toEqual(fixture)
+    })
+
+    it('should have errored', () => {
+      expect(data.results[0].errored).toEqual(true)
+    })
+
+    it('should have one warning (i.e. wrong lines of code)', () => {
+      expect(data.results[0].warnings.length).toEqual(1)
+    })
+
+    it('should have a block-no-empty as the first warning', () => {
+      expect(data.results[0].warnings[0].rule).toEqual('block-no-empty')
+    })
+  })
+})