Prevent prefixing of displayName with sc-

src/utils/prefixLeadingDigit.js

@@ -0,0 +1,3 @@
+export default function prefixLeadingDigit(str) {
+  return str.replace(/^(\d)/i, 'sc-$1')
+}

src/visitors/displayNameAndId.js

@@ -7,6 +7,7 @@ import {
   useNamespace,
 } from '../utils/options'
 import getName from '../utils/getName'
+import prefixLeadingDigit from '../utils/prefixLeadingDigit'
 import prefixLeadingCharacter from '../utils/prefixLeadingCharacter'
 import hash from '../utils/hash'
 import { isStyled } from '../utils/detectors'
@@ -72,8 +73,8 @@ const getDisplayName = t => (path, state) => {
       return componentName
     }
     return componentName
-      ? `${prefixLeadingCharacter(blockName)}__${componentName}`
-      : prefixLeadingCharacter(blockName)
+      ? `${prefixLeadingDigit(blockName)}__${componentName}`
+      : prefixLeadingDigit(blockName)
   } else {
     return componentName
   }

test/fixtures/annotate-css-with-pure-comments/output.js

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 const partial = /*#__PURE__*/css(["color:red;"]);
 const Component = /*#__PURE__*/styled.div.withConfig({
-  displayName: "sc-code__Component",
+  displayName: "code__Component",
   componentId: "sc-4wpzk3-0"
 })(["", ";background:blue;"], partial);

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

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

test/fixtures/does-not-replace-native-with-no-tags/output.js

@@ -1,14 +1,14 @@
 const styled_default = require('styled-components/native');
 
 const TestNormal = styled.div.withConfig({
-  displayName: "sc-code__TestNormal",
+  displayName: "code__TestNormal",
   componentId: "sc-1w0epmj-0"
 })(["width:100%;"]);
 const Test = styled_default.default.div.withConfig({
-  displayName: "sc-code__Test",
+  displayName: "code__Test",
   componentId: "sc-1w0epmj-1"
 })(["width:100%;"]);
 const TestCallExpression = styled_default.default(Test).withConfig({
-  displayName: "sc-code__TestCallExpression",
+  displayName: "code__TestCallExpression",
   componentId: "sc-1w0epmj-2"
 })(["height:20px;"]);

test/fixtures/ignore-external-styled-import/output.js

@@ -1,7 +1,7 @@
 import { styled } from '@material/ui';
 import s from 'styled-components';
 const Paragraph = s.p.withConfig({
-  displayName: "sc-code__Paragraph",
+  displayName: "code__Paragraph",
   componentId: "sc-10i7tpl-0"
 })(["color:green;"]);
 

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

test/fixtures/transformed-imports-with-jsx-member-expressions/output.js

@@ -15,7 +15,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const someCss = (0, _styledComponents.css)([" background:purple;"]);
 
 var _StyledIcons = (0, _styledComponents.default)(_icons.default).withConfig({
-  displayName: "sc-code___StyledIcons",
+  displayName: "code___StyledIcons",
   componentId: "sc-1wxehft-0"
 })(["", ""], someCss);
 
@@ -24,7 +24,7 @@ const App1 = () => {
 };
 
 var _StyledIconsFoo = (0, _styledComponents.default)(_icons.default.Foo).withConfig({
-  displayName: "sc-code___StyledIconsFoo",
+  displayName: "code___StyledIconsFoo",
   componentId: "sc-1wxehft-1"
 })(["", ""], someCss);
 
@@ -33,7 +33,7 @@ const App2 = () => {
 };
 
 var _StyledIconsFooBar = (0, _styledComponents.default)(_icons.default.Foo.Bar).withConfig({
-  displayName: "sc-code___StyledIconsFooBar",
+  displayName: "code___StyledIconsFooBar",
   componentId: "sc-1wxehft-2"
 })(["", ""], someCss);
 

test/fixtures/transpile-css-prop-all-options-on/output.js

@@ -20,25 +20,25 @@ var _require = require('../SomeOtherComponentPath'),
 
 
 var _StyledSomeOtherComponent = (0, _styledComponents["default"])(SomeOtherComponent).withConfig({
-  displayName: "sc-code___StyledSomeOtherComponent",
+  displayName: "code___StyledSomeOtherComponent",
   componentId: "sc-7evkve-0"
 })(["color:red;"]);
 
 var Thing = _styledComponents["default"].div.withConfig({
-  displayName: "sc-code__Thing",
+  displayName: "code__Thing",
   componentId: "sc-7evkve-1"
 })(["color:red;"]);
 
 var Thing2 = (0, _styledComponents["default"])(Thing).withConfig({
-  displayName: "sc-code__Thing2",
+  displayName: "code__Thing2",
   componentId: "sc-7evkve-2"
 })(["background:blue;"]);
 /*
  * Basic fixtures
  */
 
 var _StyledP = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP",
+  displayName: "code___StyledP",
   componentId: "sc-7evkve-3"
 })(["flex:1;"]);
 
@@ -47,7 +47,7 @@ var StaticString = function StaticString(p) {
 };
 
 var _StyledP2 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP2",
+  displayName: "code___StyledP2",
   componentId: "sc-7evkve-4"
 })(["flex:1;"]);
 
@@ -58,7 +58,7 @@ var StaticTemplate = function StaticTemplate(p) {
 };
 
 var _StyledP3 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP3",
+  displayName: "code___StyledP3",
   componentId: "sc-7evkve-5"
 })({
   color: 'blue'
@@ -69,7 +69,7 @@ var ObjectProp = function ObjectProp(p) {
 };
 
 var _StyledP4 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP4",
+  displayName: "code___StyledP4",
   componentId: "sc-7evkve-6"
 })(["flex:1;"]);
 
