Merge pull request #313 from chalbert/fix/prefix-leading-character

Ensure sc- prefix is always added

src/visitors/displayNameAndId.js

@@ -187,9 +187,7 @@ const getNextId = state => {
 
 const getComponentId = state => {
   // Prefix the identifier with a character because CSS classes cannot start with a number
-  return `${useNamespace(state)}${prefixLeadingDigit(
-    getFileHash(state)
-  )}-${getNextId(state)}`
+  return `${useNamespace(state)}sc-${getFileHash(state)}-${getNextId(state)}`
 }
 
 export default t => (path, state) => {

test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js

@@ -1,27 +1,27 @@
 import { styled } from '@example/example';
 const Test = styled.div.withConfig({
   displayName: "Test",
-  componentId: "elhbfv-0"
+  componentId: "sc-elhbfv-0"
 })`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
   displayName: "Test2",
-  componentId: "elhbfv-1"
+  componentId: "sc-elhbfv-1"
 })`` : styled.div.withConfig({
   displayName: "Test2",
-  componentId: "elhbfv-2"
+  componentId: "sc-elhbfv-2"
 })``;
 const styles = {
   One: styled.div.withConfig({
     displayName: "One",
-    componentId: "elhbfv-3"
+    componentId: "sc-elhbfv-3"
   })``
 };
 let Component;
 Component = styled.div.withConfig({
   displayName: "Component",
-  componentId: "elhbfv-4"
+  componentId: "sc-elhbfv-4"
 })``;
 const WrappedComponent = styled(Inner).withConfig({
   displayName: "WrappedComponent",
-  componentId: "elhbfv-5"
+  componentId: "sc-elhbfv-5"
 })``;

test/fixtures/annotate-styled-calls-with-pure-comments/output.js

@@ -1,43 +1,43 @@
 import styled from 'styled-components';
 const Test = /*#__PURE__*/styled.div.withConfig({
   displayName: "code__Test",
-  componentId: "u20i28-0"
+  componentId: "sc-u20i28-0"
 })(["width:100%;"]);
 const Test2 = /*#__PURE__*/styled('div').withConfig({
   displayName: "code__Test2",
-  componentId: "u20i28-1"
+  componentId: "sc-u20i28-1"
 })([""]);
 const Test3 = true ? styled.div.withConfig({
   displayName: "code__Test3",
-  componentId: "u20i28-2"
+  componentId: "sc-u20i28-2"
 })([""]) : styled.div.withConfig({
   displayName: "code__Test3",
-  componentId: "u20i28-3"
+  componentId: "sc-u20i28-3"
 })([""]);
 const styles = {
   One: styled.div.withConfig({
     displayName: "code__One",
-    componentId: "u20i28-4"
+    componentId: "sc-u20i28-4"
   })([""])
 };
 let Component;
 Component = styled.div.withConfig({
   displayName: "code__Component",
-  componentId: "u20i28-5"
+  componentId: "sc-u20i28-5"
 })([""]);
 const WrappedComponent = /*#__PURE__*/styled(Inner).withConfig({
   displayName: "code__WrappedComponent",
-  componentId: "u20i28-6"
+  componentId: "sc-u20i28-6"
 })([""]);
 const StyledObjectForm = /*#__PURE__*/styled.div.withConfig({
   displayName: "code__StyledObjectForm",
-  componentId: "u20i28-7"
+  componentId: "sc-u20i28-7"
 })({
   color: red
 });
 const StyledFunctionForm = /*#__PURE__*/styled.div.withConfig({
   displayName: "code__StyledFunctionForm",
-  componentId: "u20i28-8"
+  componentId: "sc-u20i28-8"
 })(p => ({
   color: p.color || 'red'
 }));

test/fixtures/minify-single-line-comments-with-interpolations/output.js

@@ -1,29 +1,29 @@
 import styled from 'styled-components';
 const Test1 = styled.div.withConfig({
   displayName: "code__Test1",
-  componentId: "kc0mjf-0"
+  componentId: "sc-kc0mjf-0"
 })(["width:100%;"]);
 const Test2 = styled.div.withConfig({
   displayName: "code__Test2",
-  componentId: "kc0mjf-1"
+  componentId: "sc-kc0mjf-1"
 })(["width:100%;"]);
 const Test3 = styled.div.withConfig({
   displayName: "code__Test3",
-  componentId: "kc0mjf-2"
+  componentId: "sc-kc0mjf-2"
 })(["width:100%;", ";"], 'red');
 const Test4 = styled.div.withConfig({
   displayName: "code__Test4",
-  componentId: "kc0mjf-3"
+  componentId: "sc-kc0mjf-3"
 })(["width:100%;"]);
 const Test5 = styled.div.withConfig({
   displayName: "code__Test5",
-  componentId: "kc0mjf-4"
+  componentId: "sc-kc0mjf-4"
 })(["width:100%;"]);
 const Test6 = styled.div.withConfig({
   displayName: "code__Test6",
-  componentId: "kc0mjf-5"
+  componentId: "sc-kc0mjf-5"
 })(["background:url(\"https://google.com\");width:100%;", " "], 'green');
 const Test7 = styled.div.withConfig({
   displayName: "code__Test7",
-  componentId: "kc0mjf-6"
+  componentId: "sc-kc0mjf-6"
 })(["background:url(\"https://google.com\");width:", ";", "  height:", ";"], p => p.props.width, 'green', p => p.props.height);

test/fixtures/track-the-imported-variable/output.js

@@ -1,27 +1,27 @@
 import s from "styled-components";
 const Test = s.div.withConfig({
   displayName: "Test",
-  componentId: "wyof43-0"
+  componentId: "sc-wyof43-0"
 })`width:100%;`;
 const Test2 = true ? s.div.withConfig({
   displayName: "Test2",
-  componentId: "wyof43-1"
+  componentId: "sc-wyof43-1"
 })`` : s.div.withConfig({
   displayName: "Test2",
-  componentId: "wyof43-2"
+  componentId: "sc-wyof43-2"
 })``;
 const styles = {
   One: s.div.withConfig({
     displayName: "One",
-    componentId: "wyof43-3"
+    componentId: "sc-wyof43-3"
   })``
 };
 let Component;
 Component = s.div.withConfig({
   displayName: "Component",
-  componentId: "wyof43-4"
+  componentId: "sc-wyof43-4"
 })``;
 const WrappedComponent = s(Inner).withConfig({
   displayName: "WrappedComponent",
-  componentId: "wyof43-5"
+  componentId: "sc-wyof43-5"
 })``;