fix: assume non-class name selectors to be critical (#250)

For apps using a plugin such as MiniCssExtractPlugin and importing plain CSS files, the global CSS will often be in the same CSS file as the CSS extracted by Linaria. Previously, collect would place these styles in 'other', which would cause a FOUC. There's an undocumented 'globalCSS' argument, but it's not reasonable to manually specify it when you have already imported it in the app.

This PR only checks class name based selectors to determine if they are critical and for all other styles, it will place them in the critical CSS. This handles global CSS without any manual work. This also removes the 'globalCSS' argument because it's not needed anymore.

docs/API.md

@@ -134,7 +134,7 @@ const FancyButton = styled(Button)`
 
 ### `collect(html: string, css: string) => string`
 
-Takes HTML and CSS strings and returns the critical CSS used in the page by analyzing the class names. It can be used to detrmine critical CSS for server side rendering.
+Takes HTML and CSS strings and returns the critical CSS used in the page by analyzing the class names. It can be used to determine critical CSS for server side rendering.
 
 ```js
 import { collect } from 'linaria/server';
@@ -146,3 +146,7 @@ const { critical, other } = collect(html, css);
 // critical – returns critical CSS for given html
 // other – returns the rest of styles
 ```
+
+This will only detect critical CSS based on class names, so if you have any other type of selectors, they'll get added to the critical CSS.
+
+Also note that extracting critical CSS this way will change the order of class names. It's not a problem if you're primarily using Linaria for styling. However if you're using a third party framework which imports its own CSS, then it's not recommended to use this helper on the extracted CSS.

src/server/__tests__/__snapshots__/collect.test.js.snap

@@ -274,11 +274,9 @@ exports[`works with global css critical 1`] = `
 "body {
   font-size: 13.37px;
 }
-
 html {
   -webkit-font-smoothing: antialiased;
 }
-
 h1 {
   font-weight: bold;
 }

src/server/__tests__/collect.test.js

@@ -183,28 +183,21 @@ describe('works with pseudo-class and pseudo-elements', () => {
 
 describe('works with global css', () => {
   const css = dedent`
+    body { font-size: 13.37px; }
+
+    html { -webkit-font-smoothing: antialiased; }
+
+    h1 { font-weight: bold; }
+
     .linaria:active {}
     .linaria::before {}
 
     .other:active {}
     .other::before {}
   `;
 
-  const globalCSS = dedent`
-    body {
-      font-size: 13.37px;
-    }
-
-    html {
-      -webkit-font-smoothing: antialiased;
-    }
-
-    h1 {
-      font-weight: bold;
-    }
-  `;
+  const { critical, other } = collect(html, css);
 
-  const { critical, other } = collect(html, css, globalCSS);
   test('critical', () => expect(prettyPrint(critical)).toMatchSnapshot());
   test('other', () => expect(prettyPrint(other)).toMatchSnapshot());
 });

src/server/collect.js

@@ -11,20 +11,28 @@ type CollectResult = {
 
 const collect = (
   html /* : string */,
-  css /* : string */,
-  globalCSS /* : ?string */
+  css /* : string */
 ) /* : CollectResult */ => {
   const animations = new Set();
   const other = postcss.root();
   const critical = postcss.root();
   const stylesheet = postcss.parse(css);
   const htmlClassesRegExp = extractClassesFromHtml(html);
 
+  const isCritical = rule => {
+    // Only check class names selectors
+    if (rule.selector.startsWith('.')) {
+      return Boolean(rule.selector.match(htmlClassesRegExp));
+    }
+
+    return true;
+  };
+
   const handleAtRule = rule => {
     let addedToCritical = false;
 
     rule.each(childRule => {
-      if (childRule.selector.match(htmlClassesRegExp)) {
+      if (isCritical(childRule)) {
         critical.append(rule.clone());
         addedToCritical = true;
       }
@@ -51,7 +59,7 @@ const collect = (
       return;
     }
 
-    if (rule.selector.match(htmlClassesRegExp)) {
+    if (isCritical(rule)) {
       critical.append(rule);
     } else {
       other.append(rule);
@@ -69,7 +77,7 @@ const collect = (
   });
 
   return {
-    critical: (globalCSS || '') + critical.toString(),
+    critical: critical.toString(),
     other: other.toString(),
   };
 };