PostCSS boilerplate

.env

env=develop

readme.md

PostCSS boilerplate

Install

1. copy-paste the package.json contents
2. run npm install to install all dependencies
3. make sure to have postcss.config.json in the root of the project
4. create a src/pcss folder containing a main.pcss file
5. create a .env file in the root containing the env=develop flag

Use

$ npm run postcss # compiles src/pcss/main.pcss -> dist/css/style.css
$ npm run postcss:watch # runs above but in watch mode

Directory layout

dist/
├─ index.html
├─ css/
│  ├─ style.css
src/
├─ pcss/
│  ├─ main.pcss
.env
package.json
postcss.config.js

Example

With the current packages installed, the following features are supported:

@import "anotherfile.css";

.someClass {
  background-color: #00ff00;
   
  /** nest child classes */
  .nestedClass {
    background-color: #ff0000;
  }
  
  /** compose classnames from parent selector & */
  &__composed-class {
    background-color: #0000ff;
  }
}

other utilities run in the background, like autoprefixer and cssnano. Docs to all the plugins:

• postcss
• postcss-cli
• postcss-import
• postcss-nested
• cssnano
• autoprefixer

package.json

{
  "name": "postcss-boilerplate",
  "version": "1.0.0",
  "description": "default configuration for a postcss project containing a few helpful packages",
  "main": "src/pcss/main.pcss",
  "scripts": {
    "postcss": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose",
    "postcss:watch": "postcss src/pcss/main.pcss --output dist/css/style.css --verbose --watch",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.4.7",
    "cssnano": "^5.1.8",
    "dotenv": "^16.0.1",
    "postcss": "^8.4.12",
    "postcss-cli": "^9.1.0",
    "postcss-import": "^14.1.0",
    "postcss-nested": "^5.0.6"
  }
}

postcss.config.js

/**
 * PostCSS configuration file. This cfg is read by the postcss-cli command
 * to build the command running all plugins and configs to keep the executable
 * command as short and clear as possible.
 *
 * example used: https://www.sitepoint.com/postcss-sass-configurable-alternative/
 */
const { env } = require('dotenv').config();

module.exports = cfg => {

  const dev = (process.env === 'develop');

  return {
    map: dev ? { inline: false } : false,
    plugins: [
      require('autoprefixer')(),
      require('postcss-import')(),
      require('postcss-nested')(),
      dev ? null : require('cssnano')()
    ]
  }
}