diff --git a/packages/babel-plugin-emotion/package.json b/packages/babel-plugin-emotion/package.json index c47b46b56..c1278d278 100644 --- a/packages/babel-plugin-emotion/package.json +++ b/packages/babel-plugin-emotion/package.json @@ -21,6 +21,7 @@ "emotion-utils": "^8.0.11", "find-root": "^1.1.0", "source-map": "^0.5.7", + "stylis": "^3.4.5", "touch": "^1.0.0" }, "devDependencies": { diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js index a39c30d2b..37be24c50 100644 --- a/packages/babel-plugin-emotion/src/index.js +++ b/packages/babel-plugin-emotion/src/index.js @@ -18,7 +18,8 @@ import type { StringLiteral, Babel } from 'babel-flow-types' -import { hashString, Stylis, memoize } from 'emotion-utils' +import { hashString, memoize } from 'emotion-utils' +import Stylis from 'stylis' import { addSourceMaps } from './source-map' import cssProps from './css-prop' diff --git a/packages/create-emotion/package.json b/packages/create-emotion/package.json index 77de4ad2c..ffd3e2847 100644 --- a/packages/create-emotion/package.json +++ b/packages/create-emotion/package.json @@ -17,8 +17,8 @@ }, "dependencies": { "emotion-utils": "^8.0.11", - "stylis": "^3.3.2", - "stylis-rule-sheet": "^0.0.5" + "stylis": "^3.4.5", + "stylis-rule-sheet": "^0.0.7" }, "devDependencies": { "@types/react": "16.0.16", diff --git a/packages/create-emotion/src/index.js b/packages/create-emotion/src/index.js index 0e5428453..0ce55d7f3 100644 --- a/packages/create-emotion/src/index.js +++ b/packages/create-emotion/src/index.js @@ -1,5 +1,6 @@ // @flow -import { hashString, Stylis, STYLES_KEY, TARGET_KEY } from 'emotion-utils' +import { hashString, STYLES_KEY, TARGET_KEY } from 'emotion-utils' +import Stylis from 'stylis' import stylisRuleSheet from 'stylis-rule-sheet' import { processStyleName, diff --git a/packages/emotion-utils/src/index.js b/packages/emotion-utils/src/index.js index 6c3139b38..8bff0ad7a 100644 --- a/packages/emotion-utils/src/index.js +++ b/packages/emotion-utils/src/index.js @@ -58,4 +58,3 @@ export const unitless = { } export { hashString } from './hash' -export { default as Stylis } from './stylis' diff --git a/packages/emotion-utils/src/stylis.js b/packages/emotion-utils/src/stylis.js deleted file mode 100644 index 479144cd7..000000000 --- a/packages/emotion-utils/src/stylis.js +++ /dev/null @@ -1,23 +0,0 @@ -var oa=function ea(fa){function V(b,c,d,k,l){for(var a=0,f=0,m=0,e=0,q,p,h,w=0,C=0,D=0,z=0,n=q=0,F=0,r=0,y=p=0,K=0,u=0,L=d.length,M=L-1,v,g="",t="",S="",N="",G;rq)&&(u=(g=g.replace(" ",":")).length),0D||1>w[D-1].length)e=m+J+e}break;case 44:m="";default:e=1l&&(l=(c=c.trim()).charCodeAt(0));switch(l){case 38:switch(B+k){case 0:case 1:if(0===b.trim().length)break;default:return c.replace(M, - "$1"+b.trim())}break;case 58:switch(c.charCodeAt(1)){case 103:if(0e||96e||95===e||45===e&&45!==f.charCodeAt(1)))switch(isNaN(parseFloat(f))+(-1!==f.indexOf("("))){case 1:switch(f){case "infinite":case "alternate":case "backwards":case "running":case "normal":case "forwards":case "both":case "none":case "linear":case "ease":case "ease-in":case "ease-out":case "ease-in-out":case "paused":case "reverse":case "alternate-reverse":case "inherit":case "initial":case "unset":case "step-start":case "step-end":break; - default:f+=T}}m[b++]=f}k+=(0===c?"":",")+m.join(" ")}}k=d+k+";";return 1===x||2===x&&U(k,1)?"-webkit-"+k+k:k}if(0===x||2===x&&!U(a,1))return a;switch(c){case 1015:return 45===a.charCodeAt(9)?"-webkit-"+a+a:a;case 951:return 116===a.charCodeAt(3)?"-webkit-"+a+a:a;case 963:return 110===a.charCodeAt(5)?"-webkit-"+a+a:a;case 1009:if(100!==a.charCodeAt(4))break;case 969:case 942:return"-webkit-"+a+a;case 978:return"-webkit-"+a+"-moz-"+a+a;case 1019:case 983:return"-webkit-"+a+"-moz-"+a+"-ms-"+a+a;case 883:return 45=== - a.charCodeAt(8)?"-webkit-"+a+a:a;case 932:if(45===a.charCodeAt(4))switch(a.charCodeAt(5)){case 103:return"-webkit-box-"+a.replace("-grow","")+"-ms-"+a.replace("grow","positive")+a;case 115:return"-ms-"+a.replace("shrink","negative")+a;case 98:return"-ms-"+a.replace("basis","preferred-size")+a}return"-webkit-"+a+"-ms-"+a+a;case 964:return"-webkit-"+a+"-ms-flex-"+a+a;case 1023:if(99!==a.charCodeAt(8))break;b=a.substring(a.indexOf(":",15)).replace("flex-","").replace("space-between","justify");return"-webkit-box-pack"+ - b+"-webkit-"+a+"-ms-flex-pack"+b+a;case 1005:return Aa.test(a)?a.replace(ma,":-webkit-")+a.replace(ma,":-moz-")+a:a;case 1E3:b=a.substring(13).trim();l=b.indexOf("-")+1;switch(b.charCodeAt(0)+b.charCodeAt(l)){case 226:b=a.replace(N,"tb");break;case 232:b=a.replace(N,"tb-rl");break;case 220:b=a.replace(N,"lr");break;default:return a}return"-webkit-"+a+"-ms-"+b+a;case 1017:if(-1===a.indexOf("sticky",9))break;case 975:l=(a=b).length-10;b=(33===a.charCodeAt(l)?a.substring(0,l):a).substring(b.indexOf(":", - 7)+1).trim();switch(c=b.charCodeAt(0)+(b.charCodeAt(7)|0)){case 203:if(111>b.charCodeAt(8))break;case 115:a=a.replace(b,"-webkit-"+b)+";"+a;break;case 207:case 102:a=a.replace(b,"-webkit-"+(102k&&(k=(d=d.trim()).charCodeAt(0));0])/g,Ha=/([[}=:>])\s+/g,Ia=/(\{[^{]+?);(?=\})/g,Ja=/\s{2,}/g,ua=/([^\(])(:+) */g,N=/[svh]\w+-[tblr]{2}/,qa=/\(\s*(.*)\s*\)/g,Ea=/([^]*?);/g,Ba=/-self|flex-/g,Da=/[^]*?(:[rp][el]a[\w-]+)[^]*/,A=1,H=1,I=0,B=1,x=1,Y=1,na=0,ja=0,X=0,W=[],ba=[],E=0,aa=null,ka=0,Q=1, - T="",J="",R="";y.use=ca;y.set=da;void 0!==fa&&da(fa);return y}; - export default oa \ No newline at end of file diff --git a/packages/emotion/test/__snapshots__/css.test.js.snap b/packages/emotion/test/__snapshots__/css.test.js.snap index fb92ef2b1..d1766c6f8 100644 --- a/packages/emotion/test/__snapshots__/css.test.js.snap +++ b/packages/emotion/test/__snapshots__/css.test.js.snap @@ -322,6 +322,17 @@ exports[`css media query specificity 2`] = ` /> `; +exports[`css multiline declaration 1`] = ` +.glamor-0 { + display: grid; + grid: 'AppBar' auto 'Main' 1fr / 1fr / 1fr 1fr / 1fr1fr / 1fr1fr / 1fr1fr / 1fr1fr / 1fr auto 'Main' 1fr / 1fr / 1fr 1fr / 1fr1fr / 1fr1fr / 1fr1fr / 1fr1fr / 1fr; +} + +
+`; + exports[`css nested 1`] = ` .glamor-0 { color: yellow; diff --git a/packages/emotion/test/css.test.js b/packages/emotion/test/css.test.js index 7ccab47eb..67730faf7 100644 --- a/packages/emotion/test/css.test.js +++ b/packages/emotion/test/css.test.js @@ -361,4 +361,14 @@ describe('css', () => { expect(tree).toMatchSnapshot() expect(sheet).toMatchSnapshot() }) + test('multiline declaration', () => { + const cls1 = css` + display: grid; + grid: 'AppBar' auto 'Main' 1fr / 1fr / 1fr 1fr / 1fr1fr / 1fr1fr / 1fr1fr / + 1fr1fr / 1fr auto 'Main' 1fr / 1fr / 1fr 1fr / 1fr1fr / 1fr1fr / 1fr1fr / + 1fr1fr / 1fr; + ` + const tree = renderer.create(
).toJSON() + expect(tree).toMatchSnapshot() + }) }) diff --git a/packages/emotion/test/insertion.test.js b/packages/emotion/test/insertion.test.js index a18d309c6..bc821e4c1 100644 --- a/packages/emotion/test/insertion.test.js +++ b/packages/emotion/test/insertion.test.js @@ -1,5 +1,5 @@ // @flow -import { Stylis } from 'emotion-utils' +import Stylis from 'stylis' import stylisRuleSheet from 'stylis-rule-sheet' const specs = [ diff --git a/yarn.lock b/yarn.lock index f274249e3..50a9ea91f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9130,13 +9130,13 @@ styled-components@^2.2.1: stylis "^3.2.1" supports-color "^3.2.3" -stylis-rule-sheet@^0.0.5: - version "0.0.5" - resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.5.tgz#ebae935cc1f6fb31b9b62dba47f2ea8b833dad9f" +stylis-rule-sheet@^0.0.7: + version "0.0.7" + resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c" -stylis@^3.2.1, stylis@^3.3.2: - version "3.3.2" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea" +stylis@^3.2.1, stylis@^3.4.5: + version "3.4.5" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e" supports-color@^2.0.0: version "2.0.0"