feat: add opt-in fix for pseudo-elements

* add fix for pseudo elements

* only replace classname if it exists

* use correct variable

* run prettier

* fix example

* hide fix behind a flag

* fix typo

Author: hipstersmoothie

README.md

@@ -43,7 +43,7 @@ module.exports = (storybookBaseConfig, configType) => {
   newConfig.output.library = "[name]";
 
   return newConfig;
-}
+};
 ```
 
 Manually export the `getStorybook` function in your `./config/storybook/config.js` file:
@@ -67,6 +67,7 @@ story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.j
 As stated by [`react-sketchapp`](https://github.com/airbnb/react-sketchapp), it's complicated to manage assets in a design system. Many teams building design systems or component libraries already produce Sketch files for distributing designs and use [Storybook](https://storybook.js.org) to prototype and present the developed components. It can become difficult to keep designs up to date with the latest components, with designers ever playing catchup. `story2sketch` generates a Sketch file from your components via Storybook, so your Sketch designs always stay up to date.
 
 <a name="configuration"><a/>
+
 ## Configuration
 
 You can configure `story2sketch` using [the API](#api) via the CLI, configuring your `package.json` or adding a `story2sketch.config.js` file.
@@ -90,7 +91,6 @@ Add the following to your package.json:
     "output": "dist/great-ui.asketch.json"
   }
 }
-
 ```
 
 ### story2sketch.config.js
@@ -101,24 +101,26 @@ Create a file called `story2sketch.config.js` on the root of your project:
 module.exports = {
   output: "dist/great-ui.asketch.json",
   stories: "all"
-}
+};
 ```
 
 <a name="api"><a/>
+
 ## API
 
-| Parameter        | Explanation                                                                                                                             | Input Type    | Default                                                                             |
-|------------------|-----------------------------------------------------------------------------------------------------------------------------------------|---------------|-------------------------------------------------------------------------------------|
-| output           | Specifies the filename for the generated asketch.json file.                                                                             | string        | `"dist/stories.asketch.json"`                                                       |
-| input            | The location of Storybook's generated iframe.html. Use this over `url` if possible for performance.                                     | string        | `"dist/iframe.html"`                                                                |
-| url              | Storybook iframe URL. Will end in `iframe.html`. Prefer `input` for performance if possible.                                            | string        | `"http://localhost:9001/iframe.html"`                                               |
-| stories          | Stories to extract from Storybook. You should probably override the default.                                                            | object/string | `"all"`                                                                             |
-| concurrency      | Number of headless Chrome tabs to run in parallel. Drastically impacts performance.                                                     | integer       | `4`                                                                                 |
-| symbolGutter     | Gutter to place between symbols in Sketch.                                                                                              | integer       | `100`                                                                               |
-| viewports        | Viewport configuration. Will be arranged left-to-right by width. Try to avoid changing the key, as this is used to identify the symbol. | object        | Mobile viewport (320px wide) and desktop viewport (1920px wide). See example below. |
-| querySelector    | Query selector to select your node on each page.  Uses `document.querySelectorAll`.                                                     | string        | `"#root"`                                                                           |
-| verbose          | Verbose logging output.                                                                                                                 | boolean       | `false`                                                                             |
-| puppeteerOptions | Options to be passed directly to `puppeteer.launch`. See [puppeteer docs](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) for usage.                                                    | object        | `{}`                                                                                |
+| Parameter        | Explanation                                                                                                                                                                    | Input Type    | Default                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------- |
+| output           | Specifies the filename for the generated asketch.json file.                                                                                                                    | string        | `"dist/stories.asketch.json"`                                                       |
+| input            | The location of Storybook's generated iframe.html. Use this over `url` if possible for performance.                                                                            | string        | `"dist/iframe.html"`                                                                |
+| url              | Storybook iframe URL. Will end in `iframe.html`. Prefer `input` for performance if possible.                                                                                   | string        | `"http://localhost:9001/iframe.html"`                                               |
+| stories          | Stories to extract from Storybook. You should probably override the default.                                                                                                   | object/string | `"all"`                                                                             |
+| concurrency      | Number of headless Chrome tabs to run in parallel. Drastically impacts performance.                                                                                            | integer       | `4`                                                                                 |
+| symbolGutter     | Gutter to place between symbols in Sketch.                                                                                                                                     | integer       | `100`                                                                               |
+| viewports        | Viewport configuration. Will be arranged left-to-right by width. Try to avoid changing the key, as this is used to identify the symbol.                                        | object        | Mobile viewport (320px wide) and desktop viewport (1920px wide). See example below. |
+| querySelector    | Query selector to select your node on each page. Uses `document.querySelectorAll`.                                                                                             | string        | `"#root"`                                                                           |
+| verbose          | Verbose logging output.                                                                                                                                                        | boolean       | `false`                                                                             |
+| fixPseudo        | Attempt to insert real elements in place of pseudo-elements                                                                                                                    | boolean       | `false`                                                                             |
+| puppeteerOptions | Options to be passed directly to `puppeteer.launch`. See [puppeteer docs](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) for usage. | object        | `{}`                                                                                |
 
 ### Example story2sketch.config.js
 
@@ -171,11 +173,11 @@ module.exports = {
       ]
     }
   ]
-}
+};
 ```
 
