postcss-click editorconfig travis-ci npm

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

3 years after

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.


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

Related Repositories

uncss

uncss

Remove unused styles from CSS ...

megaboilerplate

megaboilerplate

Handcrafted starter projects, optimized for simplicity and ease of use. ...

Fluidbox

Fluidbox

Replicating and improving the lightbox module seen on Medium with fluid transiti ...

mdcss

mdcss

Easily create and maintain style guides using CSS comments ...

astexplorer

astexplorer

A web tool to explore the ASTs generated by various parsers. ...


Top Contributors

ismamz

Releases

-   v1.0.0 zip tar
-   v0.1.0 zip tar