{"id":712,"slug":"postcss","name":"PostCSS","short_description":"PostCSS is a tool for transforming CSS with JavaScript. It can be used to develop a template language such as Sass and LESS.","url":"https://github.com/topics/postcss","github_count":3457,"created_by":"Andrey Sitnik, Ben Briggs, Bogdan Chadkin","logo_url":null,"released":"November 4, 2013","wikipedia_url":"https://en.wikipedia.org/wiki/PostCSS","related_topics":["sass","less","ast"],"aliases":[],"github_url":"https://github.com/postcss","content":"\u003cp\u003e\u003cstrong\u003ePostCSS\u003c/strong\u003e is a tool for transforming CSS with JavaScript. It can be used to develop a template language such as Sass and LESS. The PostCSS core consists of:\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003eCSS parser that generates an \u003ca href=\"/topics/abstract-syntax-tree\"\u003eabstract syntax tree\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eSet of classes that comprises the tree\u003c/li\u003e\n  \u003cli\u003eCSS generator that generates a CSS line for the object tree\u003c/li\u003e\n  \u003cli\u003eCode map generator for the CSS changes made#\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eThere are official tools making it possible to use PostCSS with build systems such as \u003ca href=\"/topics/webpack\"\u003eWebpack\u003c/a\u003e, \u003ca href=\"/topics/gulp\"\u003eGulp\u003c/a\u003e, and \u003ca href=\"/topics/grunt\"\u003eGrunt\u003c/a\u003e. There is also a console interface available. \u003ca href=\"/topics/browserify\"\u003eBrowserify\u003c/a\u003e or Webpack can be used to open PostCSS in a browser.\u003c/p\u003e\n\n\u003cp\u003eThe complete plugin list can be found on postcss.parts, with some examples listed below.\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"/topics/autoprefixer\"\u003eAutoprefixer\u003c/a\u003e to add and clear \u003ca href=\"/topics/vendor-prefix\"\u003ebrowser prefixes\u003c/a\u003e.\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"/topics/css-modules\"\u003eCSS Modules\u003c/a\u003e to get \u003ca href=\"/topics/css-selectors\"\u003eCSS selectors\u003c/a\u003e isolated and code organized. It is supplied as part of Webpack.\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"/topics/stylelint\"\u003estylelint\u003c/a\u003e to analyze CSS code for mistakes and check style consistency.\u003c/li\u003e\n  \u003cli\u003estylefmt fixes the CSS code according to the stylelint settings.\u003c/li\u003e\n  \u003cli\u003ePreCSS to perform some Sass/Less preprocessing functions.\u003c/li\u003e\n  \u003cli\u003epostcss-preset-env to emulate features from unfinished CSS specification drafts.\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"/topics/cssnano\"\u003ecssnano\u003c/a\u003e to make CSS smaller in size by getting rid of the spaces and rewriting the code.\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"/RTLCSS\"\u003eRTLCSS\u003c/a\u003e to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew).\u003c/li\u003e\n  \u003cli\u003epostcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.\u003c/li\u003e\n\u003c/ul\u003e\n","created_at":"2024-07-29T13:54:11.298Z","updated_at":"2026-06-17T00:20:08.492Z","topic_url":"https://awesome.ecosyste.ms/api/v1/topics/postcss","html_url":"https://awesome.ecosyste.ms/topics/postcss","projects_url":"https://awesome.ecosyste.ms/api/v1/projects?keyword=postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/lists?topic=postcss"}