# Using a .CSS file with a UXPScript-based dialog

**URL:** <https://forums.creativeclouddeveloper.com/t/using-a-css-file-with-a-uxpscript-based-dialog/7263>\
**Category:** InDesign\
**Tags:** javascript, css, dom\
**Created:** [December 20, 2023, 1:35pm UTC](https://forums.creativeclouddeveloper.com/t/using-a-css-file-with-a-uxpscript-based-dialog/7263 "2023-12-20T13:35:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![medium\_jon](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/medium_jon/32/2371_2.png) [@medium\_jon](https://forums.creativeclouddeveloper.com/u/medium_jon)\
**Post date:** [December 20, 2023, 1:35pm UTC](https://forums.creativeclouddeveloper.com/t/using-a-css-file-with-a-uxpscript-based-dialog/7263/1 "2023-12-20T13:35:21Z")

</div>

I have a legacy ExtendScript based solution that I am intending to build a UXP **Script** based dialog for so that I don’t have to build the dialog both in ExtendScript’s ScriptUI and then again in UXP when the solution moves to 100% UXP Plug-in.  
So, as a proof of concept we created this:

```auto
		var uxpScript_a = [];
		uxpScript_a.push('const script = require("uxp").script;');
		uxpScript_a.push('var dialog_o = document.createElement("dialog");');
		uxpScript_a.push('dialog_o.classList.add("dialog-s-column");');
		uxpScript_a.push('document.appendChild(dialog_o);');
		uxpScript_a.push('var textField_o = document.createElement("sp-textfield");');
		uxpScript_a.push('textField_o.value = script.args[0];');
		uxpScript_a.push('dialog_o.appendChild(textField_o);');
		uxpScript_a.push('var button_o = document.createElement("sp-button");');
		uxpScript_a.push('button_o.textContent = "OK";');
		uxpScript_a.push('dialog_o.appendChild(button_o);');
		uxpScript_a.push('button_o.onclick = function () {');
		uxpScript_a.push('	script.setResult(textField_o.value);');
		uxpScript_a.push('	dialog_o.close();');
		uxpScript_a.push('}');
		uxpScript_a.push('return dialog_o.showModal();');

		var dialogResult_s = app.doScript(uxpScript_a.join('\n'), ScriptLanguage.UXPSCRIPT, ['sample']);

```

where the final line there is being called by ExtendScript.  
It works, I get a dialog and I get the value of the text field returned:

 ![UXPScript-based dialog](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/c/c75fb5a2654195634a74665b35f67be6b64d2edc.png)

Our UXP based plug-in solution, still under development, has a .css file where we have classes defined. For example the `dialog-s-column` referenced in the 4th line of the sample above.

I realize that supposedly a UXPScript can only use a single file for the script, but can that script somehow utilize an external .css file?

jsw

---

<div class="post-metadata">

**Author:** ![sttk3](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@sttk3](https://forums.creativeclouddeveloper.com/u/sttk3)\
**Post date:** [December 21, 2023, 11:22am UTC](https://forums.creativeclouddeveloper.com/t/using-a-css-file-with-a-uxpscript-based-dialog/7263/2 "2023-12-21T11:22:44Z")

</div>

In other words, you want to dynamically generate a UXP script from ExtendScript and bundle the contents of an already existing CSS file with it?

You might be able to do that by passing the html/css content as text to innerHTML. I’ve not done this, so I can’t be sure.

The sample code to generate a dialog in Plugin for Adobe XD may help.

> <https://github.com/AdobeXD/plugin-samples/blob/263538bdecd88f6a25dfe1e01806eba7ed6f3ff6/ui-dialog-variations/lib/dialogs.js#L129-L233>

---

<div class="post-metadata">

**Author:** ![medium\_jon](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/medium_jon/32/2371_2.png) [@medium\_jon](https://forums.creativeclouddeveloper.com/u/medium_jon)\
**Post date:** [December 21, 2023, 3:48pm UTC](https://forums.creativeclouddeveloper.com/t/using-a-css-file-with-a-uxpscript-based-dialog/7263/3 "2023-12-21T15:48:28Z")

</div>

Thanks @sttk3! Much appreciated.  
From further looking at things on my end I assumed we were either going to turn out just like you showed or I was going to basically replicate the CSS style attributes on the elements as they were constructed. It might turn out to be a combination if the CSS class gets reused.

jsw

---

<div class="post-metadata">

**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\
**Post date:** [January 2, 2024, 10:46am UTC](https://forums.creativeclouddeveloper.com/t/using-a-css-file-with-a-uxpscript-based-dialog/7263/4 "2024-01-02T10:46:47Z")

</div>

Would something like

```auto
const styleTag = document.createElement('style');
styleTag.innerHTML = <your .css content>
document.body.appendChild(styleTag);

```

work for you?