@@ -78,7 +78,7 @@ var NoChildren = function NoChildren(p) {
 };
 
 var _StyledP5 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP5",
+  displayName: "code___StyledP5",
   componentId: "sc-7evkve-7"
 })(["color:blue;"]);
 
@@ -93,7 +93,7 @@ var CssHelperProp = function CssHelperProp(p) {
 
 
 var _StyledParagraph = (0, _styledComponents["default"])(Paragraph).withConfig({
-  displayName: "sc-code___StyledParagraph",
+  displayName: "code___StyledParagraph",
   componentId: "sc-7evkve-8"
 })(["flex:1"]);
 
@@ -102,7 +102,7 @@ var CustomComp = function CustomComp(p) {
 };
 
 var _StyledP6 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP6",
+  displayName: "code___StyledP6",
   componentId: "sc-7evkve-9"
 })(["", ""], function (p) {
   return p._css;
@@ -113,7 +113,7 @@ var DynamicProp = function DynamicProp(p) {
 };
 
 var _StyledP7 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP7",
+  displayName: "code___StyledP7",
   componentId: "sc-7evkve-10"
 })(["background:", ";"], function (p) {
   return p._css2;
@@ -126,7 +126,7 @@ var LocalInterpolation = function LocalInterpolation(p) {
 };
 
 var _StyledP8 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP8",
+  displayName: "code___StyledP8",
   componentId: "sc-7evkve-11"
 })(["color:", ";"], function (props) {
   return props.theme.a;
@@ -141,7 +141,7 @@ var FuncInterpolation = function FuncInterpolation(p) {
 var radius = 10;
 
 var _StyledP9 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP9",
+  displayName: "code___StyledP9",
   componentId: "sc-7evkve-12"
 })(["border-radius:", "px;"], radius);
 
@@ -152,7 +152,7 @@ var GlobalInterpolation = function GlobalInterpolation(p) {
 };
 
 var _StyledP10 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP10",
+  displayName: "code___StyledP10",
   componentId: "sc-7evkve-13"
 })(["color:", ";"], function (p) {
   return p._css3;
@@ -165,7 +165,7 @@ var LocalCssHelperProp = function LocalCssHelperProp(p) {
 };
 
 var _StyledP11 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP11",
+  displayName: "code___StyledP11",
   componentId: "sc-7evkve-14"
 })(["color:", ";"], function (props) {
   return props.theme.color;
@@ -178,7 +178,7 @@ var DynamicCssHelperProp = function DynamicCssHelperProp(p) {
 };
 
 var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost).withConfig({
-  displayName: "sc-code___StyledButtonGhost",
+  displayName: "code___StyledButtonGhost",
   componentId: "sc-7evkve-15"
 })(["flex:1"]);
 
@@ -187,7 +187,7 @@ var CustomCompWithDot = function CustomCompWithDot(p) {
 };
 
 var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).withConfig({
-  displayName: "sc-code___StyledButtonGhostNew",
+  displayName: "code___StyledButtonGhostNew",
   componentId: "sc-7evkve-16"
 })(["flex:1"]);
 
@@ -196,7 +196,7 @@ var NestedCompWithDot = function NestedCompWithDot(p) {
 };
 
 var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost).withConfig({
-  displayName: "sc-code___StyledButtonGhost2",
+  displayName: "code___StyledButtonGhost2",
   componentId: "sc-7evkve-17"
 })(["flex:1"]);
 
@@ -205,7 +205,7 @@ var CustomCompWithDotLowerCase = function CustomCompWithDotLowerCase(p) {
 };
 
 var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost").withConfig({
-  displayName: "sc-code___StyledButtonGhost3",
+  displayName: "code___StyledButtonGhost3",
   componentId: "sc-7evkve-18"
 })(["flex:1"]);
 
@@ -220,7 +220,7 @@ var getAfterValue = function getAfterValue() {
 };
 
 var _StyledP12 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP12",
+  displayName: "code___StyledP12",
   componentId: "sc-7evkve-19"
 })(function (p) {
   return {
@@ -244,7 +244,7 @@ var ObjectPropMixedInputs = function ObjectPropMixedInputs(p) {
 };
 
 var _StyledP13 = (0, _styledComponents["default"])("p").withConfig({
-  displayName: "sc-code___StyledP13",
+  displayName: "code___StyledP13",
   componentId: "sc-7evkve-20"
 })(function (p) {
   return _objectSpread(_objectSpread({}, _objectSpread({
@@ -287,12 +287,12 @@ var EarlyUsageComponent = function EarlyUsageComponent(p) {
 };
 
 var Thing3 = _styledComponents["default"].div.withConfig({
-  displayName: "sc-code__Thing3",
+  displayName: "code__Thing3",
   componentId: "sc-7evkve-21"
 })(["color:blue;"]);
 
 var _StyledThing = (0, _styledComponents["default"])(Thing3).withConfig({
-  displayName: "sc-code___StyledThing",
+  displayName: "code___StyledThing",
   componentId: "sc-7evkve-22"
 })(["color:red;"]);
 
@@ -307,12 +307,12 @@ function Thing4(props) {
 
 
 var _StyledThing2 = (0, _styledComponents["default"])(Thing4).withConfig({
-  displayName: "sc-code___StyledThing2",
+  displayName: "code___StyledThing2",
   componentId: "sc-7evkve-23"
 })(["color:red;"]);
 
 var _StyledSomeComponent = (0, _styledComponents["default"])(_SomeComponentPath["default"]).withConfig({
-  displayName: "sc-code___StyledSomeComponent",
+  displayName: "code___StyledSomeComponent",
   componentId: "sc-7evkve-24"
 })(["color:red;"]);