Merge pull request #93 from umbraco/Release/Patch-040122

Release/patch 040122

Author: julczka

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  ignorePatterns: ['vite.*.js'],
   root: true,
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint', 'html', 'import'],

.gitignore

@@ -27,9 +27,10 @@ tsconfig.tsbuildinfo
 
 
 custom-elements.json
+/packages/uui-css/custom-properties.js
+/packages/uui-css/custom-properties.module.js
 storybook-static
 debug.log
 out-css
 *.log
 .eslintcache
-custom-properties.js

.storybook/main.js

@@ -1,4 +1,6 @@
 const tsconfigPaths = require('vite-tsconfig-paths').default;
+const processLitCSSPlugin =
+  require('../scripts/vite.processLitCSSPlugin').default;
 
 module.exports = {
   stories: ['../packages/**/*.story.ts'],
@@ -11,17 +13,20 @@ module.exports = {
   async viteFinal(config, { configType }) {
     // customize the Vite config here
 
+    config.plugins.push(processLitCSSPlugin());
+
     if (configType === 'DEVELOPMENT') {
       // add plugins
       config.plugins.push(tsconfigPaths());
 
       // pre bundle dependencies for faster startup time
       config.optimizeDeps.include.push('@storybook/web-components');
-      config.optimizeDeps.include.push('lit-element');
       config.optimizeDeps.include.push('lit-html');
       config.optimizeDeps.include.push('lit');
       config.optimizeDeps.include.push('lit/decorators.js');
       config.optimizeDeps.include.push('lit/directives/style-map.js');
+      config.optimizeDeps.include.push('lit/directives/if-defined.js');
+      config.optimizeDeps.include.push('lit/directives/unsafe-html.js');
     }
 
     return config;

.storybook/preview-body.html

@@ -0,0 +1,4 @@
+<script>
+  document.body.classList.add('uui-root');
+  document.body.classList.add('uui-text');
+</script>

.storybook/preview-head.html

@@ -17,6 +17,7 @@
       repeat top left;
   }
 </style>
+
 <script>
   (function () {
     window.addEventListener('load', () => {

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
-import '../src/styles/index.css';
+import '../packages/uui-css/lib/uui-css.css';
 import 'https://cdn.skypack.dev/element-internals-polyfill';
 
 const sort = (a, b) => {

README.md

@@ -41,6 +41,7 @@ If you want to develop a component or contribute to the repository go to ["Get s
 | [`uui` bundle package](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui)                        | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui)                             |
 | [`<uui-caret>`](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui-caret)                         | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-caret?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-caret)                 |
 | [`<uui-menu-item>`](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui-menu-item)                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-menu-item?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-menu-item)         |
+| [`<uui-pagination>`](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui-pagination)               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-pagination?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-pagination)       |
 
 ## Get started