Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CssSyntaxError] on npx directus-extensions build #3

Open
AristideBH opened this issue Jul 12, 2023 · 0 comments
Open

[CssSyntaxError] on npx directus-extensions build #3

AristideBH opened this issue Jul 12, 2023 · 0 comments

Comments

@AristideBH
Copy link

AristideBH commented Jul 12, 2023

Hello Stouch,
I've noticed a bug upon launching npx directus-extensions build :

❯ npx directus-extension build
✖ Failed
[CssSyntaxError] /home/aristide/code/directus-interface-uuid-file-image/src/interface.vue:28:6: Unknown word (plugin vite:vue)

/home/aristide/code/directus-interface-uuid-file-image/src/interface.vue:333:6
CssSyntaxError: /home/aristide/code/directus-interface-uuid-file-image/src/interface.vue:28:6: Unknown word
    at Input.error (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/input.js:106:16)
    at Parser.unknownWord (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/parser.js:587:22)
    at Parser.decl (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/parser.js:232:16)
    at Parser.other (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/parser.js:393:18)
    at Parser.parse (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/parser.js:464:16)
    at parse (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/lazy-result.js:133:16)
    at Processor.process (/home/aristide/code/directus-interface-uuid-file-image/node_modules/postcss/lib/processor.js:53:14)
    at doCompileStyle (/home/aristide/code/directus-interface-uuid-file-image/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15503:36)
    at Object.compileStyleAsync (/home/aristide/code/directus-interface-uuid-file-image/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15423:10)

I've updated all packages to last version in package.json :

...
  "devDependencies": {
    "@directus/extensions-sdk": "10.1.6",
    "@rollup/plugin-yaml": "^4.1.1",
    "typescript": "^5.1.6",
    "vue": "^3.3.4"
  },
  "dependencies": {
    "nanoid": "^4.0.2",
    "sass": "^1.63.6",
    "yaml-loader": "^0.8.0"
  }
...

Also applied the fix from the other issue #1, about get-root-path.ts.
The postinstall script was running in circle, and couldn't create the "directus" folder.

It seems the SCSS processor isn't included in the project by default, causing the error upon building.

FIX

A simple fix is to use a SCSS to CSS converter, and replace the style tag content and lang attribute :

<style scoped>
  .image-preview {
    position: relative;
    width: 100%;
    height: var(--input-height-tall);
    overflow: hidden;
    background-color: var(--background-subdued);
    border-radius: var(--border-radius);
  }
  img {
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .is-svg {
    padding: 32px;
    background-color: var(--background-normal-alt);
  }
  .is-svg img {
    object-fit: contain;
  }
  .image-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--foreground-subdued);
    background-color: var(--background-normal);
  }
  .image-error .v-icon {
    margin-bottom: 6px;
  }
  .image-error .message {
    max-width: 300px;
    padding: 0 16px;
    text-align: center;
  }
  .shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 40px;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: linear-gradient(
      180deg,
      rgba(38, 50, 56, 0) 0%,
      rgba(38, 50, 56, 0.25) 100%
    );
    transition: height var(--fast) var(--transition);
  }
  .actions {
    --v-button-color: var(--foreground-subdued);
    --v-button-background-color: var(--white);
    --v-button-color-hover: var(--foreground-normal);
    --v-button-background-color-hover: var(--white);
    position: absolute;
    top: 30%;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .actions .v-button {
    margin-right: 12px;
    transform: translateY(10px);
    opacity: 0;
    transition: var(--medium) var(--transition);
    transition-property: opacity transform;
  }
  .actions .v-button:nth-of-type(1) {
    transition-delay: 0ms;
  }
  .actions .v-button:nth-of-type(2) {
    transition-delay: 25ms;
  }
  .actions .v-button:nth-of-type(3) {
    transition-delay: 50ms;
  }
  .actions .v-button:nth-of-type(4) {
    transition-delay: 75ms;
  }
  .actions .v-button:nth-of-type(5) {
    transition-delay: 100ms;
  }
  .actions .v-button:last-child {
    margin-right: 0px;
  }
  .info {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    padding: 8px 12px;
    line-height: 1.2;
  }
  .title {
    color: var(--white);
  }
  .meta {
    height: 17px;
    max-height: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.75);
    transition: max-height var(--fast) var(--transition);
  }
  .image-preview:hover .shadow {
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(38, 50, 56, 0) 0%,
      rgba(38, 50, 56, 0.5) 100%
    );
  }
  .image-preview:hover .actions .v-button {
    transform: translateY(0px);
    opacity: 1;
  }
  .image-preview:hover .meta {
    max-height: 17px;
  }
  .disabled-placeholder {
    height: var(--input-height-tall);
  }
