When using lesscon the commandline, I can pass the option --modify-var="my-var=my-val".
How can I pass the same option when I use less programmatically via API with less.render(lessInput, options)?
I would somehow hope that I can set a property in options like {modifyVar:'my-var=my-val'}. But this seems not to work and I didn't find any documentation regarding this use case.
Thanks for any help.
Unfortunately the options are not described at the API documentation. The easiest way to understanding them, will be by studying the the source of https://github.com/less/less.js/blob/master/bin/lessc.
Both the options and modifyVars option should be an object. For the modifyVars option each variable should be a key of the object. Keys may but don't have to start with a #.
Example:
var less = require('less/lib/less-node');
var options = {};
options['modifyVars'] = {'color1' : 'blue', '#color2': 'darkblue'};
less.render('#color1: red; #color2:yellow; t {color1: #color1; color2: #color2;}', options)
.then(function(output) {
// output.css = string of css
// output.map = undefined
console.log(output.css);
});
The above should output as follows:
t {
color1: blue;
color2: darkblue;
}
Related
I'm building a Vue app where a user reactively generates an HTML page from certain selections. Therefore, there is a very long expression that produces said HTML page. This expression/template is stored in a separate .html file. I would like to have that expression as a computed property in my app, but not sure what's the best way. I want to be able to use either the {{ }} template syntax, or at least the syntax you get inside directives, rather than have to plaster this. in front of every property and method I use, which is what I'd have to do if I move the template to JS-land (e.g. a separate module or just directly define it in the computed property).
Right now I got it working, but it's extremely hacky:
let appSpec = {
/* [snip] */
computed: {
/* other computed properties and… */
html () {
return getAppHTML(this);
}
},
};
let sheetTemplate = await (await fetch("sheet-template.html")).text();
let templateVars = [
...Object.keys(INITIAL_DATA),
...Object.keys(appSpec.computed),
...Object.keys(appSpec.methods)
];
let getAppHTML = new Function(`{${ templateVars.join(", ") }}`, "return `" + sheetTemplate + "`");
/* ... */
I’m thinking there must be a better way to do this.
I don't want to inject the expression directly into the places it's going to be used in my app (e.g. <iframe :srcdoc>), because I want to have a property that corresponds to it (for watchers etc).
Note that I'm using the in-browser API, no build step, and I'd rather keep it that way.
Is it possible to use MarkdownString/MarkupContent with code or pre with span to emulate semantic tokens in Hover? If so, is it possible to access the colors from the user's theme using only the CSS on the span elements? Ideally I would like to avoid using anything VSCode specific.
I saw https://github.com/microsoft/vscode/issues/97409 but there was no solution.
If you want to manually set colors for code you can try this:
// using your fileSelector
let disposable = vscode.languages.registerHoverProvider('plaintext', {
provideHover(document, position) {
const codeBlock = `<code><span style="color:#f00;background-color:#fff;">const</span> a = 12</code>`;
const markdown = new vscode.MarkdownString();
// markdown.appendCodeblock(codeBlock, "javascript");
markdown.appendMarkdown(codeBlock);
markdown.supportHtml = true;
markdown.isTrusted = true;
return new vscode.Hover(markdown, new vscode.Range(position, position));
}
});
<pre> also works, instead of <code>, but I think <code> looks better.
If I define my own API and I want to highlight values, classes and methods of my API in editor. How I can do it? Is it possible to assign some of keyword styles to api tokens?
Here is my instead.lua in api folder of ZBS:
return {
instead = {
type = "lib",
description = "Библиотека INSTEAD",
childs = {
tiny = {
type = "value",
description = "Флаг «минималистичного INSTEAD», без графики и множества других возможностей."
}
}
},
}
And this is some code snippet:
if not instead.tiny then
require "autotheme"
end
So I want instead and tiny to be highlighted in my code.
You can use keyword highlighting, but while it works for "instead" and "tiny", it will also have to be set for "instead.tiny", which is not ideal (this looks like a limitation in the version of the Scintilla editor component used by the IDE); see this ticket for a related discussion and explanation. You may also check a proposed highlight property plugin that does something similar (although for all properties).
I am facing a scenario where the element tag name and attribute is changing from env to env, but the text content alone is unique.
Therefore I am not able to define any value for Selector('could not define anything here').
How could I write a path to locate the element ?
I don't see a direct solution for this, but a workaround that could solve your issue. You could have an object that holds environments specific data for you and which helps you for specific cases as the one that you seem to be confronted with. In this object, you could also store environment specific Selectors. This could, written in TypeScript, look as follows:
import { Selector } from "testcafe";
interface EnvironmentData {
envName: string;
myVariableSelector: Selector;
}
// Set up a list that contains environment specific data objects
const CONFIGS: EnvironmentData[] = [
{
envName: "MyEnv1",
myVariableSelector: Selector("my css selector 1").withText("my text 1")
},
{
envName: "MyEnv2",
myVariableSelector: Selector("my css selector 2").withText("my text 2")
},
{
envName: "MyEnv3",
myVariableSelector: Selector("my css selector 3").withText("my text 3")
}
]
// Assuming that you're CI for instance sets a environment variable ENVIRONMENT_NAME to
// any of the specific environments MyEnv1, MyEnv2 or MyEnv3
function getConfigForEnvironment(envDataSets: EnvironmentData[]): EnvironmentData {
const envData = envDataSets.find((c) => c.envName === process.env.ENVIRONMENT_NAME);
if (envData === undefined) {
console.error(`No suitable data for environment '${process.env.ENVIRONMENT_NAME}' found!`);
process.exit(1);
}
return envData;
}
// Determine the right object before the tests start
const envData = getConfigForEnvironment(CONFIGS);
fixture`My awesome tests`.page("myTestUrl");
test("My test", async (t) => {
// Make use of the object that holds the data for the desired environment
await t.expect(envData.myVariableSelector.exists).ok("Should be fine for any environment!");
});
I did it in a simpler way using the or operator (,)
i,e I wrote the selector with Selector('div,span').withText('Value')
The attribute div and span are changing with environment so I used , to pass both and it worked.
I am making Titanium mobile project where I want to make one global function which I can use throughout the application. For that I have created other .JS file where I have defined the function and I am including that .JS file where I need to use this function and I am successfully able to call the function.
But My question is :
Can I create new Window in that function? As I have added one Label and one MapView in that window but it is not showing, while at the start of function I have added alert('FunctionCalled'), it is showing me alert but not showing me the label I have added in the window.
So anybody can help me to find out whether we can open window through function. If yes then any sample example, so that I can find out what mistake I am making.
Thanks,
Rakesh Gondaliya
you approach CAN work but is not a best practice, you should create a global namespace, add the function to that namespace and then only include the file with the function once in app.js
// apps.js
var myApp = {};
Ti.include('global.js','ui.js');
myApp.ui.openMainWindow();
then we create a seperate file for our ui functions
//ui.js
(function(){
var ui = {};
ui.openMainWindow = function() {
// do open window stuff
// call global function
myApp.global.globalFunction1();
}
myApp.ui = ui;
})();
here is where we create our global functions, we will not have to include the file everywhere since we are adding it to our global namespace
//global.js
(function(){
var global = {};
global.globalFunction1 = function() {
// do super global stuff
}
myApp.global = global;
})();
this is a simple outline of how it can be implemented, I have a complete code listing on my blog
Yes you can create a new window or add a label or anything else. If you wanted to add a label to the current window then you would do:
var helloWorld = Ti.UI.createLabel({ text: "Hello World", height: "auto", width: 200 });
Ti.UI.currentWindow.add(helloWorld);
It won't matter where the code is executing because Ti.UI.currentWindow will be the active window regardless.