🎨 Setting Up PostCSS: Simple Guide

Let me show you how to set up PostCSS on Alpine Linux! PostCSS is a tool that transforms your CSS with JavaScript plugins. It’s like giving your CSS superpowers - autoprefixing, future CSS features, and more!

🤔 What is PostCSS?

PostCSS is a CSS processor that uses JavaScript plugins to transform styles. Think of it as a Swiss Army knife for CSS - it can add vendor prefixes, use tomorrow’s CSS today, optimize your code, and much more!

Benefits include:

• Automatic vendor prefixes
• Use future CSS features now
• Optimize and minify CSS
• Custom plugins for anything
• Better performance than preprocessors

🎯 What You Need

Before starting, you’ll need:

• Alpine Linux installed
• Node.js and npm installed
• Basic CSS knowledge
• A text editor
• About 10 minutes

📋 Step 1: Install Node.js and npm

First, let’s install Node.js:

# Update packages
apk update

# Install Node.js and npm
apk add nodejs npm

# Verify installation
node --version
npm --version

# Create project directory
mkdir ~/my-postcss-project
cd ~/my-postcss-project

# Initialize npm project
npm init -y

📋 Step 2: Install PostCSS

Now install PostCSS and essential plugins:

# Install PostCSS CLI
npm install --save-dev postcss postcss-cli

# Install popular plugins
npm install --save-dev autoprefixer
npm install --save-dev postcss-preset-env
npm install --save-dev cssnano

# Optional but useful plugins
npm install --save-dev postcss-import
npm install --save-dev postcss-nested

Check installation:

# Verify PostCSS
npx postcss --version

# List installed packages
npm list --depth=0

📋 Step 3: Configure PostCSS

Create PostCSS configuration:

# Create config file
cat > postcss.config.js << 'EOF'
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true
      }
    }),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default'
    })
  ]
}
EOF

Alternative config format (.postcssrc.json):

cat > .postcssrc.json << 'EOF'
{
  "plugins": {
    "postcss-import": {},
    "postcss-preset-env": {
      "stage": 3,
      "features": {
        "nesting-rules": true
      }
    },
    "autoprefixer": {},
    "cssnano": {
      "preset": "default"
    }
  }
}
EOF

📋 Step 4: Create Test CSS

Let’s create some CSS to process:

# Create source directory
mkdir -p src/css dist/css

# Create test CSS file
cat > src/css/styles.css << 'EOF'
/* Import other files */
@import "components/buttons.css";

/* Modern CSS features */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing: 1rem;
}

/* Nesting */
.card {
  background: white;
  padding: var(--spacing);
  border-radius: 8px;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  
  & .card-header {
    font-size: 1.5rem;
    margin-bottom: var(--spacing);
  }
}

/* Autoprefixer will handle this */
.flex-container {
  display: flex;
  justify-content: space-between;
  user-select: none;
}

