{"id":16716326,"url":"https://github.com/gucong3000/postcss-html","last_synced_at":"2025-06-13T14:01:55.542Z","repository":{"id":55411636,"uuid":"91771069","full_name":"gucong3000/postcss-html","owner":"gucong3000","description":"PostCSS syntax for parsing HTML (and HTML-like)","archived":false,"fork":false,"pushed_at":"2021-01-01T23:10:45.000Z","size":146,"stargazers_count":60,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T05:08:12.279Z","etag":null,"topics":["css","html","parsing","postcss","postcss-html","postcss-syntax","vue-components"],"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/gucong3000.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":"2017-05-19T06:03:29.000Z","updated_at":"2024-10-29T15:43:18.000Z","dependencies_parsed_at":"2022-08-14T23:50:15.198Z","dependency_job_id":null,"html_url":"https://github.com/gucong3000/postcss-html","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gucong3000%2Fpostcss-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gucong3000%2Fpostcss-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gucong3000%2Fpostcss-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gucong3000%2Fpostcss-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gucong3000","download_url":"https://codeload.github.com/gucong3000/postcss-html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244866487,"owners_count":20523525,"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":["css","html","parsing","postcss","postcss-html","postcss-syntax","vue-components"],"created_at":"2024-10-12T21:12:58.379Z","updated_at":"2025-03-21T20:34:06.888Z","avatar_url":"https://github.com/gucong3000.png","language":"JavaScript","readme":"PostCSS HTML Syntax\n====\n\n[![NPM version](https://img.shields.io/npm/v/postcss-html.svg?style=flat-square)](https://www.npmjs.com/package/postcss-html)\n[![Travis](https://img.shields.io/travis/gucong3000/postcss-html.svg)](https://travis-ci.org/gucong3000/postcss-html)\n[![Travis](https://img.shields.io/travis/gucong3000/postcss-syntaxes.svg?label=integration)](https://travis-ci.org/gucong3000/postcss-syntaxes)\n[![Codecov](https://img.shields.io/codecov/c/github/gucong3000/postcss-html.svg)](https://codecov.io/gh/gucong3000/postcss-html)\n[![David](https://img.shields.io/david/gucong3000/postcss-html.svg)](https://david-dm.org/gucong3000/postcss-html)\n\n\u003cimg align=\"right\" width=\"95\" height=\"95\"\n\ttitle=\"Philosopher’s stone, logo of PostCSS\"\n\tsrc=\"http://postcss.github.io/postcss/logo.svg\"\u003e\n\n[PostCSS](https://github.com/postcss/postcss) syntax for parsing HTML (and HTML-like)\n- [PHP](http://php.net)\n- [Vue Single-File Component](https://vue-loader.vuejs.org/spec.html)\n- [Quick App](https://doc.quickapp.cn/framework/source-file.html)\n- [XSLT](https://www.w3.org/TR/xslt-30/)\n\n## Getting Started\n\nFirst thing's first, install the module:\n\n```\nnpm install postcss-syntax postcss-html --save-dev\n```\n\nIf you want support SCSS/SASS/LESS/SugarSS syntax, you need to install the corresponding module.\n\n- SCSS: [postcss-scss](https://github.com/postcss/postcss-scss)\n- SASS: [postcss-sass](https://github.com/aleshaoleg/postcss-sass)\n- LESS: [postcss-less](https://github.com/shellscape/postcss-less)\n- SugarSS: [sugarss](https://github.com/postcss/sugarss)\n\n## Use Cases\n\n```js\nconst postcss = require('postcss');\nconst syntax = require('postcss-html')({\n\t// syntax for parse scss (non-required options)\n\tscss: require('postcss-scss'),\n\t// syntax for parse less (non-required options)\n\tless: require('postcss-less'),\n\t// syntax for parse css blocks (non-required options)\n\tcss: require('postcss-safe-parser'),\n});\npostcss(plugins).process(source, { syntax: syntax }).then(function (result) {\n\t// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.\n\tresult.content\n});\n```\n\nIf you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module:\n\n- SCSS: [postcss-scss](https://github.com/postcss/postcss-scss)\n- SASS: [postcss-sass](https://github.com/aleshaoleg/postcss-sass)\n- LESS: [postcss-less](https://github.com/shellscape/postcss-less)\n- SugarSS: [sugarss](https://github.com/postcss/sugarss)\n\n## Advanced Use Cases\n\nSee: [postcss-syntax](https://github.com/gucong3000/postcss-syntax)\n\n## Turning PostCSS off from within your HTML\n\nPostCSS can be temporarily turned off by using special comments in your HTML. For example:\n\n```html\n\u003chtml\u003e\n\u003cbody\u003e\n\u003c!-- postcss-disable --\u003e\n\u003ca style=\"color: red;\"\u003e\u003c/a\u003e\n\u003c!-- postcss-enable --\u003e\n```\n\n## Style Transformations\n\nThe main use case of this plugin is to apply PostCSS transformations to `\u003cstyle\u003e` tags and `\u003cdiv style=\"*\"\u003e` property in HTML (and HTML-like).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgucong3000%2Fpostcss-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgucong3000%2Fpostcss-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgucong3000%2Fpostcss-html/lists"}