{"id":15365946,"url":"https://github.com/andywer/postcss-debug","last_synced_at":"2025-07-24T16:41:32.411Z","repository":{"id":57327934,"uuid":"59683028","full_name":"andywer/postcss-debug","owner":"andywer","description":"Debug your postcss workflow with ease! Creates snapshots of your CSS files before/after each postcss plugin is run.","archived":false,"fork":false,"pushed_at":"2017-12-29T08:02:39.000Z","size":1774,"stargazers_count":94,"open_issues_count":12,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-27T06:44:59.754Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/andywer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-05-25T17:20:00.000Z","updated_at":"2025-02-10T15:11:01.000Z","dependencies_parsed_at":"2022-09-17T11:21:23.056Z","dependency_job_id":null,"html_url":"https://github.com/andywer/postcss-debug","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fpostcss-debug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fpostcss-debug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fpostcss-debug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andywer%2Fpostcss-debug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andywer","download_url":"https://codeload.github.com/andywer/postcss-debug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741146,"owners_count":21154249,"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-10-01T13:16:45.887Z","updated_at":"2025-04-13T15:54:16.387Z","avatar_url":"https://github.com/andywer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS-Debug\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![NPM Version](https://img.shields.io/npm/v/postcss-debug.svg)](https://www.npmjs.com/package/postcss-debug)\n\nDebug your postcss workflow with ease! Contains a simple, but interactive web\ninspector. Creates snapshots of your CSS files before/after each postcss plugin is run.\nSee what transformations where done when things stopped working as expected.\n\n**Consider this a beta release. Everything documented here should work, though.**\n\n![Inspector screenshot](/doc/inspector-screenshot.png?raw=true)\n\n\n## Usage\n\n### CLI\n\nYou can use the `postcss-debug` command line interface to run PostCSS on files\nof your choice and let the debugger analyze it. It will automatically open the\nPostCSS debugger's web inspector, so you can browse through the debugging data.\n\n```sh\nnpm install --save-dev postcss-debug\nnpx postcss-debug path/to/styles/*.css    # Use npx to run locally installed postcss-debug\n```\n\nYou need a configuration file for postcss plugin setup. The name of this file\ndefaults to `.postcss.js`. This is a sample config using postcss-calc and\npostcss-nested plugins:\n\n```js\nvar calc = require('postcss-calc')\nvar nested = require('postcss-nested')\n\nmodule.exports = function (postcss) {\n  return postcss([ calc, nested ])\n}\n```\n\nIf you need further information how to use the `postcss-debug` CLI:\n\n```sh\nnpx postcss-debug --help\n```\n\n### gulp-postcss\n\nThis is a modified version of the `gulp-postcss` sample usage code. Adapt your\ncode like shown here (very simple, three lines of code: require debugger,\nwrap your plugins, call `.inspect()`) and run `gulp css-debug` in order to\ndebug your PostCSS process. The PostCSS-Debug web inspector will be opened in\nyour browser automatically.\n\n```js\nvar postcss = require('gulp-postcss')\nvar gulp = require('gulp')\nvar autoprefixer = require('autoprefixer')\nvar cssnano = require('cssnano')\n// 1st change: instantiate debugger\nvar debug = require('postcss-debug').createDebugger()\n\ngulp.task('css', function () {\n  var processors = [\n    autoprefixer({browsers: ['last 1 version']}),\n    cssnano()\n  ];\n  return gulp.src('./src/*.css')\n    // 2nd change: we wrap our processors with `debug()`\n    .pipe(postcss(debug(processors)))\n    .pipe(gulp.dest('./dest'))\n})\n\ngulp.task('css-debug', ['css'], function () {\n  // 3rd change: open the web inspector\n  debug.inspect()\n})\n```\n\n\n### JS Code\n\n```js\nimport { createDebugger, matcher } from 'postcss-debug'\n\nconst debug = createDebugger()\n/* or limit gathering debug data to certain css files only:\nconst debug = createDebugger([\n  matcher.contains('style/some-file.css'),\n  matcher.regex(/foo\\.css/)\n])\n*/\n\nconst plugins = [\n  plugin1,\n  plugin2\n]\n\npostcss(debug(plugins))\n  .process(css, {\n    from: 'src/app.css',\n    to: 'app.css'\n  })\n  .then(result =\u003e {\n    debug.inspect()\n  })\n```\n\n\n## Contributing\n\nContributions welcome! Feel free to write code, documentation, tests, ...\nOptionally open an issue first or just create a pull request :)\n\nThe web inspector is a rather loosely coupled stand-alone application. Have a\nlook at directory [webdebugger](/webdebugger).\n\n\n## Changelog\n\nHave a look at file\n[CHANGELOG.md](/CHANGELOG.md).\n\n\n## License\n\nThis plugin is released under the terms of the MIT license. See [LICENSE](/LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fpostcss-debug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandywer%2Fpostcss-debug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandywer%2Fpostcss-debug/lists"}