diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js index 2b3112d1b..59a566d8b 100644 --- a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js +++ b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js @@ -1,6 +1,18 @@ import styled from 'styled-components'; -const Simple = styled.div`width:100%;`; -const Interpolation = styled.div`content:" ${(props)=>props.text} ";`; -const SpecialCharacters = styled.div`content:" ${(props)=>props.text} ";color:red;`; -const Comment = styled.div`color:red;`; -const Parens = styled.div`&:hover{color:blue;}`; +const Simple = styled.div([ + "width:100%;" +]); +const Interpolation = styled.div([ + 'content:" ', + ' ";' +], (props)=>props.text); +const SpecialCharacters = styled.div([ + 'content:" ', + ' ";color:red;' +], (props)=>props.text); +const Comment = styled.div([ + "color:red;" +]); +const Parens = styled.div([ + "&:hover{color:blue;}" +]); diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js index 656e3c57f..3b1d14524 100644 --- a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js +++ b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js @@ -1,7 +1,21 @@ import styled from 'styled-components'; -const Simple = styled.div`width:100%;`; -const Interpolation = styled.div`content:"https://test.com/${props => props.endpoint}";`; -const SpecialCharacters = styled.div`content:" ${props => props.text} ";color:red;`; -const Comment = styled.div`width:100%;color:red;`; -const Parens = styled.div`&:hover{color:blue;}color:red;`; -const UrlComments = styled.div`color:red;background:red;border:1px solid green;`; +const Simple = styled.div([ + "width:100%;" +]); +const Interpolation = styled.div([ + 'content:"https://test.com/', + '";' +], (props)=>props.endpoint); +const SpecialCharacters = styled.div([ + 'content:" ', + ' ";color:red;' +], (props)=>props.text); +const Comment = styled.div([ + "width:100%;color:red;" +]); +const Parens = styled.div([ + "&:hover{color:blue;}color:red;" +]); +const UrlComments = styled.div([ + "color:red;background:red;border:1px solid green;" +]); diff --git a/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js b/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js index eb1927db1..2ceaf100b 100644 --- a/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js +++ b/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js @@ -2,28 +2,47 @@ import styled from 'styled-components'; const Test1 = styled.div.withConfig({ displayName: "code__Test1", componentId: "sc-bfa13f91-0" -})`width:100%;`; +})([ + "width:100%;" +]); const Test2 = styled.div.withConfig({ displayName: "code__Test2", componentId: "sc-bfa13f91-1" -})`width:100%;`; +})([ + "width:100%;" +]); const Test3 = styled.div.withConfig({ displayName: "code__Test3", componentId: "sc-bfa13f91-2" -})`width:100%;${'red'};`; +})([ + "width:100%;", + ";" +], 'red'); const Test4 = styled.div.withConfig({ displayName: "code__Test4", componentId: "sc-bfa13f91-3" -})`width:100%;`; +})([ + "width:100%;" +]); const Test5 = styled.div.withConfig({ displayName: "code__Test5", componentId: "sc-bfa13f91-4" -})`width:100%;`; +})([ + "width:100%;" +]); const Test6 = styled.div.withConfig({ displayName: "code__Test6", componentId: "sc-bfa13f91-5" -})`background:url("https://google.com");width:100%;${'green'} `; +})([ + 'background:url("https://google.com");width:100%;', + " " +], 'green'); const Test7 = styled.div.withConfig({ displayName: "code__Test7", componentId: "sc-bfa13f91-6" -})`background:url("https://google.com");width:${(p)=>p.props.width};${'green'} height:${(p)=>p.props.height};`; +})([ + 'background:url("https://google.com");width:', + ";", + " height:", + ";" +], (p)=>p.props.width, 'green', (p)=>p.props.height); diff --git a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js index adac803bc..ae6c1a3ed 100644 --- a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js +++ b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js @@ -6,11 +6,15 @@ const { SomeOtherComponent } = require('../SomeOtherComponentPath'); */ const Thing = styled.div.withConfig({ displayName: "code__Thing", componentId: "sc-867225be-0" -})`color:red;`; +})([ + "color:red;" +]); const Thing2 = styled(Thing).withConfig({ displayName: "code__Thing2", componentId: "sc-867225be-1" -})`background:blue;`; +})([ + "background:blue;" +]); /* * Basic fixtures */ const StaticString = (p)=><_StyledP>A; @@ -82,7 +86,9 @@ const SpreadObjectPropMixedInputs = (p)=>{ const Thing3 = styled.div.withConfig({ displayName: "code__Thing3", componentId: "sc-867225be-2" -})`color:blue;`; +})([ + "color:blue;" +]); var _StyledThing6 = styled(Thing3).withConfig({ displayName: "code___StyledThing6", componentId: "sc-867225be-3" @@ -116,7 +122,9 @@ var _StyledThing3 = styled(Thing3).withConfig({ var _StyledThing = styled(Thing3).withConfig({ displayName: "code___StyledThing", componentId: "sc-867225be-7" -})`color:red;`; +})([ + "color:red;" +]); const EarlyUsageComponent2 = (p)=><_StyledThing2/>; function Thing4(props1) { return
; @@ -176,23 +184,33 @@ const ObjectPropWithSpread = ()=>{ var _StyledSomeComponent = styled(SomeComponent).withConfig({ displayName: "code___StyledSomeComponent", componentId: "sc-867225be-8" -})`color:red;`; +})([ + "color:red;" +]); var _StyledSomeOtherComponent = styled(SomeOtherComponent).withConfig({ displayName: "code___StyledSomeOtherComponent", componentId: "sc-867225be-9" -})`color:red;`; +})([ + "color:red;" +]); var _StyledThing2 = styled(Thing4).withConfig({ displayName: "code___StyledThing2", componentId: "sc-867225be-10" -})`color:red;`; +})([ + "color:red;" +]); var _StyledP = styled("p").withConfig({ displayName: "code___StyledP", componentId: "sc-867225be-11" -})`flex:1;`; +})([ + "flex:1;" +]); var _StyledP2 = styled("p").withConfig({ displayName: "code___StyledP2", componentId: "sc-867225be-12" -})`flex:1;`; +})([ + "flex:1;" +]); var _StyledP3 = styled("p").withConfig({ displayName: "code___StyledP3", componentId: "sc-867225be-13" @@ -202,55 +220,87 @@ var _StyledP3 = styled("p").withConfig({ var _StyledP4 = styled("p").withConfig({ displayName: "code___StyledP4", componentId: "sc-867225be-14" -})`flex:1;`; +})([ + "flex:1;" +]); var _StyledP5 = styled("p").withConfig({ displayName: "code___StyledP5", componentId: "sc-867225be-15" -})`color:blue;`; +})([ + "color:blue;" +]); var _StyledParagraph = styled(Paragraph).withConfig({ displayName: "code___StyledParagraph", componentId: "sc-867225be-16" -})`flex:1`; +})([ + "flex:1" +]); var _StyledP6 = styled("p").withConfig({ displayName: "code___StyledP6", componentId: "sc-867225be-17" -})`${(p)=>p.$_css}`; +})([ + "", + "" +], (p)=>p.$_css); var _StyledP7 = styled("p").withConfig({ displayName: "code___StyledP7", componentId: "sc-867225be-18" -})`background:${(p)=>p.$_css2};`; +})([ + "background:", + ";" +], (p)=>p.$_css2); var _StyledP8 = styled("p").withConfig({ displayName: "code___StyledP8", componentId: "sc-867225be-19" -})`color:${(props1)=>props1.theme.a};`; +})([ + "color:", + ";" +], (props1)=>props1.theme.a); var _StyledP9 = styled("p").withConfig({ displayName: "code___StyledP9", componentId: "sc-867225be-20" -})`border-radius:${radius}px;`; +})([ + "border-radius:", + "px;" +], radius); var _StyledP10 = styled("p").withConfig({ displayName: "code___StyledP10", componentId: "sc-867225be-21" -})`color:${(p)=>p.$_css3};`; +})([ + "color:", + ";" +], (p)=>p.$_css3); var _StyledP11 = styled("p").withConfig({ displayName: "code___StyledP11", componentId: "sc-867225be-22" -})`color:${(props1)=>props1.theme.color};`; +})([ + "color:", + ";" +], (props1)=>props1.theme.color); var _StyledButtonGhost = styled(Button.Ghost).withConfig({ displayName: "code___StyledButtonGhost", componentId: "sc-867225be-23" -})`flex:1`; +})([ + "flex:1" +]); var _StyledButtonGhostNew = styled(Button.Ghost.New).withConfig({ displayName: "code___StyledButtonGhostNew", componentId: "sc-867225be-24" -})`flex:1`; +})([ + "flex:1" +]); var _StyledButtonGhost2 = styled(button.ghost).withConfig({ displayName: "code___StyledButtonGhost2", componentId: "sc-867225be-25" -})`flex:1`; +})([ + "flex:1" +]); var _StyledButtonGhost3 = styled("button-ghost").withConfig({ displayName: "code___StyledButtonGhost3", componentId: "sc-867225be-26" -})`flex:1`; +})([ + "flex:1" +]); var _StyledP12 = styled("p").withConfig({ displayName: "code___StyledP12", componentId: "sc-867225be-27" diff --git a/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js index 2c5c07a68..fe1e69be4 100644 --- a/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js +++ b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js @@ -1,32 +1,28 @@ -"use strict"; - -function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - -var _styledComponents = _interopRequireWildcard(require("styled-components")); - -function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } - -function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } - -var Named = _styledComponents["default"].div.withConfig({ - displayName: "code__Named" -})(["\n width: 100%;\n"]); - -var NamedWithInterpolation = _styledComponents["default"].div.withConfig({ - displayName: "code__NamedWithInterpolation" -})(["\n color: ", ";\n"], function (color) { - return props.color; -}); - -var Wrapped = (0, _styledComponents["default"])(Inner).withConfig({ - displayName: "code__Wrapped" -})(["\n color: red;\n"]); - -var Foo = _styledComponents["default"].div.withConfig({ - displayName: "code__Foo" +import styled, { css, createGlobalStyle } from 'styled-components'; +const Named = styled.div.withConfig({ + displayName: "code__Named" +})([ + "\n width: 100%;\n" +]); +const NamedWithInterpolation = styled.div.withConfig({ + displayName: "code__NamedWithInterpolation" +})([ + "\n color: ", + ";\n" +], (color)=>props.color); +const Wrapped = styled(Inner).withConfig({ + displayName: "code__Wrapped" +})([ + "\n color: red;\n" +]); +const Foo = styled.div.withConfig({ + displayName: "code__Foo" })({ - color: 'green' + color: 'green' }); - -var style = (0, _styledComponents.css)(["\n background: green;\n"]); -var GlobalStyle = (0, _styledComponents.createGlobalStyle)(["\n html {\n background: silver;\n }\n"]); +const style = css([ + "\n background: green;\n" +]); +const GlobalStyle = createGlobalStyle([ + "\n html {\n background: silver;\n }\n" +]);