{"id":15284617,"url":"https://github.com/zkoss/zkless-engine","last_synced_at":"2025-04-12T23:43:58.182Z","repository":{"id":35040483,"uuid":"199599886","full_name":"zkoss/zkless-engine","owner":"zkoss","description":"Compile ZK Themes using less.","archived":false,"fork":false,"pushed_at":"2023-07-12T02:43:20.000Z","size":75791,"stargazers_count":0,"open_issues_count":2,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-12T23:43:49.851Z","etag":null,"topics":["compile-zk-themes","zkless-engine"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkoss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-30T07:33:44.000Z","updated_at":"2021-10-15T03:29:58.000Z","dependencies_parsed_at":"2023-02-16T03:31:33.444Z","dependency_job_id":null,"html_url":"https://github.com/zkoss/zkless-engine","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2Fzkless-engine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2Fzkless-engine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2Fzkless-engine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkoss%2Fzkless-engine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkoss","download_url":"https://codeload.github.com/zkoss/zkless-engine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647256,"owners_count":21139081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compile-zk-themes","zkless-engine"],"created_at":"2024-09-30T14:59:07.815Z","updated_at":"2025-04-12T23:43:58.163Z","avatar_url":"https://github.com/zkoss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# zkless-engine\nCompile ZK Themes using the [lesscss compiler](http://lesscss.org/).\n\n# Features\n* convert ZK `@import` into a LESS valid path\n\n## Install / Run\n\nRequires node \u003e=10.16\n\n### Use globally\n\n    npm install zkless-engine -g\n    zklessc [params]\n    \n### Use locally (add to package.json)\n\n    npm install zkless-engine --save-dev\n    npx zklessc [params]\n\n### Available parameters\n\n| param           | description                                     | default/value           |\n| --------------- | ----------------------------------------------- | ----------------------- |\n| `-s/--source`   | source folder to compile/watch                  | src/main/resources/web  |\n| `-o/--output`   | output folder for .css.dsp files                | target/classes/web      |\n| `-e/--extension`| output file extension                           | .css.dsp (optional)     |\n| `-c/--compress` | minify output files                             | false (optional)        |\n| `-i/--imports`  | specify multiple folders for @import resolution | - (optional/multiple)   |\n| `--less-opts`   | json string with custom [less options](http://lesscss.org/usage/#less-options)  | {} |\n| `-w/--watch`    | watch files after successful compile            | false (optional)        |\n| `--live-reload-port` | port for live reloading server             | 50000 (optional)        |\n\n## Examples\n\n### Basic\n\nCompile a custom zktheme cloned from [zk theme template project](https://github.com/zkoss/zkThemeTemplate):\n\n(1) long params, (2) shortcut params and watch, (3) and compress\n\n```\n    zklessc --source src/archive/web --output target/classes/web/mytheme\n    zklessc -s src/archive/web -o target/classes/web/mytheme -w\n    zklessc -s src/archive/web -o target/classes/web/mytheme -cw\n```\n\n### Include external folders into build \n\nSee [less include paths](http://lesscss.org/usage/#less-options-include-paths)\n\nAssume the folder structure:\n```\nroot\n- mytheme \n  - src/archive/web/js/zul/wgt/button/less\n    - button.less\n    - _mybutton.less\n- 3rdparty\n  - amazingtool\n    - shapes.less\n- styleguide\n  - corporatecolors.less\n```\n\nBy executing the command ...\n\n    zklessc -s src/archive/web -o target/classes/web/mytheme -i ../3rdparty -i ../styleguide\n\n... less will find @imports based on those folders as well\n\nbutton.less\n```less\n@import \"/zul/less/_header.less\"; /*absolute import based on source directory (-s)*/\n/*omitted zk styles*/\n/*your imports*/\n@import \"_mybutton.less\"; /*relative import*/\n```\n\n_mybutton.less\n```less\n@import \"/amazingtool/shapes.less\"; /*will be found below \"-i ../3rdparty\"*/\n@import \"/corporatecolors.less\"; /*will be found below \"-i ../styleguide\"*/\n/*my styles*/\n\n.z-button {\n    color: @corporateGreen; /* using a variable from corporatecolors.less */\n    .amazing-shape-rounded(10px);\n}\n```\n\n### Maven integration\n\nSince zklessc is a plain command line tool it can be integrated into a maven build using the standard [exec-maven-plugin](https://www.mojohaus.org/exec-maven-plugin/index.html).\n\ne.g. run `zklessc` during the [process-resources phase](https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle):\n\n```xml\n...\n\u003cbuild\u003e\n  \u003cresources\u003e\n    \u003c!-- handle class web resources separately below --\u003e\n    \u003cresource\u003e\n      \u003cdirectory\u003e${project.basedir}/src/archive\u003c/directory\u003e\n      \u003cexcludes\u003e\n        \u003cexclude\u003eweb/**\u003c/exclude\u003e\n      \u003c/excludes\u003e\n    \u003c/resource\u003e\n    \u003c!-- copy non-less into theme folder (here artifactId == theme name), \n    less files will be handled by plugin below --\u003e\n    \u003cresource\u003e\n      \u003cdirectory\u003e${project.basedir}/src/archive/web\u003c/directory\u003e\n      \u003cexcludes\u003e\n        \u003cexclude\u003e**/*.less\u003c/exclude\u003e\n      \u003c/excludes\u003e\n      \u003ctargetPath\u003e${project.build.outputDirectory}/web/${project.artifactId}\u003c/targetPath\u003e\n    \u003c/resource\u003e\n  \u003c/resources\u003e\n  \u003cplugins\u003e\n    ...\n    \u003cplugin\u003e\n      \u003cgroupId\u003eorg.codehaus.mojo\u003c/groupId\u003e\n      \u003cartifactId\u003eexec-maven-plugin\u003c/artifactId\u003e\n      \u003cversion\u003e1.6.0\u003c/version\u003e\n      \u003cexecutions\u003e\n        \u003cexecution\u003e\n          \u003cid\u003ecompile-less\u003c/id\u003e\n          \u003cphase\u003eprocess-resources\u003c/phase\u003e\n          \u003cgoals\u003e\n            \u003cgoal\u003eexec\u003c/goal\u003e\n          \u003c/goals\u003e\n          \u003cconfiguration\u003e\n            \u003cexecutable\u003ezklessc\u003c/executable\u003e\n            \u003carguments\u003e\n              \u003cargument\u003e--source\u003c/argument\u003e\n              \u003cargument\u003e${project.basedir}/src/archive/web\u003c/argument\u003e\n              \u003cargument\u003e--output\u003c/argument\u003e\n              \u003cargument\u003e${project.build.outputDirectory}/web/${project.artifactId}\u003c/argument\u003e\n              \u003cargument\u003e--compress\u003c/argument\u003e\n            \u003c/arguments\u003e\n          \u003c/configuration\u003e\n        \u003c/execution\u003e\n      \u003c/executions\u003e\n    \u003c/plugin\u003e\n    ...\n```\n\nThen execute directly via:\n\n    mvn process-recources\n\nor build the project normally\n\n    mvn clean package\n\n### Gradle usage\n\nCall the same command from an [Exec](https://docs.gradle.org/current/dsl/org.gradle.api.tasks.Exec.html)-task\n\n### Live Reloading (during development)\n\nWhen `--watch` is enabled an http server is automatically started on port 50000 (or `--live-reload-port`).\n\nBy adding the following scripts to your zk application (zul page or globally) the page will be notified about zkless compile results.\n\n```\n    \u003cscript src=\"http://localhost:50000/socket.io/socket.io.js\"/\u003e\n    \u003cscript src=\"http://localhost:50000/zklessLiveReloadStyles.js\"/\u003e\n    \u003c!--\u003cscript src=\"http://localhost:50000/zklessLiveReloadStylesResize.js\"/\u003e--\u003e\n    \u003c!--\u003cscript src=\"http://localhost:50000/zklessLiveReloadPage.js\"/\u003e--\u003e\n```\n\nYou have to add the socked.io client script provided by the server.\nBesides, that there are 3 options for different behaviour.\n\n```zklessLiveReloadStyles.js``` -\u003e reload only stylesheets after compilation\n\n```zklessLiveReloadStylesResize.js``` -\u003e reload stylesheets and call zUtl.fireSized (useful when changing paddings/margins)\n\n```zklessLiveReloadPage.js``` -\u003e reload the whole page\n\n# Auditing package dependencies for security vulnerabilities\n`npm audit`\n\nAfter fixing security issues, run test:\n\n`npm test`\n\n# Publish New version to npm repository\n`npm publish`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkoss%2Fzkless-engine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkoss%2Fzkless-engine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkoss%2Fzkless-engine/lists"}