@umbraco-ui/uui-css - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "@umbraco-ui/uui-css",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
@@ -22,5 +22,6 @@ "keywords": [
   },
-  "main": "./dist/uui-css.min.js",
+  "main": "./lib/index.js",
   "module": "./lib/index.js",
-  "customElements": "custom-elements.json",
+  "types": "./lib/index.d.ts",
+  "type": "module",
   "files": [
@@ -30,4 +31,3 @@ "assets",
     "lib/**/*.d.ts",
-    "lib/**/*.js",
-    "custom-elements.json"
+    "lib/**/*.js"
   ],
@@ -38,6 +38,5 @@ "dependencies": {
   "scripts": {
-    "build": "npm run build:cssprops && npm run build:rootcss && tsc --build --force && rollup -c rollup.config.js",
+    "build": "npm run build:cssprops && tsc --build --force && rollup -c rollup.config.js",
     "build:cssprops": "postcss lib/custom-properties.css --base lib/ --dir dist && npm run custom-properties-cache",
-    "build:rootcss": "postcss lib/uui-css.css --base lib/ --dir dist",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json custom-properties.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json custom-properties.*",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json",
@@ -50,3 +49,3 @@ "custom-properties-cache": "node ./scripts/update-custom-properties-cache.mjs"
   "homepage": "https://uui.umbraco.com/?path=/story/uui-css",
-  "gitHead": "2a640ce4460de94e9c92a97310e27b84bbd6edda"
+  "gitHead": "6fbddfc1295e2ea00a532d4f9eb798165b2d39ac"
 }

README.md

@@ -8,7 +8,31 @@ # uui-css
 - **custom-properties.css** — use this if you like to include our custom properties in your project.
-- **local-typography.css** — use this if you like to declare styles for typography, this is needed when using ex.: H1 in a Shadow DOM.
-- **root.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project.
+- **uui-font.css** — use this if you like to import our font in your project. You must set the `uui-font` class on your root element.
+- **uui-text.css** — use this if you like to declare styles for typography, this is needed when using ex.: H1 in a Shadow DOM. You must set the `uui-text` class in your root element.
 
+Bundle:
+
+- **uui-css.css** — If you like your project to be styled for Umbraco UI, then include this in the root of your project. This contains all the previous files, so make sure to only include this file in your project if you need to style your project.
+
+# Usage in your project
+
+## CDN
+
+For the best results you should include the `uui-css.css` bundle in your project, which contains all the css files and custom variables:
+
+```html
+<!-- Latest Version -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@latest/dist/uui-css.css" />
+
+<!-- Specific version -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-css@x.x.x/dist/uui-css.css" />
+```
+
 ## Installation
 
+If you want to have fine-grained control over the CSS files, you can install the `@umbraco-ui/uui-css` package.
+
 ```zsh
@@ -20,4 +44,16 @@ npm i @umbraco-ui/uui-css
 
-```html
-<style src="@umbraco-ui/uui-css/root.css"></style>
+For a build system like _Vite_, the styling could be included like this if you want to control the styling and variables with the build system:
+
+```ts
+// app.ts
+import '@umbraco-ui/uui-css/dist/custom-properties.css';
+import '@umbraco-ui/uui-css/dist/uui-font.css';
+import '@umbraco-ui/uui-css/dist/uui-text.css';
 ```
+
+Or you can just import the compiled bundle at once:
+
+```ts
+// app.ts
+import '@umbraco-ui/uui-css/dist/uui-css.css';
+```

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of lines in readme file

58

increased by163.64%

Is type module

Yes

Worsened metrics

Total package byte prevSize

409333

decreased by-14.07%

Number of package files

18

decreased by-5.26%

Lines of code

1180

decreased by-16.07%

No dependency changes