postcss-wp v0.3.0

PostCSS WP

PostCSS WP is a PostCSS plugin that allows you to generate WordPress PHP files from CSS files.

This plugin is in a very experimental state.

Source CSS:

@php {
/**
 * Template Name: Search Results (hard-coded)
 *
 * @package JDRF 2015
 * @since 0.1.0
 */

get_header();
}

h1 {
	content: "Welcome to CSS";
}

nav.sidebar.--main {
	ul[role="menu"] {
		@foreach ( $sidebar_items as $item ) {
			li:class( $item->active, active ) {
				esc_html: $item->title;
			}
		}
	}
}

@if ( $page->has_footer ) {
	@import "footer";
}

Output PHP:

<?php
/**
 * Template Name: Search Results (hard-coded)
 *
 * @package JDRF 2015
 * @since 0.1.0
 */

get_header();
?>

<h1>
	Welcome to CSS
</h1>

<nav class="sidebar --main">
	<ul role="menu">
		<?php foreach ( $sidebar_items as $item ) { ?>
			<li class="<?php if ($item->active) { echo esc_attr('active'); } ?>">
				<?php echo esc_html($item->title); ?>
			</li>
		<?php } ?>
	</ul>
</nav>

<?php if ( $page->has_footer ) { ?>
	# Processed PHP from footer.scss
<?php } ?>

Usage

You just need to follow these two steps to use PostCSS WP:

1. Add PostCSS to your build tool.
2. Add PostCSS WP as a PostCSS process.

npm install postcss-wp --save-dev

Node

Require PostCSS WP directly in your script, being certain to enable Safe Mode.

postcss([ require('postcss-wp')({ /* options */ }) ]).process(css, { safe: true });

Grunt

Install Grunt PostCSS:

npm install postcss-wp --save-dev

Require PostCSS WP directly in your Gruntfile, being certain to enable Safe Mode:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
	postcss: {
		options: {
			processors: [
				require('postcss-wp')({ /* options */ })
			],
			safe: true
		},
		dist: {
			src: 'css-templates/*.css'
		}
	}
});

Options

dest (string): path to the file generated by CSS.

{
	dest: 'foo.php' // output to foo.php 
}