ismamz/postcss-click


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

License: MIT

Language: JavaScript


PostCSS Click Build Status

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

Magic!

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

CSS jQuery
this $(this) or just let target empty
next $(this).next()
prev $(this).prev()
parent $(this).parent()
children $(this).children()
closest $(this).closest()
siblings $(this).siblings()
find[sel=".bar"] $(this).find(".bar")
next[sel=".foo"] $(this).next(".foo")

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:

License

MIT © Ismael Martínez

Project Statistics

Sourcerank 3
Repository Size 11.7 KB
Stars 18
Forks 0
Watchers 1
Open issues 0
Dependencies 7
Contributors 1
Tags 3
Created
Last updated
Last pushed

Top Contributors See all

Ismael Martínez

Packages Referencing this Repo

postcss-click
PostCSS plugin that allows to use the :click pseudo class and implement it in JavaScript.
Latest release 1.0.0 - Updated - 18 stars

Recent Tags See all

v1.0.0 September 15, 2016
v0.1.1 September 14, 2016
v0.1.0 September 14, 2016

Something wrong with this page? Make a suggestion

Last synced: 2016-09-15 00:22:44 UTC

Login to resync this repository