-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0172342
commit a93b939
Showing
11 changed files
with
355 additions
and
322 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,85 @@ | ||
| const puppeteer = require("puppeteer"); | ||
| const puppeteer = require('puppeteer') | ||
|
|
||
| function InvalidUrlError({ url, statusCode, statusText }) { | ||
| this.name = "InvalidUrlError"; | ||
| this.message = `There was an error retrieving CSS from ${url}.\n\tHTTP status code: ${statusCode} (${statusText})`; | ||
| function InvalidUrlError({url, statusCode, statusText}) { | ||
| this.name = 'InvalidUrlError' | ||
| this.message = `There was an error retrieving CSS from ${url}.\n\tHTTP status code: ${statusCode} (${statusText})` | ||
| } | ||
|
|
||
| InvalidUrlError.prototype = Error.prototype; | ||
| InvalidUrlError.prototype = Error.prototype | ||
|
|
||
| module.exports = async ( | ||
| url, | ||
| { debug = false, waitUntil = "networkidle2", customBrowser = {} } = {} | ||
| url, | ||
| {debug = false, waitUntil = 'networkidle2', customBrowser = {}} = {} | ||
| ) => { | ||
| const browserOptions = { | ||
| headless: debug !== true, | ||
| puppeteer | ||
| }; | ||
| const browserOptions = { | ||
| headless: debug !== true, | ||
| puppeteer | ||
| } | ||
|
|
||
| // Replace the puppeteer instance if a custom one is provided | ||
| // This also means that the executablePath needs to be set to | ||
| // a custom path where some chromium instance is running. | ||
| if ( | ||
| customBrowser && | ||
| customBrowser.executablePath && | ||
| customBrowser.customPuppeteer | ||
| ) { | ||
| browserOptions.executablePath = customBrowser.executablePath; | ||
| browserOptions.puppeteer = customBrowser.customPuppeteer; | ||
| } | ||
| // Replace the puppeteer instance if a custom one is provided | ||
| // This also means that the executablePath needs to be set to | ||
| // a custom path where some chromium instance is running. | ||
| if ( | ||
| customBrowser && | ||
| customBrowser.executablePath && | ||
| customBrowser.customPuppeteer | ||
| ) { | ||
| browserOptions.executablePath = customBrowser.executablePath | ||
| browserOptions.puppeteer = customBrowser.customPuppeteer | ||
| } | ||
|
|
||
| // Setup a browser instance | ||
| const browser = await browserOptions.puppeteer.launch(browserOptions); | ||
| // Setup a browser instance | ||
| const browser = await browserOptions.puppeteer.launch(browserOptions) | ||
|
|
||
| // Create a new page and navigate to it | ||
| const page = await browser.newPage(); | ||
| // Create a new page and navigate to it | ||
| const page = await browser.newPage() | ||
|
|
||
| // Start CSS coverage. This is the meat and bones of this module | ||
| await page.coverage.startCSSCoverage(); | ||
| const response = await page.goto(url, { waitUntil }); | ||
| // Start CSS coverage. This is the meat and bones of this module | ||
| await page.coverage.startCSSCoverage() | ||
| const response = await page.goto(url, {waitUntil}) | ||
|
|
||
| // Make sure that we only try to extract CSS from valid pages. | ||
| // Bail out if the response is an invalid request (400, 500) | ||
| if (response.status() >= 400) { | ||
| await browser.close(); // Don't leave any resources behind | ||
| // Make sure that we only try to extract CSS from valid pages. | ||
| // Bail out if the response is an invalid request (400, 500) | ||
| if (response.status() >= 400) { | ||
| await browser.close() // Don't leave any resources behind | ||
|
|
||
| return Promise.reject( | ||
| new InvalidUrlError({ | ||
| url, | ||
| statusCode: response.status(), | ||
| statusText: response.statusText() | ||
| }) | ||
| ); | ||
| } | ||
| return Promise.reject( | ||
| new InvalidUrlError({ | ||
| url, | ||
| statusCode: response.status(), | ||
| statusText: response.statusText() | ||
| }) | ||
| ) | ||
| } | ||
|
|
||
| // Coverage contains a lot of <style> and <link> CSS, | ||
| // but not all... | ||
| const coverage = await page.coverage.stopCSSCoverage(); | ||
| // Coverage contains a lot of <style> and <link> CSS, | ||
| // but not all... | ||
| const coverage = await page.coverage.stopCSSCoverage() | ||
|
|
||
| // Fetch all <style> tags from the page, because the coverage | ||
| // API may have missed some JS-generated <style> tags. | ||
| // Some of them *were* already caught by the coverage API, | ||
| // but they will be removed later on to prevent duplicates. | ||
| const styleTagsCss = (await page.$$eval("style", styles => { | ||
| // Get the text inside each <style> tag and trim() the | ||
| // results to prevent all the inside-html indentation | ||
| // clogging up the results and making it look | ||
| // bigger than it actually is | ||
| return styles.map(style => style.innerHTML.trim()); | ||
| })).join(""); | ||
| // Fetch all <style> tags from the page, because the coverage | ||
| // API may have missed some JS-generated <style> tags. | ||
| // Some of them *were* already caught by the coverage API, | ||
| // but they will be removed later on to prevent duplicates. | ||
| const styleTagsCss = (await page.$$eval('style', styles => { | ||
| // Get the text inside each <style> tag and trim() the | ||
| // results to prevent all the inside-html indentation | ||
| // clogging up the results and making it look | ||
| // bigger than it actually is | ||
| return styles.map(style => style.innerHTML.trim()) | ||
| })).join('') | ||
|
|
||
| await browser.close(); | ||
| await browser.close() | ||
|
|
||
| // Turn the coverage Array into a single string of CSS | ||
| const coverageCss = coverage | ||
| // Filter out the <style> tags that were found in the coverage | ||
| // report since we've conducted our own search for them. | ||
| // A coverage CSS item with the same url as the url of the page | ||
| // we requested is an indication that this was a <style> tag | ||
| .filter(styles => styles.url !== url) | ||
| // The `text` property contains the actual CSS | ||
| .map(({ text }) => text) | ||
| .join(""); | ||
| // Turn the coverage Array into a single string of CSS | ||
| const coverageCss = coverage | ||
| // Filter out the <style> tags that were found in the coverage | ||
| // report since we've conducted our own search for them. | ||
| // A coverage CSS item with the same url as the url of the page | ||
| // we requested is an indication that this was a <style> tag | ||
| .filter(styles => styles.url !== url) | ||
| // The `text` property contains the actual CSS | ||
| .map(({text}) => text) | ||
| .join('') | ||
|
|
||
| return Promise.resolve(coverageCss + styleTagsCss); | ||
| }; | ||
| return Promise.resolve(coverageCss + styleTagsCss) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,38 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>CodePen - CSS-in-JS example for extract-css-core unit tests</title> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>CodePen - CSS-in-JS example for extract-css-core unit tests</title> | ||
|
|
||
| <style> | ||
| html { | ||
| color: #f00; | ||
| } | ||
| </style> | ||
| </head> | ||
| <style> | ||
| html { | ||
| color: #f00; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body translate="no"> | ||
| <div id="app"></div> | ||
| <body translate="no"> | ||
| <div id="app"></div> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> | ||
| <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> | ||
| <script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script> | ||
|
|
||
| <script id="rendered-js"> | ||
| const Title = styled.h1` | ||
| color: blue; | ||
| font-family: sans-serif; | ||
| font-size: 3em; | ||
| `; | ||
| <script id="rendered-js"> | ||
| const Title = styled.h1` | ||
| color: blue; | ||
| font-family: sans-serif; | ||
| font-size: 3em; | ||
| ` | ||
|
|
||
| const App = () => { | ||
| return React.createElement(Title, null, "Title"); | ||
| }; | ||
| const App = () => { | ||
| return React.createElement(Title, null, 'Title') | ||
| } | ||
|
|
||
| ReactDOM.render( | ||
| React.createElement(App, null), | ||
| document.querySelector("#app") | ||
| ); | ||
| </script> | ||
| </body> | ||
| ReactDOM.render( | ||
| React.createElement(App, null), | ||
| document.querySelector('#app') | ||
| ) | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| body { | ||
| color: teal; | ||
| color: teal; | ||
| } |
Oops, something went wrong.