fix(core): fix css/less output of the project

src/common/typography.less → pages/src/common/typography.less

@@ -1,4 +1,4 @@
-@import "./variables";
+@import "../../../src/common/variables";
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

pages/views/styles/page.less → pages/src/page/page.less

@@ -192,5 +192,5 @@ hr {
   }
 }
 
-@import "./header.less";
-@import "./sidebar.less";
+@import "header.less";
+@import "sidebar.less";

pages/src/playground.less

@@ -1,9 +1,15 @@
-@import "../views/styles/page.less";
-@import "../views/styles/examples/form.less";
-@import "../views/styles/examples/image.less";
-@import "../views/styles/examples/list.less";
-@import "../views/styles/examples/multiple-playgrounds.less";
+@import "../../src/common/variables";
+@import "../../src/common/mixins";
 
-@import "../../src/registration.less";
+@import "./common/typography";
+@import "./common/code";
+@import "./page/page.less";
+
+@import "./examples/form.less";
+@import "./examples/image.less";
+@import "./examples/list.less";
+@import "./examples/multiple-playgrounds.less";
 
 @import (inline) "../../node_modules/prismjs/themes/prism.css";
+
+@import "../../src/registration.less";

src/common/variables.less

@@ -1,3 +1,5 @@
+// TODO: rework with css variables instead
+
 @active-font-weight: 600;
 
 @landing-dark-bg: #4e4e4e;

src/core/base/plugin.less

@@ -1,3 +1,6 @@
+@import (reference) "../../common/mixins.less";
+@import (reference) "../../common/variables.less";
+
 .uip-plugin {
   &-inner {
     padding: 10px;

src/core/base/root.less

@@ -1,4 +1,5 @@
-@import '~@exadel/esl/modules/esl-alert/core';
+@import (reference) "../../common/variables.less";
+@import '@exadel/esl/modules/esl-alert/core.less';
 
 .uip-root {
   position: relative;
@@ -31,7 +32,7 @@
       transition:  visibility 0s .3s;
     }
   }
-  
+
   &[settings-collapsed] > .uip-settings {
     max-width: 0;
     max-height: 0;

src/core/registration.less

@@ -1,6 +1,3 @@
-@import "src/common/variables";
-@import "src/common/mixins";
-
-@import "./base/root";
-@import "./base/plugin";
-@import "./preview/preview";
+@import "./base/root.less";
+@import "./base/plugin.less";
+@import "./preview/preview.less";

src/plugins/editor/editor.less

@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .uip-editor {
   position: relative;
   grid-area: editor;

src/plugins/header/header.less

@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .uip-header {
     grid-area: header;
     position: relative;

src/plugins/header/options/option/option.less

@@ -1,3 +1,5 @@
+@import (reference) "../../../../common/variables.less";
+
 uip-option {
   display: flex;
   width: 1.5rem;

src/plugins/header/options/option/theme.less

@@ -1,3 +1,6 @@
+@import (reference) "../../../../common/mixins.less";
+@import (reference) "../../../../common/variables.less";
+
 .uip-root {
   background-color: @light-color;
 

src/plugins/header/options/options.less

@@ -1,6 +1,6 @@
-@import "./option/theme";
-@import "./option/direction";
-@import "./option/option";
+@import "./option/theme.less";
+@import "./option/direction.less";
+@import "./option/option.less";
 
 .uip-options {
   display: flex;

src/plugins/header/snippets/snippets.less

@@ -1,4 +1,7 @@
-@import 'node_modules/@exadel/esl/modules/esl-scrollbar/core';
+@import (reference) "../../../common/mixins.less";
+@import (reference) "../../../common/variables.less";
+
+@import '@exadel/esl/modules/esl-scrollbar/core.less';
 
 .uip-snippets {
   display: flex;

src/plugins/registration.less

@@ -1,8 +1,5 @@
-@import "src/common/variables";
-@import "src/common/mixins";
-
-@import "./header/header";
-@import "./header/snippets/snippets";
-@import "./header/options/options";
-@import "./editor/editor";
-@import "./settings/settings";
+@import "./header/header.less";
+@import "./header/snippets/snippets.less";
+@import "./header/options/options.less";
+@import "./editor/editor.less";
+@import "./settings/settings.less";

src/plugins/settings/setting.less

@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .uip-setting {
   display: block;
   width: 100%;

src/plugins/settings/settings.less

@@ -1,3 +1,6 @@
+@import (reference) "../../common/mixins.less";
+@import (reference) "../../common/variables.less";
+
 .uip-settings {
   grid-area: settings;
   width: 250px;

src/registration.less

@@ -1,9 +1,3 @@
-// TODO: get rid of extra styles for outside users
-@import "src/common/variables";
-@import "src/common/typography";
-@import "src/common/mixins";
-@import "src/common/code";
-
-@import "./core/registration";
-@import "./plugins/registration";
-@import "./settings/registration";
+@import "./core/registration.less";
+@import "./plugins/registration.less";
+@import "./settings/registration.less";

src/settings/bool-setting/bool-setting.less

@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .uip-bool-setting {
   label {
     display: inline-flex;

src/settings/registration.less

@@ -1,7 +1,6 @@
-@import "src/common/variables";
-@import "src/plugins/settings/setting";
+@import "../plugins/settings/setting.less";
 
-@import 'src/settings/bool-setting/bool-setting';
-@import 'src/settings/select-setting/select-setting';
-@import 'src/settings/text-setting/text-setting';
-@import 'src/settings/slider-setting/slider-setting';
+@import './bool-setting/bool-setting.less';
+@import './text-setting/text-setting.less';
+@import './select-setting/select-setting.less';
+@import './slider-setting/slider-setting.less';

src/settings/select-setting/select-setting.less

@@ -1,5 +1,7 @@
-@import '~@exadel/esl/modules/esl-forms/esl-select/core';
-@import '~@exadel/esl/modules/esl-forms/esl-select-list/core';
+@import (reference) "../../common/variables.less";
+
+@import '@exadel/esl/modules/esl-forms/esl-select/core.less';
+@import '@exadel/esl/modules/esl-forms/esl-select-list/core.less';
 
 .uip-select-setting .esl-select {
   display: block;

src/settings/slider-setting/slider-setting.less

@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .uip-slider-setting {
   input {
     display: block;

src/settings/text-setting/text-setting.less

@@ -1,3 +1,5 @@
+@import (reference) "../../common/variables.less";
+
 .uip-text-setting input {
   width: 100%;
   padding: 3px 1px 1px;