{"id":21434799,"url":"https://github.com/zivl/gulp-css-usage","last_synced_at":"2025-03-16T23:12:29.666Z","repository":{"id":57257276,"uuid":"51429379","full_name":"zivl/gulp-css-usage","owner":"zivl","description":"A Gulp task which scans your JavaScript classes, including React JSX files support ( .jsx / .js ), your CSS files, and gives you a report of CSS coverage. .i.e how many class names are needless and which are those class names","archived":false,"fork":false,"pushed_at":"2018-01-24T08:45:39.000Z","size":26,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T00:22:34.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zivl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-10T08:39:27.000Z","updated_at":"2016-11-13T20:26:35.000Z","dependencies_parsed_at":"2022-09-08T07:33:47.607Z","dependency_job_id":null,"html_url":"https://github.com/zivl/gulp-css-usage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Fgulp-css-usage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Fgulp-css-usage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Fgulp-css-usage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zivl%2Fgulp-css-usage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zivl","download_url":"https://codeload.github.com/zivl/gulp-css-usage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243945626,"owners_count":20372897,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T23:40:42.624Z","updated_at":"2025-03-16T23:12:29.644Z","avatar_url":"https://github.com/zivl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-css-usage\n\n[![Build Status](https://travis-ci.org/zivl/gulp-css-usage.svg?branch=master)](https://travis-ci.org/zivl/gulp-css-usage)\n[![npm version](https://badge.fury.io/js/gulp-css-usage.svg)](https://badge.fury.io/js/gulp-css-usage)\n\nA Gulp task which scans your JavaScript classes, including React JSX files support ( `.jsx` / `.js`  ) as well as HTML files, your CSS files, and gives you a report of CSS coverage.\u003cbr\u003e\n.i.e how many class names are needless and which are those class names.\n\nIn this way, you can tremendously accelerate the rendering time of your app by reducing network latency, loading and parsing time,\nas the CSS file is smaller with less properties to process and etc.\n\n\n# Install\n```\nnpm install gulp-css-usage --save-dev\n```\n\n# Usage\n###### include the plug-in\n```javascript\n// ECMAScript 5 code, using require()\nvar gulp = require('gulp');\nvar gulpCssUsage = require('gulp-css-usage').default;\n```\n```javascript\n// ECMAScript 6 code, using module import\nimport gulp from 'gulp';\nimport gulpCssUsage from 'gulp-css-usage';\n```\n###### using the plug-in\n```javascript\ngulp.task('check-css-usage', function () {\n  return gulp.src('/.../path/to/your/jsx/files/**/*.{jsx,js}')\n    .pipe(gulpCssUsage({css: '/.../path/to/your/css/file/style.css', babylon:[]}));\n});\n```\n###### console output\n```\n// selectors that matched complete strings in js files\nneedless selectors:\n.myClass\n#myId\n\n// selectors that partialy matched an ES6 template string in js files\nprobably needless selectors:\n.myClassTemplate\n#myIdTemplate\n```\n## options\n### css\n**mandatory** Type: `String` || `Array`\n\nThe file path/pattern to the CSS file which this plug-in will test.\u003cbr\u003e\nSupports multiple files either via glob pattern or via array of paths/patterns.\n\ne.g.\n```javascript\ngulpCssUsage({css: '/.../path/to/css/*.css'});\ngulpCssUsage({css: ['/.../path/to/css/*.css', '/.../another/path/*.css', '/.../just/a/file/style.css']});\n```\n\n### threshold\nType: `Number`, (between 0-100)\n\nIf set, `gulp-css-usage` will check the amount of unused selectors, and if the amount of it is above the threshold then it fails the task.\n\n\n### babylon\nType: `Array:String` Default: `['jsx', 'flow', 'classProperties']`\n\nArray containing the plugins that you want to enable.\u003cbr\u003e\nSince we're using `babel 6.4+` and `babylon` to parse and extract the class names from the `jsx` files,\nyou might need to add which plug-ins to enable to parse your code if you're using more `ES6` or `ES7` features.\n\n**Example:** if you're using `objectRestSpread` capability which is not in `ECMAScript2015` standards - you'll need to add it\n\nFor more available plug-ins, go to [babel-babylon](https://github.com/babel/babel/tree/master/packages/babylon)\n\n### outputFile\nType: `String`\n\nA Path to a report file. If set, `gulp-css-usage` will write it's analysis both to console and to the file specified with a `.txt` extension.\n\n\n\n# Having some trouble? Have an issue?\nFor bugs and issues, please use the [Issues](https://github.com/zivl/gulp-css-usage/issues) page.\n\nFor trouble in usage or unclear stuff, please use the awesome [StackOverflow](http://stackoverflow.com/) and tag your question with `gulp-css-usage`, as well as other tags as you see fit\n\n\n# Road map\n* support of more CSS selectors\n* support of precompiled SCSS files as well\n\n# Contribute\nSure! just fork this repository and join in!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzivl%2Fgulp-css-usage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzivl%2Fgulp-css-usage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzivl%2Fgulp-css-usage/lists"}