</style>

I was then able to build with success ;)
Also, as I couldn't find any index.js as release, I thought some of yall might like it :

import{defineComponent as e,ref as n,computed as t,watch as a,resolveComponent as i,resolveDirective as o,openBlock as r,createElementBlock as d,createBlock as l,withCtx as s,createTextVNode as u,toDisplayString as c,normalizeClass as v,createVNode as g,createElementVNode as m,withDirectives as p,createCommentVNode as f,pushScopeId as b,popScopeId as h}from"vue";import{useApi as y}from"@directus/extensions-sdk";let w=(e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce(((e,n)=>e+=(n&=63)<36?n.toString(36):n<62?(n-26).toString(36).toUpperCase():n>62?"-":"_"),"");function x(){const e=window.location.pathname.split("/"),n=e.indexOf("admin");return e.slice(0,n).join("/")+"/"}function k(e,n,t){const a=t||function(e){var n;return(null==(n=e.defaults.headers.common.Authorization)?void 0:n.split(" ")[1])||null}(e);return a?function(e,n){const t=[];for(const[e,a]of Object.entries(n))t.push(`${e}=${a}`);return e.includes("?")?`${e}&${t.join("&")}`:`${e}?${t.join("&")}`}(n,{access_token:a}):n}var _=e({components:{},props:{value:{type:[String,Object],default:null},disabled:{type:Boolean,default:!1},folder:{type:String,default:void 0},file_key_to_get:{type:String,default:"filename_disk"}},emits:["input"],setup(e,{emit:i}){const o=n(!1),r=n(null),d=n(!1),l=n(!1),s=n(null),u=n(w()),c=y(),v=t((()=>{if(!r.value)return null;if(r.value.type.includes("svg"))return k(c,x()+`assets/${r.value.id}`);if(r.value.type.includes("image")){const e=x()+`assets/${r.value.id}?key=system-large-cover&cache-buster=${u.value}`;return k(c,e)}return null})),g=t((()=>r.value?k(c,x()+`assets/${r.value.id}`):null)),m=t((()=>{if(!r.value)return null;const{filesize:e,width:n,height:t,type:a}=r.value;return n&&t?`${n}x${t} • ${e} • ${a}`:`${e} • ${a}`}));a((()=>e.value),((n,t)=>{n!==t&&(n&&async function(){var n;o.value=!0;try{let t="string"==typeof e.value?e.value:null==(n=e.value)?void 0:n.id;t=t.split(".").slice(0,-1).join(".");const a=await c.get(`/files/${t}`,{params:{fields:["id","title","width","height","filesize","type","filename_download"]}});null!==e.value&&"object"==typeof e.value?r.value={...a.data.data,...e.value}:r.value=a.data.data}catch(e){console.log(e)}finally{o.value=!1}}(),t&&null===n&&b())}),{immediate:!0});const{edits:p,stageEdits:f}={edits:t((()=>e.value&&"object"==typeof e.value?e.value:{})),stageEdits:function(n){r.value&&(console.log(n),i("input",r.value[e.file_key_to_get]))}};return{loading:o,image:r,src:v,imageError:s,imageErrorHandler:async function(){var e,n,t,a;if(!v.value)return;try{await c.get(v.value)}catch(i){s.value=null==(a=null==(t=null==(n=null==(e=i.response)?void 0:e.data)?void 0:n.errors[0])?void 0:t.extensions)?void 0:a.code,s.value||(s.value="UNKNOWN")}},meta:m,lightboxActive:d,editDrawerActive:l,changeCacheBuster:function(){u.value=w()},setImage:function(n){console.log("setImage",n),r.value=n,i("input",n[e.file_key_to_get])},deselect:b,downloadSrc:g,edits:p,stageEdits:f};function b(){i("input",null),o.value=!1,r.value=null,d.value=!1,l.value=!1}}}),$=[],E=[];!function(e,n){if(e&&"undefined"!=typeof document){var t,a=!0===n.prepend?"prepend":"append",i=!0===n.singleTag,o="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(i){var r=$.indexOf(o);-1===r&&(r=$.push(o)-1,E[r]={}),t=E[r]&&E[r][a]?E[r][a]:E[r][a]=d()}else t=d();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function d(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),i=0;i<t.length;i++)e.setAttribute(t[i],n.attributes[t[i]]);var r="prepend"===a?"afterbegin":"beforeend";return o.insertAdjacentElement(r,e),e}}("\n.image-preview[data-v-0da245db] {\n  position: relative;\n  width: 100%;\n  height: var(--input-height-tall);\n  overflow: hidden;\n  background-color: var(--background-subdued);\n  border-radius: var(--border-radius);\n}\nimg[data-v-0da245db] {\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.is-svg[data-v-0da245db] {\n  padding: 32px;\n  background-color: var(--background-normal-alt);\n}\n.is-svg img[data-v-0da245db] {\n  object-fit: contain;\n}\n.image-error[data-v-0da245db] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--foreground-subdued);\n  background-color: var(--background-normal);\n}\n.image-error .v-icon[data-v-0da245db] {\n  margin-bottom: 6px;\n}\n.image-error .message[data-v-0da245db] {\n  max-width: 300px;\n  padding: 0 16px;\n  text-align: center;\n}\n.shadow[data-v-0da245db] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  width: 100%;\n  height: 40px;\n  overflow: hidden;\n  line-height: 1;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  background: linear-gradient(\n    180deg,\n    rgba(38, 50, 56, 0) 0%,\n    rgba(38, 50, 56, 0.25) 100%\n  );\n  transition: height var(--fast) var(--transition);\n}\n.actions[data-v-0da245db] {\n  --v-button-color: var(--foreground-subdued);\n  --v-button-background-color: var(--white);\n  --v-button-color-hover: var(--foreground-normal);\n  --v-button-background-color-hover: var(--white);\n  position: absolute;\n  top: 30%;\n  left: 0;\n  z-index: 3;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n.actions .v-button[data-v-0da245db] {\n  margin-right: 12px;\n  transform: translateY(10px);\n  opacity: 0;\n  transition: var(--medium) var(--transition);\n  transition-property: opacity transform;\n}\n.actions .v-button[data-v-0da245db]:nth-of-type(1) {\n  transition-delay: 0ms;\n}\n.actions .v-button[data-v-0da245db]:nth-of-type(2) {\n  transition-delay: 25ms;\n}\n.actions .v-button[data-v-0da245db]:nth-of-type(3) {\n  transition-delay: 50ms;\n}\n.actions .v-button[data-v-0da245db]:nth-of-type(4) {\n  transition-delay: 75ms;\n}\n.actions .v-button[data-v-0da245db]:nth-of-type(5) {\n  transition-delay: 100ms;\n}\n.actions .v-button[data-v-0da245db]:last-child {\n  margin-right: 0px;\n}\n.info[data-v-0da245db] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  z-index: 3;\n  width: 100%;\n  padding: 8px 12px;\n  line-height: 1.2;\n}\n.title[data-v-0da245db] {\n  color: var(--white);\n}\n.meta[data-v-0da245db] {\n  height: 17px;\n  max-height: 0;\n  overflow: hidden;\n  color: rgba(255, 255, 255, 0.75);\n  transition: max-height var(--fast) var(--transition);\n}\n.image-preview:hover .shadow[data-v-0da245db] {\n  height: 100%;\n  background: linear-gradient(\n    180deg,\n    rgba(38, 50, 56, 0) 0%,\n    rgba(38, 50, 56, 0.5) 100%\n  );\n}\n.image-preview:hover .actions .v-button[data-v-0da245db] {\n  transform: translateY(0px);\n  opacity: 1;\n}\n.image-preview:hover .meta[data-v-0da245db] {\n  max-height: 17px;\n}\n.disabled-placeholder[data-v-0da245db] {\n  height: var(--input-height-tall);\n}\n",{});var j=(e,n)=>{const t=e.__vccOpts||e;for(const[e,a]of n)t[e]=a;return t};const A=e=>(b("data-v-0da245db"),e=e(),h(),e),I={class:"image"},S={key:0,class:"image-error"},U={class:"message"},z=["src"],C=A((()=>m("div",{class:"shadow"},null,-1))),N={key:2,class:"actions"},O={class:"info"},D={class:"title"},T={class:"meta"};var V={id:"uuid-file-image",name:"UUID File Image",description:"Select image from Library in a UUID string field",icon:"box",component:j(_,[["render",function(e,n,t,a,b,h){const y=i("v-skeleton-loader"),w=i("v-notice"),x=i("v-icon"),k=i("v-button"),_=i("drawer-item"),$=i("file-lightbox"),E=i("v-upload"),j=o("tooltip");return r(),d("div",I,[e.loading?(r(),l(y,{key:0,type:"input-tall"})):e.disabled&&!e.image?(r(),l(w,{key:1,class:"disabled-placeholder",center:"",icon:"block"},{default:s((()=>[u(c("disabled"))])),_:1})):e.image?(r(),d("div",{key:2,class:v(["image-preview",{"is-svg":e.image.type&&e.image.type.includes("svg")}])},[e.imageError?(r(),d("div",S,[g(x,{large:"",name:"UNKNOWN"===e.imageError?"error_outline":"info_outline"},null,8,["name"]),m("span",U,c(`errors.${e.imageError}`),1)])):(r(),d("img",{key:1,src:e.src,alt:"",role:"presentation",onError:n[0]||(n[0]=(...n)=>e.imageErrorHandler&&e.imageErrorHandler(...n))},null,40,z)),C,e.disabled?f("v-if",!0):(r(),d("div",N,[p((r(),l(k,{icon:"",rounded:"",onClick:n[1]||(n[1]=n=>e.lightboxActive=!0)},{default:s((()=>[g(x,{name:"zoom_in"})])),_:1})),[[j,"zoom"]]),p((r(),l(k,{icon:"",rounded:"",href:e.downloadSrc,download:e.image.filename_download},{default:s((()=>[g(x,{name:"get_app"})])),_:1},8,["href","download"])),[[j,"download"]]),p((r(),l(k,{icon:"",rounded:"",onClick:n[2]||(n[2]=n=>e.editDrawerActive=!0)},{default:s((()=>[g(x,{name:"open_in_new"})])),_:1})),[[j,"edit"]]),p((r(),l(k,{icon:"",rounded:"",onClick:e.deselect},{default:s((()=>[g(x,{name:"close"})])),_:1},8,["onClick"])),[[j,"deselect"]])])),m("div",O,[m("div",D,c(e.image.title),1),m("div",T,c(e.meta),1)]),!e.disabled&&e.image?(r(),l(_,{key:3,active:e.editDrawerActive,"onUpdate:active":n[3]||(n[3]=n=>e.editDrawerActive=n),collection:"directus_files","primary-key":e.image.id,edits:e.edits,onInput:e.stageEdits},null,8,["active","primary-key","edits","onInput"])):f("v-if",!0),g($,{id:e.image.id,modelValue:e.lightboxActive,"onUpdate:modelValue":n[4]||(n[4]=n=>e.lightboxActive=n)},null,8,["id","modelValue"])],2)):(r(),l(E,{key:3,"from-library":"","from-url":"",folder:e.folder,onInput:e.setImage},null,8,["folder","onInput"]))])}],["__scopeId","data-v-0da245db"],["__file","interface.vue"]]),types:["uuid"]};export{V as default};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant