fix: errors in html templates and css styles

Author: lexoyo

package.json

@@ -13,10 +13,6 @@
     "plugin"
   ],
   "main": "dist/index.js",
-  "type": "module",
-  "exports": {
-    ".": "./dist/index.js"
-  },
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -52,18 +48,18 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.9",
-    "@eslint/js": "^9.25.0",
+    "@eslint/js": "^9.25.1",
     "@types/jest": "^29.5.14",
     "babel-jest": "^29.7.0",
-    "eslint": "^9.25.0",
+    "eslint": "^9.25.1",
     "grapesjs-cli": "^4.1.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.3.2",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.30.1"
+    "typescript-eslint": "^8.31.0"
   },
   "dependencies": {
     "@silexlabs/expression-input": "^0.0.28",

src/components/complex-selector.ts

@@ -9,6 +9,8 @@ import InlineSelectComponent from './inline-select'
 import CompoundSelectorComponent from './compound-selector'
 import { CompoundSelector } from '../model/CompoundSelector'
 import { FOCUS_VISIBLE } from '../styles'
+import './inline-select'
+import './compound-selector'
 
 /**
  * A component to display and edit a complex selector

src/components/compound-selector.ts

@@ -7,6 +7,7 @@ import SimpleSelectorComponent from './simple-selector'
 import { PSEUDO_CLASSES } from '../model/PseudoClass'
 import { FOCUS_VISIBLE } from '../styles'
 import './inline-select'
+import './simple-selector'
 
 /**
  * A component to display and edit a compound selector

src/components/current-selector-display.ts

@@ -45,7 +45,7 @@ export class CurrentSelectorDisplay extends StylableElement {
   static override styles = css`
   :host {
     ${ FOCUS_VISIBLE }
-    :host {
+    & {
       font-size: 0.65rem;
       padding: 0.5rem 0;
     }

src/components/inline-select.ts

@@ -4,8 +4,8 @@ import { css, html, TemplateResult } from 'lit'
 import { PseudoClass } from '../model/PseudoClass'
 import { Operator } from '../model/Operator'
 import { createRef, ref } from 'lit/directives/ref.js'
-import './resize-input'
 import { customizeInput, customizeSelect, FOCUS_VISIBLE } from '../styles'
+import './resize-input'
 
 type Option = PseudoClass | Operator
 
@@ -39,6 +39,12 @@ export default class InlineSelectComponent extends StylableElement {
   static override styles = css`
   :host {
     ${ FOCUS_VISIBLE }
+    & {
+      display: block;
+      text-align: left;
+      padding: 0 0.5rem;
+      margin: 0.5rem 0;
+    }
     button:hover, a:hover {
       transform: translateY(1px);
       color: var(--gjs-primary-color, #333);
@@ -50,12 +56,6 @@ export default class InlineSelectComponent extends StylableElement {
       margin: 0;
       padding: 0;
     }
-    :host {
-      display: block;
-      text-align: left;
-      padding: 0 0.5rem;
-      margin: 0.5rem 0;
-    }
     section {
       display: flex;
       justify-content: space-between;

src/components/simple-selector.ts

@@ -5,6 +5,7 @@ import { AttributeSelector, SimpleSelector, SimpleSelectorSuggestion, toString,
 import StylableElement from '../StylableElement'
 import { createRef, ref } from 'lit/directives/ref.js'
 import { customizeInput, customizeSelect, FOCUS_VISIBLE } from '../styles'
+import './resize-input'
 
 export default class SimpleSelectorComponent extends StylableElement {
 

src/index.ts

@@ -1,15 +1,12 @@
-// Web components
-import './components/simple-selector.ts'
-import './components/inline-select.ts'
-import './components/compound-selector.ts'
-import './components/complex-selector.ts'
-import './components/current-selector-display.ts'
-
 // GrapesJs Plugin
 import { AdvancedSelectorOptions, initASM, initListeners } from './plugin'
 import { Editor } from 'grapesjs'
 import en from './i18n/en'
 import fr from './i18n/fr'
+
+// For devtools debugging
+export const name = '@silexlabs/grapesjs-advanced-selector'
+
 export default (editor: Editor, opts: Partial<AdvancedSelectorOptions> = {}) => {
   // Defaults
   const options = {

src/plugin.ts

@@ -3,6 +3,8 @@ import { html, render } from 'lit'
 import { clearStyle, editStyle, getComponentSelector, getSelectedStyle, getSelectors, getSuggestionsMain, getSuggestionsRelated, getTranslation, getUntranslatedKeys, matchSelectorAll, matchSelectorSome, renameSelector, setComponentSelector, setSelectedStyle } from './model/GrapesJsSelectors'
 import { activateSelectors, ComplexSelector, EMPTY_SELECTOR, merge, same, toString } from './model/ComplexSelector'
 import { IdSelector, SimpleSelectorType } from './model/SimpleSelector'
+import './components/complex-selector'
+import './components/current-selector-display'
 
 ////////////////
 // Types
@@ -83,7 +85,7 @@ function updateUi(editor: Editor, options: AdvancedSelectorOptions) {
 
       <current-selector-display
         .t=${(key: string) => getTranslation(editor, key)}
-        .value=${getSelector(components)}
+        .value=${getSelector(components) || undefined}
         .selectors=${getSelectors(editor)}
         .helpLink=${options.helpLinks.actionBar}
         .error=${getTranslation(editor, errors || '')}