Update stylis (#764)

* Update stylis

* Change prettier settings for stylis.min.js

* Add notes about things that can be removed in stylis build script in the future

* Make stylis smaller and update some snapshots, it's just about :global which we don't support so it doesn't matter

* Update other snapshots

* Update a stylis test

* Add more tests from stylis' tests

next-packages/stylis/__tests__/__snapshots__/index.js.snap

@@ -79,7 +79,7 @@ Array [
   ".css-37 .List :global(*) :global(+) :global(*){margin-top:10px;}",
   ".css-37 .List :global(> *){margin-top:10px;}",
   ".css-37 .List :global(* + *){margin-top:10px;}",
-  ".css-37 :global(.foo #bar > baz){color:red;}",
+  ".css-37:global(.foo #bar > baz){color:red;}",
   ".css-37 div :global(.react-select .some-child-of-react-select){color:red;}",
   ".css-37 .root > :global(*):not(header){color:red;}",
   ".css-37 a:matches( a +b foo:hover :global(marquee) a) > :hover{color:red;}",
@@ -89,7 +89,7 @@ Array [
 exports[`cascade isolation nesting 1`] = `
 Array [
   ".css-39{color:red;}",
-  ".css-39 h1 :global(section){color:red;}",
+  ".css-39 h1:global(section){color:red;}",
   ".css-39 h1 h2{color:red;}",
   ".css-39 div h1,.css-39 span h1{color:red;}",
   ".css-39 span:hover{color:red;}",
@@ -123,7 +123,14 @@ Array [
 ]
 `;
 
-exports[`comments 1`] = `Array []`;
+exports[`comments 1`] = `
+Array [
+  ".css-7{/*! 1 */color:red;/*! 2 */}",
+  ".css-7 button{color:blue;}",
+  ".css-7 button{color:red;}",
+  ".css-7 h1{/*! 1 */color:red;/*! 2 */color:red;/*! 3 */}",
+]
+`;
 
 exports[`complex nested selector 1`] = `
 Array [
@@ -228,8 +235,8 @@ Array [
 
 exports[`nested 1`] = `
 Array [
-  ".css-28 :global(div) h2{color:red;}",
-  ".css-28 :global(div) h2 h3{color:blue;}",
+  ".css-28:global(div) h2{color:red;}",
+  ".css-28:global(div) h2 h3{color:blue;}",
   ".foo .css-28{width:1px;}",
   ".foo .css-28:hover{color:black;}",
   ".foo .css-28 li{color:white;}",

next-packages/stylis/__tests__/index.js

@@ -6,7 +6,8 @@ const specs: Array<{
   name: string,
   sample: string,
   skip?: boolean,
-  only?: boolean
+  only?: boolean,
+  expected?: string
 }> = [
   {
     name: 'calc rules',
@@ -41,8 +42,34 @@ const specs: Array<{
   },
   {
     name: 'comments',
-    sample:
-      "// line comment// color: red;/** * removes block comments and line comments, * there's a fire in the house // there is */button /* // what's xxx  */{color: blue;}// hellobutton /* 1 */{color: red; /* 2 */}"
+    sample: `
+    // line comment
+    // color: red;
+    /**
+     * removes block comments and line comments,
+     * there's a fire in the house // there is
+     */
+    button /*
+       // what's
+       xxx
+      */
+    {color: blue;}
+    // hello
+    button /* 1 */
+    {
+      color: red; /* 2 */
+    }
+    /*! 1 */
+    color: red;
+    /*! 2 */
+    h1 {
+      /*! 1 */
+      color: red;
+      /*! 2 */
+      color: red;
+      /*! 3 */
+    }
+  `
   },
   {
     name: '&',
@@ -229,6 +256,37 @@ const specs: Array<{
     name: 'complex nested selector',
     sample:
       '&:hover{color:blue;&:active{color:red;}}font-size:2rem;padding:16px;&:hover{color:pink;&:active{color:purple;}&.some-class{color:yellow;}}'
+  },
+  {
+    name: 'more comments',
+    sample: `.a{color:red; /*// */}`,
+    expected: `.user .a{color:red;}`
+  },
+  {
+    name: 'comments(context character IV)',
+    sample: `.a{/**/color:red}`,
+    expected: `.user .a{color:red;}`
+  },
+  {
+    name: 'comments(context character V)',
+    sample: `.a{color:red;/*//
+    color:blue;*/}`,
+    expected: `.user .a{color:red;}`
+  },
+  {
+    name: 'comments(context character VI)',
+    sample: `background: url("img}.png");.a {background: url("img}.png");}`,
+    expected: `.user{background:url("img}.png");}.user .a{background:url("img}.png");}`
+  },
+  {
+    name: 'comments(context character VII)',
+    sample: `background: url(img}.png);.a {background: url(img}.png);}`,
+    expected: `.user{background:url(img}.png);}.user .a{background:url(img}.png);}`
+  },
+  {
+    name: 'comments(context character VIII)',
+    sample: `background: url[img}.png];.a {background: url[img}.png];}`,
+    expected: `.user{background:url[img}.png];}.user .a{background:url[img}.png];}`
   }
 ]
 
@@ -250,9 +308,14 @@ specs.forEach((spec, i) => {
     const plugin = stylisRuleSheet(rule => {
       out.push(rule)
     })
+    let selector = spec.expected ? '.user' : `.css-${i}`
     stylis.use(null)(plugin)
-    stylis(`.css-${i}`, spec.sample)
-    expect(out).toMatchSnapshot()
-    expect(out.join('')).toEqual(regularStylis(`.css-${i}`, spec.sample))
+    stylis(selector, spec.sample)
+    if (spec.expected) {
+      expect(out.join('')).toEqual(spec.expected)
+    } else {
+      expect(out).toMatchSnapshot()
+    }
+    expect(out.join('')).toEqual(regularStylis(selector, spec.sample))
   })
 })

next-packages/stylis/build.js

@@ -13,6 +13,7 @@ const recast = require('recast')
 const readFile = promisify(fs.readFile)
 const writeFile = promisify(fs.writeFile)
 
+// can be removed after https://github.com/thysultan/stylis.js/pull/111
 const removeUselessThingForQuotes = src =>
   j(src)
     .find(j.SwitchStatement, {
@@ -33,6 +34,7 @@ const removeUselessThingForQuotes = src =>
     })
     .toSource()
 
+// can be removed after https://github.com/thysultan/stylis.js/pull/112
 const removeUselessCasesInProxy = src =>
   j(src)
     .find(j.FunctionDeclaration, { id: { name: 'proxy' } })
@@ -129,6 +131,7 @@ async function doThing() {
       'comment + quote + parentheses + bracket + semicolon === 0',
       'true === false'
     )
+    .replace('switch (selector.charCodeAt(1))', 'switch (100)')
     .replace('(insert === 1)', '(true === false)')
     .replace('input.charCodeAt(9)*keyed', '0')
     .replace('switch (cascade + level) {', 'switch (2) {')
@@ -161,7 +164,10 @@ async function doThing() {
     srcWithoutUMDWrapper +
     '\nexport default ' +
     (ast.declarations ? ast.declarations[0].id.name : ast.id.name)
-  await writeFile('./src/stylis.min.js', prettier.format(finalSrc))
+  await writeFile(
+    './src/stylis.min.js',
+    prettier.format(finalSrc, { semi: false, singleQuote: true })
+  )
 
   console.log('done')
 }

next-packages/stylis/package.json

@@ -22,7 +22,7 @@
     "jscodeshift": "^0.5.0",
     "request": "^2.85.0",
     "request-promise-native": "^1.0.5",
-    "stylis": "^3.5.1"
+    "stylis": "3.5.3"
   },
   "umd:main": "./dist/index.min.js"
 }