PostCSS plugin that allows to use the
:clickpseudo 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.
.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();
}.menu a {
color: #000;
}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();
});
});element:click target {
property: value; /* css declaration */
@action method-name(params); /* atRule for methods */
}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 */
}
}The result in JavaScript will be:
$("element").on("click", function () {
$("target").css({
"property": "value"
}).methodName(param);
});elementcan be a element tag,idorclasstargetcan be a element tag,idorclassorthisto refer to the mainelementor a Traversing Method likenext,prev,parent, etc. (See complete list of available selectors)method-nameshould be written like CSS properties (hyphenated lowercase). Ex:toggleClassshould betoggle-class.method-nameyou can use jQuery methods or jQuery plugins methods (like Bootstrap JS Plugins):paramsare the parameters and values that admit the function.
Note: Multiple selectors is not supported yet.
.foo:click,
.bar {
@action toggle();
}
// => error| 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.
postcss([ require('postcss-click')( /* opts */ ) ])See PostCSS docs for examples of your environment.
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>- Type:
String - Default:
"click.js"
Specifies the output file destination.
- 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.
- 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.
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
MIT © Ismael Martínez