use a simpler hashing algorithm when a file system is available

By not including the file contents in the hash, the generated IDs
should be more durable and less susceptible to minor differences
in file content due to a babel plugin being applied to ssr vs
client config or something like that

src/visitors/displayNameAndId.js

@@ -76,7 +76,13 @@ const getFileHash = (state) => {
   const moduleName = moduleRoot && JSON.parse(fs.readFileSync(path.join(moduleRoot, 'package.json'))).name
   const code = file.code
 
-  const fileHash = hash([moduleName, filePath, code].join(''))
+  const stuffToHash = [moduleName, filePath]
+
+  if (!filePath) {
+    stuffToHash.push(code)
+  }
+
+  const fileHash = hash(stuffToHash.join(''))
   file.set(FILE_HASH, fileHash)
   return fileHash
 }

test/__snapshots__/index.test.js.snap

@@ -24,49 +24,49 @@ const WrappedComponent = styled(Inner).withConfig({
 
 exports[`fixtures should add identifier 1`] = `
 "const Test = styled.div.withConfig({
-  componentId: \"wyb2qx-0\"
+  componentId: \"s1eqzdxw-0\"
 })\`width:100%;\`;
 const Test2 = true ? styled.div.withConfig({
-  componentId: \"wyb2qx-1\"
+  componentId: \"s1eqzdxw-1\"
 })\`\` : styled.div.withConfig({
-  componentId: \"wyb2qx-2\"
+  componentId: \"s1eqzdxw-2\"
 })\`\`;
 const styles = { One: styled.div.withConfig({
-    componentId: \"wyb2qx-3\"
+    componentId: \"s1eqzdxw-3\"
   })\`\` };
 let Component;
 Component = styled.div.withConfig({
-  componentId: \"wyb2qx-4\"
+  componentId: \"s1eqzdxw-4\"
 })\`\`;
 const WrappedComponent = styled(Inner).withConfig({
-  componentId: \"wyb2qx-5\"
+  componentId: \"s1eqzdxw-5\"
 })\`\`;"
 `;
 
 exports[`fixtures should add identifier and display name 1`] = `
 "const Test = styled.div.withConfig({
   displayName: \"Test\",
-  componentId: \"s1obzuja-0\"
+  componentId: \"f7i0wp-0\"
 })\`width:100%;\`;
 const Test2 = true ? styled.div.withConfig({
   displayName: \"Test2\",
-  componentId: \"s1obzuja-1\"
+  componentId: \"f7i0wp-1\"
 })\`\` : styled.div.withConfig({
   displayName: \"Test2\",
-  componentId: \"s1obzuja-2\"
+  componentId: \"f7i0wp-2\"
 })\`\`;
 const styles = { One: styled.div.withConfig({
     displayName: \"One\",
-    componentId: \"s1obzuja-3\"
+    componentId: \"f7i0wp-3\"
   })\`\` };
 let Component;
 Component = styled.div.withConfig({
   displayName: \"Component\",
-  componentId: \"s1obzuja-4\"
+  componentId: \"f7i0wp-4\"
 })\`\`;
 const WrappedComponent = styled(Inner).withConfig({
   displayName: \"WrappedComponent\",
-  componentId: \"s1obzuja-5\"
+  componentId: \"f7i0wp-5\"
 })\`\`;"
 `;
 
@@ -198,27 +198,27 @@ exports[`fixtures should track the imported variable 1`] = `
 
 const Test = s.div.withConfig({
   displayName: \"Test\",
-  componentId: \"s1p7rnsm-0\"
+  componentId: \"tethjc-0\"
 })\`width:100%;\`;
 const Test2 = true ? s.div.withConfig({
   displayName: \"Test2\",
-  componentId: \"s1p7rnsm-1\"
+  componentId: \"tethjc-1\"
 })\`\` : s.div.withConfig({
   displayName: \"Test2\",
-  componentId: \"s1p7rnsm-2\"
+  componentId: \"tethjc-2\"
 })\`\`;
 const styles = { One: s.div.withConfig({
     displayName: \"One\",
-    componentId: \"s1p7rnsm-3\"
+    componentId: \"tethjc-3\"
   })\`\` };
 let Component;
 Component = s.div.withConfig({
   displayName: \"Component\",
-  componentId: \"s1p7rnsm-4\"
+  componentId: \"tethjc-4\"
 })\`\`;
 const WrappedComponent = s(Inner).withConfig({
   displayName: \"WrappedComponent\",
-  componentId: \"s1p7rnsm-5\"
+  componentId: \"tethjc-5\"
 })\`\`;"
 `;
 
@@ -227,17 +227,17 @@ exports[`fixtures should transpile require default 1`] = `
 
 const TestNormal = styled.div.withConfig({
   displayName: \"19-transpile-require-default__TestNormal\",
-  componentId: \"s1hlt51i-0\"
+  componentId: \"ydirwv-0\"
 })([[\"{width: 100%;}\"]]);
 
 const Test = styled_default.default.div.withConfig({
   displayName: \"19-transpile-require-default__Test\",
-  componentId: \"s1hlt51i-1\"
+  componentId: \"ydirwv-1\"
 })([[\"{width: 100%;}\"]]);
 
 const TestCallExpression = styled_default.default(Test).withConfig({
   displayName: \"19-transpile-require-default__TestCallExpression\",
-  componentId: \"s1hlt51i-2\"
+  componentId: \"ydirwv-2\"
 })([[\"{height: 20px;}\"]]);"
 `;
 
@@ -288,26 +288,26 @@ exports[`fixtures should use file name 1`] = `
 
 const Test = styled.div.withConfig({
   displayName: \"05-use-file-name__Test\",
-  componentId: \"evunba-0\"
+  componentId: \"sng6m2-0\"
 })\`color:red;\`;
 const before = styled.div.withConfig({
   displayName: \"05-use-file-name__before\",
-  componentId: \"evunba-1\"
+  componentId: \"sng6m2-1\"
 })\`color:blue;\`;
 styled.div.withConfig({
   displayName: \"05-use-file-name\",
-  componentId: \"evunba-2\"
+  componentId: \"sng6m2-2\"
 })\`\`;
 export default styled.button.withConfig({
   displayName: \"05-use-file-name\",
-  componentId: \"evunba-3\"
+  componentId: \"sng6m2-3\"
 })\`\`;"
 `;
 
 exports[`fixtures should work with hoisted default as import 1`] = `
 "const Test = s.div.withConfig({
   displayName: \'06-work-with-hoisted-default-as-import__Test\',
-  componentId: \'tcn4fb-0\'
+  componentId: \'iq9xqu-0\'
 })\`width:100%;\`;
 import { default as s, css } from \'styled-components\';"
 `;