diff --git a/.vscode/settings.json b/.vscode/settings.json index 5252036..5400e67 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,30 @@ { "files.exclude": { "**/node_modules/**": true - } + }, + "css.lint.validProperties": [ + "wash-color", + "saturation", + "brightness", + "tooltip-position", + "horizontal-align", + "flow-children", + "opacity-mask", + "tooltip-body-position", + "pre-transform-scale2d", + "blur", + "x", + "y", + "sound", + "sound-out", + "contrast", + "world-blur", + "background-blur", + "opacity-brush", + "border-brush", + "background-img-opacity", + "ui-scale", + "ui-scale-x", + "ui-scale-y" + ] } diff --git a/addon/content/solid-example/panorama/scripts/custom_game/shop.js b/addon/content/solid-example/panorama/scripts/custom_game/shop.js index 8dc9e32..04c19a8 100644 --- a/addon/content/solid-example/panorama/scripts/custom_game/shop.js +++ b/addon/content/solid-example/panorama/scripts/custom_game/shop.js @@ -2,13 +2,14 @@ var libs = require('./libs.js'); +const rootStyle = "styled-49c05845"; function App() { return (() => { - const _el$ = libs.createElement("Panel", {}, null); + const _el$ = libs.createElement("Panel", { + "class": rootStyle + }, null); libs.createTextNode(`Hello World!`, _el$); - libs.setProp(_el$, "style", { - flowChildren: 'right' - }); + libs.setProp(_el$, "class", rootStyle); return _el$; })(); } diff --git a/package.json b/package.json index 92ec54c..f040e16 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@types/node": "^18.11.7", "babel-plugin-jsx-panorama-expressions": "^0.1.2", "babel-plugin-macros": "^3.1.0", - "babel-plugin-panorama-all-in-jsx": "^0.1.3", + "babel-plugin-panorama-all-in-jsx": "^0.1.4", "babel-preset-solid-panorama": "^0.1.3", "chokidar": "^3.5.3", "cli-color": "^2.0.3", @@ -43,6 +43,7 @@ "solid-js": "^1.6.1", "solid-panorama-runtime": "^0.1.8", "ts-node": "^10.9.1", - "typescript": "~4.8.4" + "typescript": "~4.8.4", + "typescript-styled-plugin": "^0.18.2" } } diff --git a/src/shop/shop.tsx b/src/shop/shop.tsx index e59655f..89c23e8 100644 --- a/src/shop/shop.tsx +++ b/src/shop/shop.tsx @@ -1,6 +1,7 @@ import { createEffect, createSignal, onMount, ParentComponent } from 'solid-js'; import { render } from 'solid-panorama-runtime'; import xml from 'babel-plugin-panorama-all-in-jsx/xml.macro'; +import css from 'babel-plugin-panorama-all-in-jsx/css.macro'; xml( @@ -17,8 +18,12 @@ xml( ); +const rootStyle = css` + flow-children: right; +`; + function App() { - return Hello World!; + return Hello World!; } render(() => , $('#app')); diff --git a/src/tsconfig.json b/src/tsconfig.json index 393076a..43bd970 100644 --- a/src/tsconfig.json +++ b/src/tsconfig.json @@ -18,6 +18,14 @@ "jsxImportSource": "solid-js", "paths": { "@common/*": ["./common/*"] - } + }, + "plugins": [ + { + "name": "typescript-styled-plugin", + "lint": { + "validProperties": ["flow-children", "horizontal-align"] + } + } + ] } } diff --git a/yarn.lock b/yarn.lock index e34c050..e919a71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -962,6 +962,25 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" +"@emmetio/abbreviation@^2.2.3": + version "2.2.3" + resolved "https://registry.yarnpkg.com/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz#2b3c0383c1a4652f677d5b56fb3f1616fe16ef10" + integrity sha512-87pltuCPt99aL+y9xS6GPZ+Wmmyhll2WXH73gG/xpGcQ84DRnptBsI2r0BeIQ0EB/SQTOe2ANPqFqj3Rj5FOGA== + dependencies: + "@emmetio/scanner" "^1.0.0" + +"@emmetio/css-abbreviation@^2.1.4": + version "2.1.4" + resolved "https://registry.yarnpkg.com/@emmetio/css-abbreviation/-/css-abbreviation-2.1.4.tgz#90362e8a1122ce3b76f6c3157907d30182f53f54" + integrity sha512-qk9L60Y+uRtM5CPbB0y+QNl/1XKE09mSO+AhhSauIfr2YOx/ta3NJw2d8RtCFxgzHeRqFRr8jgyzThbu+MZ4Uw== + dependencies: + "@emmetio/scanner" "^1.0.0" + +"@emmetio/scanner@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f" + integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA== + "@jridgewell/gen-mapping@^0.1.0": version "0.1.1" resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996" @@ -1242,10 +1261,10 @@ babel-plugin-macros@^3.1.0: cosmiconfig "^7.0.0" resolve "^1.19.0" -babel-plugin-panorama-all-in-jsx@^0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/babel-plugin-panorama-all-in-jsx/-/babel-plugin-panorama-all-in-jsx-0.1.3.tgz#297273ae4afb1e465d4ab2acb6e61cde2e4ef2f1" - integrity sha512-VJvXlVnmBv3Vx4X/S2rMd3L9LKT5vWrjsm4CVb/WMNIbQdu7WZPNAsL/3dk5Lmz+9MjdnGquBenBXd8pltLg1g== +babel-plugin-panorama-all-in-jsx@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/babel-plugin-panorama-all-in-jsx/-/babel-plugin-panorama-all-in-jsx-0.1.4.tgz#8f40eeae7ac699cd0f2d8de00f3e09811120fde8" + integrity sha512-SDckGgcFOnnHYL7QcQ6zqcfPiiHc3mQReTzV+Pw+wh0ghuhGzE+q3+8nUuVJ5OeKQnNe8fQJjZVQPEkp91firQ== dependencies: babel-plugin-macros "^3.1.0" xml-js "^1.6.11" @@ -1492,6 +1511,14 @@ electron-to-chromium@^1.4.251: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592" integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA== +emmet@^2.3.0: + version "2.3.6" + resolved "https://registry.yarnpkg.com/emmet/-/emmet-2.3.6.tgz#1d93c1ac03164da9ddf74864c1f341ed6ff6c336" + integrity sha512-pLS4PBPDdxuUAmw7Me7+TcHbykTsBKN/S9XJbUOMFQrNv9MoshzyMFK/R57JBm94/6HSL4vHnDeEmxlC82NQ4A== + dependencies: + "@emmetio/abbreviation" "^2.2.3" + "@emmetio/css-abbreviation" "^2.1.4" + error-ex@^1.3.1: version "1.3.2" resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" @@ -1968,6 +1995,11 @@ json5@^2.2.1: resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== +jsonc-parser@^2.3.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.3.1.tgz#59549150b133f2efacca48fe9ce1ec0659af2342" + integrity sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg== + jsonfile@^6.0.1: version "6.1.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" @@ -2516,6 +2548,22 @@ type@^2.7.2: resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0" integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw== +typescript-styled-plugin@^0.18.2: + version "0.18.2" + resolved "https://registry.yarnpkg.com/typescript-styled-plugin/-/typescript-styled-plugin-0.18.2.tgz#88c11a81247434de5c038aa22dc0b2df412c85ef" + integrity sha512-eBs898Zz5C+k59ZydKVYBHjw4dC5WRxidOT7wfGkjLRZHKL6zIl6xkjIHMuctDE9hctxTq+GJcaXgk30lKEM9A== + dependencies: + typescript-template-language-service-decorator "^2.2.0" + vscode-css-languageservice "^5.1.4" + vscode-emmet-helper "^2.6.4" + vscode-languageserver-textdocument "^1.0.1" + vscode-languageserver-types "^3.16.0" + +typescript-template-language-service-decorator@^2.2.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.3.1.tgz#f5e3a15cd6cdcd32aa0cbaebf2be753f8ceb46a7" + integrity sha512-+Q5+cvBtPO4VKNyyI6O+XnIne+/hq/WfNhBaF4hJP8nB8TbikTg+2h9uBMsqduwX1+kVfwG9SBSwMTtvi2Ep7w== + typescript@~4.8.4: version "4.8.4" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6" @@ -2580,6 +2628,53 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +vscode-css-languageservice@^5.1.4: + version "5.4.2" + resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-5.4.2.tgz#69ea74c000bd653dfc8e458a1720d28b9ffa5cfb" + integrity sha512-DT7+7vfdT2HDNjDoXWtYJ0lVDdeDEdbMNdK4PKqUl2MS8g7PWt7J5G9B6k9lYox8nOfhCEjLnoNC3UKHHCR1lg== + dependencies: + vscode-languageserver-textdocument "^1.0.4" + vscode-languageserver-types "^3.16.0" + vscode-nls "^5.0.0" + vscode-uri "^3.0.3" + +vscode-emmet-helper@^2.6.4: + version "2.6.4" + resolved "https://registry.yarnpkg.com/vscode-emmet-helper/-/vscode-emmet-helper-2.6.4.tgz#bea47f17649bba26b412f3d1fac18aaee43eba25" + integrity sha512-fP0nunW1RUWEKGf4gqiYLOVNFFGXSRHjCl0pikxtwCFlty8WwimM+RBJ5o0aIiwerrYD30HqeaVyvDW027Sseg== + dependencies: + emmet "^2.3.0" + jsonc-parser "^2.3.0" + vscode-languageserver-textdocument "^1.0.1" + vscode-languageserver-types "^3.15.1" + vscode-nls "^5.0.0" + vscode-uri "^2.1.2" + +vscode-languageserver-textdocument@^1.0.1, vscode-languageserver-textdocument@^1.0.4: + version "1.0.7" + resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.7.tgz#16df468d5c2606103c90554ae05f9f3d335b771b" + integrity sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg== + +vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.16.0: + version "3.17.2" + resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.2.tgz#b2c2e7de405ad3d73a883e91989b850170ffc4f2" + integrity sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA== + +vscode-nls@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-5.2.0.tgz#3cb6893dd9bd695244d8a024bdf746eea665cc3f" + integrity sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng== + +vscode-uri@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c" + integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A== + +vscode-uri@^3.0.3: + version "3.0.6" + resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.6.tgz#5e6e2e1a4170543af30151b561a41f71db1d6f91" + integrity sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ== + which-boxed-primitive@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"