{"id":13433,"library":"less-openui5","title":"less-openui5: OpenUI5 Theme Builder","description":"less-openui5 is a utility library designed to build OpenUI5 themes using the Less.js preprocessor. It provides a `Builder` class that compiles Less input into standard CSS, including an automatically mirrored CSS variant for right-to-left (RTL) language support, and extracts Less variables. The current stable version is 0.11.6. While recent releases primarily contain bug fixes, major versions introduce breaking changes. A key differentiator is its specialized focus on OpenUI5's theming concept, including features like caching build results to optimize performance, especially in server middleware scenarios, and the ability to define custom file system interfaces for advanced use cases. It simplifies the complex process of OpenUI5 theme development by handling Less compilation and RTL variant generation within a dedicated tool.","status":"active","version":"0.11.6","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/SAP/less-openui5","tags":["javascript","openui5","sapui5","ui5","less","less.js","theme"],"install":[{"cmd":"npm install less-openui5","lang":"bash","label":"npm"},{"cmd":"yarn add less-openui5","lang":"bash","label":"yarn"},{"cmd":"pnpm add less-openui5","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for Less compilation, tightly coupled internally.","package":"less","optional":false},{"reason":"Used for CSS manipulation, likely related to RTL transformations or parsing.","package":"@adobe/css-tools","optional":false}],"imports":[{"note":"While the README uses CommonJS `require`, ESM named imports for `Builder` are the modern approach. The package internally provides a `Builder` class.","wrong":"const lessOpenUI5 = require('less-openui5');\nconst builder = new lessOpenUI5.Builder();","symbol":"Builder","correct":"import { Builder } from 'less-openui5';\nconst builder = new Builder();"},{"note":"The package provides an object with `Builder` as a property, so a namespace import (`* as`) is appropriate for ESM when not directly importing `Builder`.","wrong":"import lessOpenUI5 from 'less-openui5'; // No default export","symbol":"lessOpenUI5","correct":"import * as lessOpenUI5 from 'less-openui5';\nconst builder = new lessOpenUI5.Builder();"}],"quickstart":{"code":"import { Builder } from 'less-openui5';\n\nconst builder = new Builder();\n\nbuilder.build({\n  lessInput: `\n    @mainColor: #337ab7;\n    @headingFont: 'Arial', sans-serif;\n\n    .my-app {\n      background-color: @mainColor;\n      h1 {\n        font-family: @headingFont;\n        color: darken(@mainColor, 10%);\n        text-align: left;\n      }\n      p {\n        margin-left: 10px;\n      }\n    }\n  `\n})\n.then((result) => {\n  console.log('--- Regular CSS ---');\n  console.log(result.css);\n  console.log('\\n--- RTL CSS ---');\n  console.log(result.cssRtl);\n  console.log('\\n--- Global Variables ---');\n  console.log(result.variables);\n})\n.catch((error) => {\n  console.error('Theme build failed:', error);\n})\n.finally(() => {\n  builder.clearCache(); // Essential for long-running processes\n});","lang":"typescript","description":"This quickstart demonstrates how to initialize the Less OpenUI5 Builder, compile a simple Less string into regular and RTL CSS, extract global Less variables, and properly clear the builder's cache after use."},"warnings":[{"fix":"Review Less files and remove any JavaScript expressions or functions (e.g., `calc(1 + unit(1, 'px'))`). Ensure all calculations and logic are handled using native Less features.","message":"As of v0.10.0, JavaScript execution within Less.js is permanently disabled. The `javascriptEnabled` parser option has been removed and cannot be enabled.","severity":"breaking","affected_versions":">=0.10.0"},{"fix":"Modify `@import` statements to reference local file paths. For remote resources, pre-fetch them to the local file system or implement a custom `fs` interface for the Builder to handle them.","message":"Since v0.9.0, importing Less files over HTTP(S) is no longer supported. All Less imports must be local file system paths.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Upgrade your Node.js runtime to version 10 or higher. For the latest versions of `less-openui5`, Node.js 20.11.0 or 22.0.0+ is required.","message":"Version 0.9.0 introduced a minimum Node.js requirement of `engines.node: '>= 10'`. Later versions (`package.json` at source) specify `^20.11.0 || >=22.0.0`.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Ensure that if your theme relies on specific RTL image variants, the corresponding `img-RTL` directory and mirrored image files are correctly structured and present in your project. Otherwise, the paths will not be transformed.","message":"In v0.11.0, the logic for rewriting image paths for the RTL-variant changed. Paths are now only rewritten if the target RTL-specific files actually exist.","severity":"breaking","affected_versions":">=0.11.0"},{"fix":"Avoid passing `sourceMap` or `cleancss` options to the `compiler` configuration when invoking the `build` method. Handle source map generation and CSS minification using external tools or post-processing steps.","message":"The `compiler` options `sourceMap` and `cleancss` are not supported and will throw an exception if used.","severity":"gotcha","affected_versions":"*"},{"fix":"Stay updated with the latest patch releases for `less-openui5` to benefit from dependency maintenance. Report any unexpected CSS parsing or output issues to the package maintainers.","message":"There have been multiple fixes and reverts related to switching to a maintained fork of the 'css' package in versions 0.11.3, 0.11.5, and 0.11.6. This indicates potential instability or dependency issues in the underlying CSS parsing/manipulation.","severity":"gotcha","affected_versions":"0.11.3, 0.11.5, 0.11.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Remove the `javascriptEnabled: true` option from `parser` configurations and refactor Less code to avoid JavaScript expressions.","cause":"Attempting to enable or use JavaScript within Less code after v0.10.0.","error":"Error: Parser option `javascriptEnabled` has been removed."},{"fix":"Download the remote Less file to your local file system and update the `@import` path to a local reference. Alternatively, provide a custom `fs` option to the `Builder` that can resolve network resources.","cause":"Attempting to `@import` a Less file from an HTTP(S) URL, which is no longer supported since v0.9.0.","error":"Error: No matching resource found for 'http(s)://...' in root paths."},{"fix":"Remove the `sourceMap` option from the `compiler` configuration. Implement source map generation as a separate post-processing step if required.","cause":"Passing `sourceMap: true` (or any value) in the `compiler` options.","error":"The `sourceMap` option is not supported. An exception will be thrown when used."},{"fix":"Remove the `cleancss` option from the `compiler` configuration. Implement CSS minification using a dedicated minifier tool as a separate post-processing step.","cause":"Passing `cleancss: true` (or any value) in the `compiler` options.","error":"The `cleancss` option is not supported. An exception will be thrown when used."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"less-openui5","cli_version":null}