PostCSS Click

PostCSS plugin that allows to use the :click pseudo class and implement it in JavaScript.

With this plugin you can define in your stylesheet the behavior of an element when it is clicked. Using the :click pseudo class (like :hover) you will get a generated JavaScript file after processing the CSS with PostCSS.

In this first stage, the JavaScript is written with jQuery. Why? Because is easier.

Run an example locally. See the example branch (⚠️ Not available yet)

Example

CSS Input

.menu a {
    color: #000;
}

.menu a:click {
    color: red;
    @action toggle-class("active");
}

.menu a:click next {
    @action show(1000);
}

.menu a:click .item {
    @action slide-toggle();
}

CSS Output

.menu a {
    color: #000;
}

JavaScript Generated file

The CSS code will generate the JavaScript file with the click events and methods.

$(function() {
    $(".menu a").on("click", function () {
        $(this).css({
            "color", "red"
        }).toggleClass("active");
    });

    $(".menu a").on("click", function () {
        $(this).next().show(1000);
    });

    $(".menu a").on("click", function () {
        $('.item').slideToggle();
    });
});

Rule Structure

Vanilla CSS

element:click target {
    property: value; /* css declaration */
    @action method-name(params); /* atRule for methods */
}

Nested

You can use the following syntax with PreCSS, Sass, Less, Stylus or just the postcss-nested plugin:

element:click {
    target {
        property: value; /* css declaration */
        @action method-name(param); /* atRule for methods */
    }
}

jQuery result

The result in JavaScript will be:

$("element").on("click", function () {
    $("target").css({
        "property": "value"
    }).methodName(param);
});

Features

• element can be a element tag, id or class
• target can be a element tag, id or class or this to refer to the main element or a Traversing Method like next, prev, parent, etc. (See complete list of available selectors)
• method-name should be written like CSS properties (hyphenated lowercase). Ex: toggleClass should be toggle-class.
• method-name you can use jQuery methods or jQuery plugins methods (like Bootstrap JS Plugins):
  • toggle-class
  • add-class
  • remove-class
  • show
  • hide
  • slide-up
  • slide-toggle
  • append
  • html
  • text
  • collapse (Bootstrap)
  • modal (Bootstrap)
  • button (Bootstrap)
  • alert (Bootstrap)
  • and more!
• params are the parameters and values that admit the function.
  • toggle-class function admit a class name like "foo" (string)
  • show function admit the value of the duration like 300 (int)
  • button (Bootstrap) function admit the value toggle (string)
  • modal (Bootstrap) function should be empty: modal()

Note: Multiple selectors is not supported yet.

.foo:click,
.bar {
    @action toggle();
}
// => error

Selectors

The list of selectors is open for suggestions.

Usage

postcss([ require('postcss-click')( /* opts */ ) ])

See PostCSS docs for examples of your environment.

Add scripts

Off course, in your HTML file you have to include the scripts:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="click.js"></script>

Options

output

• Type: String
• Default: "click.js"

Specifies the output file destination.

append

• Type: boolean
• Default: false

If you set true you must specify the output option to append at the end the JavaScript generated into your own file.

beautify

• Type: object
• Default: { indent_size: 2, indent_char: ' ', end_with_newline: true, break_chained_methods: false }

Reformat and reindent the JavaScript output file. This object overrides the default options of js-beautify.

See js-beautify options.

Contributing

Help to improve code and documentation:

• If you have a problem or find an error, create an issue
• Do you want to contribute with code? Send a pull request

License

MIT © Ismael Martínez