/* Future CSS */
.gradient-text {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Media queries with ranges */
@media (width >= 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
EOF

# Create component file
mkdir -p src/css/components
cat > src/css/components/buttons.css << 'EOF'
.btn {
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &--primary {
    background: var(--primary-color);
    color: white;
    
    &:hover {
      background: color-mix(in srgb, var(--primary-color) 80%, black);
    }
  }
  
  &--secondary {
    background: var(--secondary-color);
    color: white;
  }
}
EOF

📋 Step 5: Process CSS

Now let’s process our CSS:

# Basic processing
npx postcss src/css/styles.css -o dist/css/styles.css

# Watch for changes
npx postcss src/css/styles.css -o dist/css/styles.css --watch

# Process with source maps
npx postcss src/css/styles.css -o dist/css/styles.css --map

# Process all CSS files
npx postcss src/css/*.css --dir dist/css

Add npm scripts:

# Update package.json
cat > package.json << 'EOF'
{
  "name": "my-postcss-project",
  "version": "1.0.0",
  "scripts": {
    "build:css": "postcss src/css/styles.css -o dist/css/styles.css",
    "watch:css": "postcss src/css/styles.css -o dist/css/styles.css --watch",
    "build:all": "postcss src/css/*.css --dir dist/css",
    "dev": "postcss src/css/*.css --dir dist/css --watch"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "cssnano": "^6.0.0",
    "postcss": "^8.4.0",
    "postcss-cli": "^10.0.0",
    "postcss-import": "^15.0.0",
    "postcss-nested": "^6.0.0",
    "postcss-preset-env": "^9.0.0"
  }
}
EOF

📋 Step 6: Create Build Pipeline

Set up a complete build pipeline:

# Create build script
cat > build.sh << 'EOF'
#!/bin/sh
echo "🏗️  Building CSS with PostCSS..."

# Clean dist directory
rm -rf dist/css
mkdir -p dist/css

# Process CSS
npm run build:all

# Show results
echo "✅ Build complete!"
echo "📁 Output files:"
ls -la dist/css/
EOF

chmod +x build.sh

# Create development server
cat > dev-server.sh << 'EOF'
#!/bin/sh
echo "🚀 Starting development server..."
echo "📁 Watching src/css/ for changes..."

# Start PostCSS in watch mode
npm run dev &
POSTCSS_PID=$!

# Simple HTTP server (install if needed)
which python3 > /dev/null && {
    cd dist
    python3 -m http.server 8080 &
    SERVER_PID=$!
    echo "🌐 Server running at http://localhost:8080"
}

# Cleanup on exit
trap "kill $POSTCSS_PID $SERVER_PID 2>/dev/null" EXIT

# Wait
wait
EOF

chmod +x dev-server.sh

🎮 Practice Exercise

Try these PostCSS features:

1. Add custom properties
2. Use nesting
3. Try future CSS
4. Check the output

# Create practice file
cat > src/css/practice.css << 'EOF'
/* Custom properties */
:root {
  --gap: 1rem;
  --color: #ff6b6b;
}

/* Nesting */
.menu {
  display: flex;
  gap: var(--gap);
  
  & li {
    list-style: none;
    
    & a {
      color: var(--color);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* Future CSS */
.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
EOF

# Process it
npx postcss src/css/practice.css -o dist/css/practice.css

# Check the output
cat dist/css/practice.css

🚨 Troubleshooting Common Issues

Plugin Not Working

If plugins aren’t applying:

# Check config file
cat postcss.config.js

# Verify plugin installation
npm list autoprefixer

# Try verbose mode
npx postcss src/css/styles.css -o dist/css/styles.css --verbose

Import Not Resolving

Having import issues?

# Check file paths
ls -la src/css/components/

# Use correct import syntax
# @import "components/buttons.css";
# Not: @import "./components/buttons.css";

Build Errors

Getting build errors?

# Clear npm cache
npm cache clean --force

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

# Check Node version
node --version  # Should be 14+

💡 Pro Tips

Tip 1: Custom Plugin

Create your own plugin:

// my-plugin.js
module.exports = () => {
  return {
    postcssPlugin: 'my-custom-plugin',
    Rule(rule) {
      // Transform rules here
      console.log('Processing:', rule.selector);
    }
  }
}
module.exports.postcss = true;

Tip 2: Environment Config

Different configs for dev/prod:

// postcss.config.js
module.exports = ({ env }) => ({
  plugins: [
    require('autoprefixer'),
    env === 'production' ? require('cssnano') : false
  ].filter(Boolean)
});

Tip 3: Integration

Integrate with build tools:

// For webpack
{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack serve --mode development"
  }
}

✅ Verification Steps

Let’s verify PostCSS works:

# Check processed CSS
cat dist/css/styles.css | grep -E "webkit|moz"

# Verify minification
ls -lh src/css/styles.css dist/css/styles.css

# Test watch mode
npm run watch:css &
touch src/css/styles.css

# Check all plugins loaded
npx postcss --help

🏆 What You Learned

Great work! You can now:

• ✅ Install and configure PostCSS
• ✅ Use powerful CSS plugins
• ✅ Process modern CSS features
• ✅ Set up build pipelines
• ✅ Create custom workflows

Your CSS workflow is supercharged!

🎯 What’s Next?

Now that you have PostCSS running, explore:

• Creating custom plugins
• Integrating with bundlers
• Setting up CSS modules
• Advanced optimization

Remember, PostCSS makes CSS more powerful and maintainable. I use it on every project now! Start with basic plugins and add more as needed.

Happy styling! 🎨