support new stylesheet service

Author: jogibear9988

README.md

@@ -30,7 +30,8 @@ So the designer now should work with bundlers.
 | web-component-designer-htmlparserservice-lit-element                   |                                              |
 | web-component-designer-htmlparserservice-nodehtmlparser                |                                              |
 | web-component-designer-miniatureview-html2canvas                       |                                              |
-| web-component-designer-stylesheetservice-css-tools                     |                                              |
+| web-component-designer-stylesheetservice-css-parser                    |                                              |
+| ~~web-component-designer-stylesheetservice-css-tools~~                 | deprecated - switched to css-parser          |
 | ~~web-component-designer-stylesheetservice-css-tree~~                  | deprecated - did never work very well        |
 | web-component-designer-visualization-addons                            |                                              |
 | ~~web-component-designer-texteditextension-stylo~~                     | deprecated - stylo is deprecated             |

package-lock.json

@@ -14,9 +14,9 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@adobe/css-tools": "4.4.0",
     "@blockly/zoom-to-fit": "^6.0.9",
     "@node-projects/base-custom-webcomponent": ">=0.27.8",
+    "@node-projects/css-parser": "^5.0.0",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.2.3",

package.json

@@ -1,5 +1,5 @@
 import { CssAttributeParser, DesignItem, IDesignItem, IHtmlParserService, InstanceServiceContainer, ServiceContainer, newElementFromString } from "@node-projects/web-component-designer";
-import { BlockStatement, ClassDeclaration, FunctionExpression, Identifier, MethodDefinition, ReturnStatement, TaggedTemplateExpression } from "esprima-next/dist/esm/esprima";
+import { BlockStatement, ClassDeclaration, FunctionExpression, Identifier, MethodDefinition, ReturnStatement, TaggedTemplateExpression } from "esprima-next";
 import * as esprima from "esprima-next";
 
 export class LitElementParserService implements IHtmlParserService {

packages/web-component-designer-htmlparserservice-lit-element/src/service/htmlParserService/LitElementParserService.ts

@@ -2,15 +2,15 @@
 
 ## NPM Package
 
-https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-tools
+https://www.npmjs.com/package/@node-projects/web-component-designer-stylesheetservice-css-parser
 
-     npm i @node-projects/web-component-designer-stylesheetservice-css-tools
+     npm i @node-projects/web-component-designer-stylesheetservice-css-parser
 
 ## Description
 
-This is a Stylesheetparser using @adobe/css-tools
+This is a Stylesheetparser using @node-projects/css-parser
 
 ## Usage
 
-    import { CssToolsStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tools';
-    serviceContainer.register("stylesheetService", designerCanvas => new CssToolsStylesheetService(designerCanvas));
+    import { CssParserStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-parser';
+    serviceContainer.register("stylesheetService", designerCanvas => new CssParserStylesheetService(designerCanvas));

…r-stylesheetservice-css-tools/.npmignore …-stylesheetservice-css-parser/.npmignorepackages/web-component-designer-stylesheetservice-css-tools/.npmignore renamed to packages/web-component-designer-stylesheetservice-css-parser/.npmignore packages/web-component-designer-stylesheetservice-css-tools/.npmignore renamed to packages/web-component-designer-stylesheetservice-css-parser/.npmignore

@@ -1,9 +1,9 @@
 {
-  "description": "web-component-designer addon: Stylesheet Parser Service using @adobe/css-tools",
-  "name": "@node-projects/web-component-designer-stylesheetservice-css-tools",
-  "version": "0.1.11",
+  "description": "web-component-designer addon: Stylesheet Parser Service using @node-projects/css-parser",
+  "name": "@node-projects/web-component-designer-stylesheetservice-css-parser",
+  "version": "0.1.3",
   "type": "module",
-  "main": "./dist/service/stylesheetservice/CssToolsStylesheetService.js",
+  "main": "./dist/service/stylesheetservice/CssParserStylesheetService.js",
   "author": "jochen.kuehner@gmx.de",
   "license": "MIT",
   "scripts": {
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@adobe/css-tools": ">=4.4.0",
+    "@node-projects/css-parser": "^5.0.0",
     "@node-projects/web-component-designer": ">=0.1.224"
   },
   "repository": {

…er-stylesheetservice-css-tools/README.md …r-stylesheetservice-css-parser/README.mdpackages/web-component-designer-stylesheetservice-css-tools/README.md renamed to packages/web-component-designer-stylesheetservice-css-parser/README.md packages/web-component-designer-stylesheetservice-css-tools/README.md renamed to packages/web-component-designer-stylesheetservice-css-parser/README.md

@@ -1,4 +1,4 @@
-import { CssAtRuleAST, CssDeclarationAST, CssRuleAST, CssStylesheetAST, parse, stringify } from "@adobe/css-tools";
+import { CssAtRuleAST, CssDeclarationAST, CssRuleAST, CssStylesheetAST, CssWhitespaceAST, parse, stringify } from "@node-projects/css-parser";
 import { AbstractStylesheetService, IDocumentStylesheet, IStyleRule, IStylesheet, IStyleDeclaration, IDesignerCanvas, IDesignItem } from "@node-projects/web-component-designer";
 import { Specificity } from "@node-projects/web-component-designer";
 
@@ -14,7 +14,7 @@ interface IDeclarationWithAST extends IStyleDeclaration {
     ast: CssDeclarationAST
 }
 
-export class CssToolsStylesheetService extends AbstractStylesheetService {
+export class CssParserStylesheetService extends AbstractStylesheetService {
 
     constructor(designerCanvas: IDesignerCanvas) {
         super(designerCanvas)
@@ -61,7 +61,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
         return rules[rules.length - 1];
     }
 
-    private *getRulesFromAst(cssAtRuleAst: CssAtRuleAST[], stylesheet: IStylesheet, designItem: IDesignItem): IterableIterator<[CssRuleAST, Specificity]> {
+    private *getRulesFromAst(cssAtRuleAst: (CssDeclarationAST | CssAtRuleAST | CssWhitespaceAST)[], stylesheet: IStylesheet, designItem: IDesignItem): IterableIterator<[CssRuleAST, Specificity]> {
         for (const atRule of cssAtRuleAst) {
             if (atRule.type == 'media') {
                 yield* this.getRulesFromAst(atRule.rules, stylesheet, designItem);

…stylesheetservice-css-tools/package.json …tylesheetservice-css-parser/package.jsonpackages/web-component-designer-stylesheetservice-css-tools/package.json renamed to packages/web-component-designer-stylesheetservice-css-parser/package.json packages/web-component-designer-stylesheetservice-css-tools/package.json renamed to packages/web-component-designer-stylesheetservice-css-parser/package.json

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
 import { IUiCommand, InstanceServiceContainer, ServiceContainer } from '@node-projects/web-component-designer';
-import { IDemoView } from '@node-projects/web-component-designer/src/elements/widgets/demoView/IDemoView';
+import { IDemoView } from '@node-projects/web-component-designer/src/elements/widgets/demoView/IDemoView.js';
 
 export class ZplDemoView extends BaseCustomWebComponentConstructorAppend implements IDemoView {