Skip to content

Commit

Permalink
Ensure sc- prefix is always added
Browse files Browse the repository at this point in the history
  • Loading branch information
chalbert committed Feb 18, 2021
1 parent 950692b commit 67449ed
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 31 deletions.
4 changes: 1 addition & 3 deletions src/visitors/displayNameAndId.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,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) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
})``;
18 changes: 9 additions & 9 deletions test/fixtures/annotate-styled-calls-with-pure-comments/output.js
Original file line number Diff line number Diff line change
@@ -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'
}));
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
12 changes: 6 additions & 6 deletions test/fixtures/track-the-imported-variable/output.js
Original file line number Diff line number Diff line change
@@ -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"
})``;

0 comments on commit 67449ed

Please sign in to comment.