How to Use PostCSS in a Vue Project demo repo

PostCSS (opens new window) is a tool for transforming styles with JS plugins.

Plugins (opens new window) used in this tutorial:

• postcss-preset-env (opens new window)
• rucksack-css (opens new window)

👣 Steps

1. Create a Vue project and install PostCSS Preset Env and Rucksack.

npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i postcss-preset-env rucksack-css

2. I want to use custom properties (opens new window) and custom media queries (opens new window) so I will create a .css file to store the variables, e.g. in src/assets/variables.css.

:root {
  /* Under the sea pantone color */
  --sea-pink: #de98ab;
  --limpet-shell: #98ddde;
  --living-coral: #f36e60;
  --vibrant-yellow: #ffdb3b;
  --turkish-sea: #185190;
  --viridian-green: #359499;
  --turtle-green: #81894e;
  --blue-depths: #273055;
}

/* Breakpoints */
@custom-media --sm (width >= 576px);
@custom-media --md (width >= 786px);
@custom-media --lg (width >= 992px);
@custom-media --xl (width >= 1200px);

3. Register the plugins and pass the options (opens new window) in postcss.config.js.

module.exports = {
  plugins: {
    "postcss-preset-env": {
      stage: 1,
      importFrom: "./src/assets/variables.css"
    },
    "rucksack-css": {}
  }
};

4. Register the variables in src/main.js.

import "./assets/variables.css";

5. Use PostCSS, e.g. in src/views/postcss.vue.

<template>
  <div class="wrapper">
    <h1>PostCSS Demo</h1>

    <p>Articles about PostCSS:</p>

    <ul class="list-group">
      <li
        v-for="(item, index) in articles"
        :key="index"
        class="list-group-item"
      >
        <a
          :href="item.url"
          target="_blank"
          class="d-block d-md-flex align-items-center"
        >
          <img
            :src="item.img"
            :alt="item.title"
            class="d-block img-thumbnail mr-md-4"
          />

          <h2 class="h4 py-2">{{ item.title }}</h2>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        {
          title:
            "Some things you may think about PostCSS... and you might be wrong",
          url: "http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/",
          img: "https://placeimg.com/900/300/tech"
        },
        {
          title:
            "It's Time for Everyone to Learn About PostCSS What It Really Is; What It Really Does",
          url: "https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/",
          img: "https://placeimg.com/900/300/tech/grayscale"
        },
        {
          title: "PostCSS Deep Dive",
          url: "https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889",
          img: "https://placeimg.com/900/300/tech/sepia"
        }
      ]
    };
  }
};
</script>

<style lang="postcss" scoped>
.wrapper {
  font-family: system-ui;
  font-size: responsive;
  transition: all 250ms ease-in-cubic;
}

a {
  color: var(--turkish-sea);
  padding: 0.75rem 1.25rem;

  @media (--sm) {
    color: var(--viridian-green);
  }

  @media (--md) {
    color: var(--turtle-green);
  }

  @media (--xl) {
    color: var(--living-coral);
  }

  &:hover {
    background-color: #f6f7fb;
  }
}

img {
  @media (min-width: 768px) {
    max-width: 225px;
  }
}
</style>

📖 Explanation

Settings

• I use stage (opens new window) 1 because I want to use a couple features that are still at stage 1. The default is stage 2. Instead of using lower stage, you can also add the features (opens new window) you want to use.
• Features page (opens new window) show the stage of each feature.

Usage

• Rucksack features used by .wrapper:
  • responsive typography (opens new window)
  • all the easings (opens new window)
• font-family: system-ui; is from the postcss-preset-env's system-ui font family (opens new window) feature.
• & li, & a, and &:hover use the nesting rules (opens new window).