{"id":19291009,"url":"https://github.com/kernix13/postcss-demo","last_synced_at":"2026-05-18T09:06:24.036Z","repository":{"id":111829994,"uuid":"559644430","full_name":"Kernix13/postcss-demo","owner":"Kernix13","description":"Basic setup to using PostCSS","archived":false,"fork":false,"pushed_at":"2023-04-25T20:39:40.000Z","size":212,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T18:43:24.390Z","etag":null,"topics":["postcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kernix13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-10-30T18:43:47.000Z","updated_at":"2022-11-10T21:50:23.000Z","dependencies_parsed_at":"2023-06-04T02:45:19.977Z","dependency_job_id":null,"html_url":"https://github.com/Kernix13/postcss-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kernix13/postcss-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fpostcss-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fpostcss-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fpostcss-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fpostcss-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kernix13","download_url":"https://codeload.github.com/Kernix13/postcss-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kernix13%2Fpostcss-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274783139,"owners_count":25348915,"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","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["postcss"],"created_at":"2024-11-09T22:23:20.866Z","updated_at":"2026-05-18T09:06:19.013Z","avatar_url":"https://github.com/Kernix13.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Demo Setup\n\nLnks: \n\n1. [Postcss docs](https://postcss.org/docs/)\n1. [Postcss plugins](https://postcss.org/docs/postcss-plugins)\n1. [Postcss plugins 2](https://www.postcss.parts/)\n1. [PostCSS on GitHub](https://github.com/postcss/postcss)\n1. [PostCSS with Parcel](https://github.com/postcss/postcss#parcel)\n1. [PostCSS with npm scripts](https://github.com/postcss/postcss#npm-scripts)\n1. [What It Really Is And What It Really Does](https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/)\n1. [Postcss Guides](https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889)\n\n\u003ca id=\"back-to-top\"\u003e\u003c/a\u003e\n\n## Table of contents\n\n1. [Overview](#overview)\n1. [Installation and setup](#installation-and-setup)\n1. [Plugins](#plugins)\n   1. [PostCSS Config File](#postcss-config-file)\n   1. [postcss-import](#postcss-import)\n   1. [Autoprefixer](#autoprefixer)\n   1. [Postcss Preset Env](#postcss-preset-env)\n   1. [Precss](#precss)\n   1. [CSSNano](#cssnano)\n   1. [Postcss Assets](#postcss-assets)\n   1. [postcss-nested](#postcss-nested)\n   1. [Stylelint](#stylelint)\n\n## Overview\n\n- It's all about the plugins\n- It's integrated into tools like _Next.js_, _Vite_, _Parcel_, _Webpack_, _Gulp_, and others\n- It's a tool for transforming your CSS using JS plugins \n- It's not a preprocessor like SASS - no eexternal compiler needed\n- It takes your CSS and converts it into an AST (_Abstract Syntax Tree_) and parses your CSS strings as JavaScript Objects\n- Postcss has an API that allows JavaScript plugins to access the AST \n- It parses your CSS strings as JavaScript objects - Abstract Syntax Tree \n- It makes it easy to make your own Postcss plugins\n- You can use CSS and get the SASS functionality like importing modules\n- Kevin Powell has: `src/style.css` and folders names `base` (base.css, reset.css), `components` (buttons.css), and `utilities` (container.css, flex.css, font-sizes.css)\n\n\u003e Kevin Powell email: he uses PostCSS and his fav plugins: `purgeCSS` and `postcss-preset-env` - he uses `gulp` in a lot of his videos\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Installation and setup\n\n```bash\nnpm init -y\nnpm i -D postcss postcss-cli\n```\n\n- Run `npm init -y`\n- Then `npm i -D postcss postcss-cli`\n- Create a folder `src`, inside it create `input.css`\n- Create another folder for the output named `dist` (why did he create this?)\n- In `package.json` create a script - you have to have the CLI installed for this\n- Call it `build:css` and you add `postcss [source file] -o [output file]` where `-o` is for Output\n- Or `postcss src/input.css -o dist/style.css` and that will build it\n- If you just use this script, every time you edit your CSS you will have to run `npm run build:css` in order for it to build, but it has a `--watch` flag you can use though he used `-w`\n- Add some CSS rules then `npm run build:css` and then `style.css` is created in the `dist` folder and that is the file you would include in your HTML\n- NOTE: It's odd how you have to create files and folders in `dist`!!!\n- Then in the `dist` folder create `index.html` and link to `style.css`\n\n\u003e NOTE: what is a source map?\n\n`SourceMap`: a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger | ...a file that maps from the transformed source to the original source.\n\nIt is a mapping between the generated/transpiled/minified JavaScript file and one or more original source files. The main purpose of Sourcemaps is to aid debugging.\n\n\u003e From MDN: The `SourceMap` HTTP response header links generated code to a source map, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Plugins\n\nBasics on Plugins: \n\n1. Install it, \n2. Add it to the config file in the `plugins` array with `require`,\n3. Add options if necessary `()` after `require('plugin-name')`\n\nPopular plugins:\n\n**_postcss-cli_**: To use PostCSS from your command-line interface or with npm scripts in `package.json`, or when you have a static site build - [npm on postcss-cli](https://www.npmjs.com/package/postcss-cli)\n\n1. _Autoprefixer_: generates vendor prefixes\n1. _postcss-preset-env_: allows you to use cutting-edge CSS features\n1. _precss_: Use SASS-like syntax\n1. _Stylelint_: Linting for your styles to avoid errors\n1. _PostCSS Assets_: asset manager\n1. _CSSNano_: optimize and minify CSS\n1. _postcss-import_: import CSS modules\n1. _postcss-nested_: for SASS-like nesting\n\n\n### PostCSS Config File\n\n- After installing a plugin you need to install it to your config so you need to create that file in the root and name it `postcss.config.js`\n- In there you want `module.exports` object and in there a `plugins` array where each entry is a require function for each plugin\n\n\u003e Parcel has built-in PostCSS support. It already uses _Autoprefixer_ and _cssnano_. If you want to change plugins, create `postcss.config.js` in project’s root\n\n```js\nmodule.exports = {\n  plugins: [\n    require(\"autoprefixer\"), \n    require(\"postcss-nested\")\n    ]\n};\n```\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### postcss-import\n\n- `npm i -D postcss-import` and add to the config file in t he `plugins` array\n- In `src` create `vars.css`, add your variables in there, then in the main file import that file via `@import \"vars\";`\n- Run `npm run watch:css` - do I have to open with Liveserver?\n- Create some more variables then create `card.css` and add some styles \n- Then import that into the main file but make sure to have `vars` as the first import so you can use it in all other files\n- To use this you need a file in the root named `postcss.config.js`\n- Then in `style.css` add `@import 'foldername/filename.css';` for each file\n\nThen in package.json:\n\n```json\n  \"scripts\": {\n    \"postcss:watch\": \"postcss src/style.css --dir dist --watch\",\n    \"build:css\": \"postcss src/input.css -o dist/style.css\"\n  },\n```\n\n- NOTE: `-d` can be substituted for `--dir` and `-w` for `--watch`\n- Then `npm run postcss:watch`\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Autoprefixer\n\n- Install Autoprefixer `npm i -D autoprefixer`\n- The autoprefixer plugin uses the **caniuse** website - test it with the attribute and pseudo element of `::placeholder` so add a form element with an input\n- Then add a css rule for it in `input.css` - run `npm run build:css` - works!\n- Instead run `npm run watch:css`\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Postcss Preset Env\n\n- Install `postcss-preset-env` which allows you to the cutting edge features of CSS which aren't yet implemented in browsers\n- You need options for some things - `stage` 2 is the default, `stage` 1 gives you nesting, e.g.:\n- `CTRL+C` then `npm i -D postcss-preset-env` then add it to the config file\n- This plugin take options which you have to add to the config file - define the `stage`\n- **NOTE**: the syntax is really odd for the options\n- CSS and JS come out in different stages and the default I think is `2` so use `1`\n- Anytime you change your config file you have to restart the watch command\n- CSS features: 1) custom selector, 2) custom media queries, 3) nesting but you need to add `\u0026 h2` or whatever the selector is\n- You need the ampersand in CSS not with SASS though in SASS you use `\u0026-`\n\n```css\n@custom-selector :--heading h1, h2, h3, h4, h5;\n@custom-media --viewport-small (width \u003c= 500px);\n\n:--heading {\n  @media (--viewport-small) {\n    font-size: 2.5rem;\n    color: blue;\n  }\n}\n```\n\nNesting: \n\n```css\nnav {\n  padding: 1rem;\n  \u0026 ul {\n    margin: 0;\n  }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### Precss\n\n- This plugin gives you the same syntax as SASS and you don't need `\u0026`\n- `CTRL+C` then `npm i -D precss` then add it to the config file\n- Then `npm run watch:css` but you will get a message:\n\n```\n| This version of postcss-preset-env is not optimised to work with PostCSS 8. │\n│              Please update to version 7 of PostCSS Preset Env.              │\n│                                                                             │\n│                  If you find issues, you can report it at:                  │\n│        https://github.com/csstools/postcss-plugins/issues/new/choose        |\n```\n\n- You can still use it, they just haven't done the update yet\n- As in SASS, variables go in their own file\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### CSSNano\n\n- `npm i -D cssnano` to optimize and minify your CSS with options of `preset` set to default (what does that do?)\n- `cssnano` minifies the output CSS file - just run `npm run postcss:watch`\n\n### Postcss Assets\n\n- `CTRL+C` then `npm i -D postcss-assets` - it allows you to manage your images and other assets\n- It takes options so parens and curly brackets, `({})` directly after the closing parens for `require`\n- Add `loadPaths` and set it to `dist/img` in an array \n- Create an `img` folder in `dist` then add a logo or something to it\n- Try using it as a bg img and a function called `resolve(\"img-filename\")` then use a width function: `width(\"img-filename\")` - looks like crap - can also do `height()` - looks better without the width fx\n- I'm removing that CSS but here it is:\n\n```scss\n.card {\n  padding: 1.25rem;\n  margin-top: 1.25rem;\n  border: $borderWidth solid $borderColor;\n  width: 31.25rem;\n  background-image: resolve(\"kernix-logo6-90.png\");\n  background-repeat: no-repeat;\n  background-position: center;\n  width: width(\"kernix-logo6-90.png\");\n\n  h2 {\n    color: green;\n  }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n### postcss-nested\n\n- Isn't `postcss-nested` for nesting? Why use this if you have `postcss-preset-env`?\n\n### Stylelint\n\nLink: [Stylelint](https://stylelint.io/)\n\n- A mighty, modern linter that helps you avoid errors and enforce conventions in your styles\n- You can lint CSS files by using the standard config and everything else by using extensions written by the community\n\n\u003cdiv align=\"right\"\u003e\u003ca href=\"#back-to-top\" title=\"Table of Contents\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernix13%2Fpostcss-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkernix13%2Fpostcss-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernix13%2Fpostcss-demo/lists"}