Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephanebachelier/inline-coverage-styles
Inline CSS for code coverage reports
https://github.com/stephanebachelier/inline-coverage-styles
azure-devops codecoverage css inline-styles vsts
Last synced: about 1 month ago
JSON representation
Inline CSS for code coverage reports
- Host: GitHub
- URL: https://github.com/stephanebachelier/inline-coverage-styles
- Owner: stephanebachelier
- Created: 2019-03-11T08:43:36.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-14T17:16:11.000Z (almost 6 years ago)
- Last Synced: 2024-11-06T22:44:57.940Z (3 months ago)
- Topics: azure-devops, codecoverage, css, inline-styles, vsts
- Language: JavaScript
- Size: 339 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Inline coverage styles
[](https://travis-ci.org/stephanebachelier/inline-coverage-styles)
[](https://codecov.io/gh/stephanebachelier/inline-coverage-styles)
## Description
Inline CSS stylesheets into HTML files.
The goal of this project is to fix an issue on VSTS or Azure devops, where code coverage report assets can't be loaded, as the reports are loaded in a sandboxed iframe.
See :
- Github issue on [azure-pipelines-tasks](https://github.com/Microsoft/azure-pipelines-tasks/issues/3027) repository.
- [Article](https://davidsekar.com/aspnetcore/code-coverage-html-reports-are-missing-styles-in-vsts) from `vsts-coverage-styles` author.
*Nota Bene*
This project can be used not only for inlining linked stylesheets in HTML code coverage reports, but also for any folder with HTML files.
## Installation
Locally :
- npm : `npm i inline-coverage-styles`
- yarn : `yarn add inline-coverage-styles`
Or globally :
- npm : `npm i -g inline-coverage-styles`
- yarn : `yarn global add inline-coverage-styles`
## Usage
```
const ics = require('inline-coverage-styles')
ics({ baseDir: 'coverage' })
```
## Options
### baseDir: string (required)
The **absolute path** to the coverage report directory. A relative path might work but it's not tested.
### css: string (optional)
A string with a bunch of css rules to inject in a `` tag. Injected before the `<head>` closing tag to avoid any cascade issue.
## Examples
Two examples are provided in this repository:
- [Inlining coverage](examples/inline_coverage.js)
- [Inlining coverage with extra css injection](examples/inline_coverage_with_extra_css.js)
To run these tests :
- clone this repository
- `yarn install`
- `yarn run test && node ./examples/inline_coverage.js`
- or `yarn run test && node ./examples/inline_coverage_with_extra_css.js`
## Roadmap
- [ ] Add CLI
- [ ] Increase code coverage
- [ ] test support for relative path
## Inspiration & motivation
These project is directly inspired from [vsts-coverage-styles](https://www.npmjs.com/package/vsts-coverage-styles).
I've decided to build this project :
- `vsts-coverage-styles` is difficult to mock in my custom build processes,
- `vsts-coverage-styles` does not have tests,
- I wanted to have a solution with streams instead of having the whole file loaded in memory, to avoid memory issues. Some coverage folders may have a log of HTML reports files.
- There is no caching of linked CSS files in memory contrary to `vsts-coverage-styles`. The linked stylesheets are first minified and then only the minified version will be loaded from filesystem using stream.