Skip to main content

PostCSS

PostCSS is a post-processor tool that provide developers with multiple web development plugins.

Ravenbright CSS consists of smaller independent CSS files. You can freely import or remove them based on your needs by using Import plugin with PostCSS.

Installing the PostCSS​

Create or open your project directory then, cd into that directory.

npm i -D postcss postcss-cli

Once the installation is finished, the PostCSS command will be available in your CLI. After that you can check whether PostCSS is already installed by writing this command

npx postcss --version

Adding the plugins​

PostCSS is now installed. Ravenbright currently uses 3 plugins in PostCSS. You can import CSS files & use SASS-like functionalities in native CSS.

  • Run these commands below to install the plugins
npm i postcss-import
npm i postcss-nesting
npm i postcss-mixins
  • Write this config file in your root directory & it's done!
postcss.config.js
module.exports = {
  plugins: [
    require('postcss-mixins'),
    require('postcss-import'),
    require('postcss-nested'),
  ]
}

Learn more about the plugins from these official PostCSS repository

Compiling CSS file​

It's time to compile the CSS code. PostCSS and its plugin will transform Ravenbright CSS into your chosen output directory.

  1. Create or navigate into Ravenbright CSS or your project directory.

  2. Run this following command inside your project directory

npx postcss main.css --output dist/ravenbright.min.css --watch
tip

To speed up our development workflow, lets' add 'compile and watch' command script.

  1. Open package.json file. Then, copy and paste this code
{
"scripts": {
 "buildcss": "npx postcss main.css --output dist/ravenbright.min.css --watch",
  "buildcss-dark": "npx postcss main.css --output dist/ravenbright-dark.min.css --watch"
  }
}

The PostCSS --watch script will automatically compile your CSS file when there exist changes inside your source code. Your CLI will also show "waiting for file changes" and report the emerging issues.

Import plugin​

Let's begin with badge & button components. Navigate to Ravenbright project directory

cd directory

Create or open main.css. (a CSS file which used to gather all the relevant other CSS files). Put all the components & utilities inside src directory. You can read about this on directory structure

Then, write these code below into main.css

tip

Make sure to place the utilities files on the last line of main.css to make the CSS cascade works.

@import "src/reset.css";
@import "src/css-variable.css";
@import "src/components/button.css";
@import "src/utilities/flexbox.css";
@import "src/utilities/width.css";

After that, we can compile the main.css file using this command below.

npx postcss main.css --output dist/ravenbright.min.css

Nesting plugin​

To better understand the nesting syntax in PostCSS, let's begin with button component. Navigate to the button.css file inside the components directory. Check this code below to see the real example of nesting in PostCSS

button,
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--rbrh-font-weight-semibold);
  background-color: var(--rbrh-green-600);
  border-radius: var(--rbrh-radius-sm);
  color: var(--rbrh-white);
  padding: var(--rbrh-spacing-4) var(--rbrh-spacing-6);
  &:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease;
  }
  &:target,
  &:focus {
    box-shadow: var(--rbrh-shadow-focus);
    outline: 0;
  }
  &:active {
    transform: translate(var(--rbrh-spacing-1), var(--rbrh-spacing-1));
    box-shadow: 0 1px 2px var(--rbrh-gray-100) inset;
  }
}

Mixins plugin​

Ravenbright only defines 2 mixins to simplify the process of creating media queries & define the text styles (font-size, line-height & letter-spacing)

Breakpoints mixin
@define-mixin screen-sm-up {
  @media (min-width: 36rem) {
    @mixin-content;
  }
}
@define-mixin screen-md-up {
  @media (min-width: 48rem) {
    @mixin-content;
  }
}
Typography mixin
@define-mixin font-size-3xl {
  font-size: var(--rbrh-font-size-3xl);
  line-height: var(--rbrh-line-h-3xl);
  letter-spacing: var(--rbrh-letter-spacing-sm);
}
@define-mixin font-size-2xl {
  font-size: var(--rbrh-font-size-2xl);
  line-height: var(--rbrh-line-h-xl);
  letter-spacing: var(--rbrh-letter-spacing-md);
}

This is how you use the mixin inside the CSS selectors

/* Make a responsive large button: */
.button-large {
  @mixin screen-xs-up {
    @mixin font-size-sm;
    padding: var(--rbrh-spacing-4) var(--rbrh-spacing-6);
  }
  @mixin screen-lg-up {
    @mixin font-size-md;
    padding: var(--rbrh-spacing-5) var(--rbrh-spacing-7);
  }
}

Troubleshoot​

If PostCSS is not detected in your system:

  • check the "PATH" directory inside the Settings in your Operating System.
  • read about this issue on PostCSS official docs