postcss-wp

0.3.0 • Public • Published

PostCSS WP Build Status

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 
}

Package Sidebar

Install

npm i postcss-wp

Weekly Downloads

1

Version

0.3.0

License

CC0-1.0

Last publish

Collaborators

  • jonathantneal