@goldpage/postcss v0.5.13

Goldpage + PostCSS = :heart:

@goldpage/postcss

Use Goldpage with PostCSS.

Usage

Install @goldpage/postcss.

$ npm install @goldpage/postcss

The @goldpage/postcss plugin is automatically loaded.

Configure PostCSS:

module.exports = {
  // All options defined here are passed down as options for `postcss-loader`.
  // Thus, this is where you add PostCSS plugins, a PostCSS parser, etc.
  postcss: {
    plugins: [
      require('postcss-cssnext')()
    ],
    parser: 'sugarss',
  },
};

Example

// ./example/pages/landing.css

:root
  --red: #f88
  --blue: #88f

.red-on-blue
  background-color: var(--blue)
  color: var(--red)

.blue-on-red
  background-color: var(--red)
  color: var(--blue)

.red-on-blue,
.blue-on-red
  font-size: 2em
  width: 300px
  padding: 20px
  margin: 10px

// ./example/pages/landing.page.js

import React from 'react';
import './landing.css';

const LandingComponent = () => (
  <div>
    <div className="blue-on-red">
      Blue on red.
    </div>
    <div className="red-on-blue">
      Red on blue.
    </div>
  </div>
);

const LandingPage = {
  route: '/',
  view: LandingComponent,
  renderToDom: false,
  renderToHtml: true,
};

export default LandingPage;

// ./example/goldpage.config.js

module.exports = {
  // All options defined here are passed down as options for `postcss-loader`.
  // Thus, this is where you add PostCSS plugins, a PostCSS parser, etc.
  postcss: {
    plugins: [
      require('postcss-cssnext')()
    ],
    parser: 'sugarss',
  },
};