-
 <a name="questions"><a/>
+
 ## Questions
 
 ### Why does my stuff look bad?

src/browser/page2layers.js

@@ -7,11 +7,80 @@ import {
 const getNodeName = node =>
   node.id || node.className || node.nodeName.toLowerCase();
 
+const fixPseudoElements = () => {
+  // Hide old pseudo-elements during render
+  const css =
+    ".before-reset::before, .after-reset::after { content: none !important; }";
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(css));
+  head.appendChild(style);
+
+  const allElements = document.querySelectorAll("body *");
+  const oldFakes = document.querySelectorAll("body .fake-pseudo");
+
+  // Remove old fake pseudo-elements to handle multiple screen sizes
+  if (oldFakes) {
+    Array.from(oldFakes).map(el => el.remove());
+  }
+
+  for (let i = 0; i < allElements.length; i++) {
+    // Remove reset so we can get the screen sizes pseudo-element styles
+    if (
+      allElements[i].className &&
+      typeof allElements[i].className === "string"
+    ) {
+      allElements[i].className = allElements[i].className.replace(
+        "before-reset",
+        ""
+      );
+      allElements[i].className = allElements[i].className.replace(
+        "after-reset",
+        ""
+      );
+    }
+
+    const elementBeforeStyles = window.getComputedStyle(
+      allElements[i],
+      ":before"
+    );
+    const elementAfterStyles = window.getComputedStyle(
+      allElements[i],
+      ":after"
+    );
+    const elementBeforeContent = elementBeforeStyles.content;
+    const elementAfterContent = elementAfterStyles.content;
+
+    if (elementBeforeContent && elementBeforeContent !== "none") {
+      const virtualBefore = document.createElement("span");
+
+      virtualBefore.className = "fake-pseudo";
+      virtualBefore.setAttribute("style", elementBeforeStyles.cssText);
+      virtualBefore.innerHTML = elementBeforeStyles.content.split('"').join("");
+      allElements[i].className += " before-reset";
+      allElements[i].prepend(virtualBefore);
+    }
+
+    if (elementAfterContent && elementAfterContent !== "none") {
+      const virtualAfter = document.createElement("span");
+
+      virtualAfter.className = "fake-pseudo";
+      virtualAfter.setAttribute("style", elementAfterStyles.cssText);
+      virtualAfter.innerHTML = elementAfterStyles.content.split('"').join("");
+      allElements[i].className += " after-reset";
+      allElements[i].appendChild(virtualAfter);
+    }
+  }
+};
+
 export const getSymbol = ({
   name = "symbol",
   x = 0,
   y = 0,
-  querySelector = "#root"
+  querySelector = "#root",
+  fixPseudo = false
 } = {}) => {
   let nodes;
 
@@ -25,6 +94,10 @@ export const getSymbol = ({
     return null;
   }
 
+  if (fixPseudo) {
+    fixPseudoElements();
+  }
+
   const layer = nodeTreeToSketchGroup(nodes, {
     getGroupName: getNodeName,
     getRectangleName: getNodeName

src/server/Story2sketch.js

@@ -32,6 +32,7 @@ export default class Story2sketch {
     symbolGutter = defaultSymbolGutter,
     querySelector = "#root",
     verbose = false,
+    fixPseudo = false,
     stories,
     puppeteerOptions = {}
   }) {
@@ -44,6 +45,7 @@ export default class Story2sketch {
     this.querySelector = querySelector;
     this.stories = stories;
     this.verbose = verbose;
+    this.fixPseudo = fixPseudo;
     this.puppeteerOptions = puppeteerOptions;
 
     // Sort viewports by width
@@ -195,7 +197,8 @@ export default class Story2sketch {
       // Only prefix if symbolPrefix is defined
       const params = JSON.stringify({
         name: `${symbolPrefix}${name}`,
-        querySelector: this.querySelector
+        querySelector: this.querySelector,
+        fixPseudo: this.fixPseudo
       });
 
       // JSON.parse + JSON.stringify hack was originally used until

src/server/getStorybook.js

@@ -5,5 +5,7 @@ export default async (browser, iframeUrl) => {
     waitUntil: "networkidle2"
   });
 
-  return page.evaluate("(typeof preview === 'object' && typeof preview.getStorybook !== 'undefined') ? preview.getStorybook() : __STORYBOOK_CLIENT_API__.getStorybook()");
+  return page.evaluate(
+    "(typeof preview === 'object' && typeof preview.getStorybook !== 'undefined') ? preview.getStorybook() : __STORYBOOK_CLIENT_API__.getStorybook()"
+  );
 };