Merge pull request #112 from styled-components/import-name

Add moduleName option

Author: mxstbr

README.md

@@ -52,7 +52,6 @@ Now use those in your `.stylelintrc` and run stylelint with your JavaScript file
 - [sc-custom](https://www.styled-components.com/docs/tooling#sc-custom)
 - [Syntax Notes](https://www.styled-components.com/docs/tooling#syntax-notes)
 
-
 ## License
 
 Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See [LICENSE.md](./LICENSE.md) for more information!

package-lock.json

@@ -2,13 +2,20 @@ const path = require('path')
 const parse = require('./parsers/index')
 
 const sourceMapsCorrections = {}
+const DEFAULT_OPTIONS = {
+  moduleName: '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/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.moduleName)) {
         importedNames = parseImports(node)
         return
       }
@@ -90,7 +90,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
@@ -101,5 +101,5 @@ module.exports = (input, absolutePath) => {
   } else {
     ast = estreeParse(input)
   }
-  return processStyledComponentsFile(ast, absolutePath)
+  return processStyledComponentsFile(ast, absolutePath, options)
 }

src/parsers/index.js

@@ -1,10 +1,11 @@
+const path = require('path')
 const isTaggedTemplateLiteral = require('./tagged-template-literal').isTaggedTemplateLiteral
 
 /**
  * Check if something is a styled-components import declaration
  */
-const isStyledImport = node =>
-  node.type === 'ImportDeclaration' && node.source.value === 'styled-components'
+const isStyledImport = (node, moduleName) =>
+  node.type === 'ImportDeclaration' && path.basename(node.source.value) === moduleName
 
 /**
  * Check if something is a styled shorthand call

src/utils/styled.js

@@ -0,0 +1,8 @@
+import something from 'some-lib'
+
+
+// Empty block, but moduleName isn't set to some-lib
+// so shouldn't be an error
+const Button = something.div`
+
+`

test/fixtures/options/invalid-module-name.js

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

test/fixtures/options/module-name.js

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

test/fixtures/options/relative-module-name.js

@@ -0,0 +1,6 @@
+import styled from 'some-other-lib'
+
+// ⚠️ BAD INDENTATION ⚠️
+const Button2 = styled.button`
+color: blue;
+`

test/fixtures/simple/other-library.js

@@ -0,0 +1,115 @@
+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 moduleName option to "emotion"
+          processors: [[processor, { moduleName: 'emotion' }]],
+          rules
+        }
+      })
+      .then(result => {
+        data = result
+        done()
+      })
+      .catch(err => {
+        console.log(err)
+        data = err
+        done()
+      })
+  })
+
+  describe('moduleName', () => {
+    beforeAll(() => {
+      fixture = path.join(__dirname, './fixtures/options/module-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')
+    })
+  })
+
+  describe('relative moduleName', () => {
+    beforeAll(() => {
+      fixture = path.join(__dirname, './fixtures/options/relative-module-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')
+    })
+  })
+
+  describe('invalid moduleName', () => {
+    beforeAll(() => {
+      fixture = path.join(__dirname, './fixtures/options/invalid-module-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 not have errored', () => {
+      expect(data.results[0].errored).toEqual(undefined)
+    })
+  })
+})

test/options.test.js

@@ -198,6 +198,28 @@ describe('simple', () => {
     })
   })
 
+  describe('other library', () => {
+    beforeAll(() => {
+      fixture = path.join(__dirname, './fixtures/simple/other-library.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.errored).toEqual(true)
+    })
+
+    it('should have 1 warning', () => {
+      expect(data.results[0].warnings.length).toEqual(1)
+    })
+  })
+
   describe('identify styled', () => {
     beforeAll(() => {
       fixture = path.join(__dirname, './fixtures/simple/identify-styled.js')