@suid/css - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

createStyleObject.d.ts

@@ -1,2 +0,2 @@
-export declare type StyleObject = {
+export type StyleObject = {
     id: string;
@@ -7,8 +7,9 @@ name: string;
 };
-export declare type StyleObjectCache = Map<string, StyleObject>;
-export declare type StyleProps = Record<string, any> | string | (Record<string, any> | string)[] | (() => Record<string, any> | string | (Record<string, any> | string)[]);
-export declare type StyleObjectOptions = {
+export type StyleObjectCache = Map<string, StyleObject>;
+export type StyleProps = Record<string, any> | string | (Record<string, any> | string)[] | (() => Record<string, any> | string | (Record<string, any> | string)[]);
+export type StyleObjectOptions = {
     name: string;
     props: StyleProps;
     extraProperties?: Record<string, (value: any) => any>;
+    createId?: () => string;
     cache?: StyleObjectCache;
@@ -15,0 +16,0 @@ };

createStyleObject.js

 import render from "./render";
-import randomString from "@suid/utils/randomString";
-import resolveFunction from "@suid/utils/resolveFunction";
-import toArray from "@suid/utils/toArray";
-function create(name, rules) {
-    const id = randomString().slice(0, 6);
+import { toArray } from "./utils/array";
+import { resolveFunction } from "./utils/function";
+import { randomString } from "./utils/string";
+function create(name, rules, id) {
     return {
         id,
-        name: name,
+        name,
         className: `${name}-${id}`,
@@ -24,3 +23,4 @@ rules: rules.replaceAll(`$id`, `${id}`),
         .join("\n");
-    const styleObject = options.cache?.get(rules) || create(options.name, rules);
+    const styleObject = options.cache?.get(rules) ||
+        create(options.name, rules, options.createId ? options.createId() : randomString().slice(0, 6));
     if (options.cache)
@@ -27,0 +27,0 @@ options.cache.set(rules, styleObject);

dom/appendStyleElement.d.ts

@@ -1,3 +0,3 @@
-declare function appendStyleElement(css: string | string[], attributes?: Record<string, any>): HTMLStyleElement;
+declare function appendStyleElement(css: string | string[], attributes?: Record<string, any>, injectFirst?: boolean): HTMLStyleElement;
 export default appendStyleElement;
 //# sourceMappingURL=appendStyleElement.d.ts.map

dom/appendStyleElement.js

 import createStyleElement from "./createStyleElement";
 import registerStyleElementUsage from "./registerStyleElementUsage";
 import setStyleElementText from "./setStyleElementText";
-function appendStyleElement(css, attributes) {
+const placeholderId = "suid-injectFirst";
+function appendStyleElement(css, attributes, injectFirst) {
     if (Array.isArray(css))
@@ -20,3 +21,14 @@ css = css.join("\n");
         registerStyleElementUsage(element);
-        head.appendChild(element);
+        if (injectFirst) {
+            let placeholderElement = head.querySelector(`#${placeholderId}`);
+            if (!placeholderElement) {
+                placeholderElement = document.createElement("style");
+                placeholderElement.setAttribute("id", placeholderId);
+                head.prepend(placeholderElement);
+            }
+            head.insertBefore(element, placeholderElement);
+        }
+        else {
+            head.appendChild(element);
+        }
         return element;
@@ -23,0 +35,0 @@ }

package.json

 {
   "name": "@suid/css",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "CSS render in JS.",
@@ -10,5 +10,2 @@ "keywords": [
   ],
-  "dependencies": {
-    "@suid/utils": "0.6.0"
-  },
   "bugs": {
@@ -15,0 +12,0 @@ "url": "https://github.com/swordev/suid/issues"

README.md

 # @suid/css
 
-![GitHub Workflow Status](https://img.shields.io/github/workflow/status/swordev/suid/CI) ![npm (scoped)](https://img.shields.io/npm/v/@suid/css?label=@suid/css)
+[![workflow-badge]](https://github.com/swordev/suid/actions/workflows/ci.yaml) [![npm-badge]](https://www.npmjs.com/package/@suid/css)
 
+[workflow-badge]: https://img.shields.io/github/actions/workflow/status/swordev/suid/ci.yaml?branch=main
+[npm-badge]: https://img.shields.io/npm/v/@suid/css?label=@suid/css
+
 ## Installation
@@ -6,0 +9,0 @@

render.d.ts

@@ -1,2 +0,2 @@
-declare type RenderOptions = {
+type RenderOptions = {
     sublevel?: boolean;
@@ -3,0 +3,0 @@ extraProperties?: {

render.js

 import { isGlobalSelector, isKeyframes, isMediaQuery, isSelector, isVar, isPrivateVar, } from "./assert";
-import snakeCase from "@suid/utils/snakeCase";
+import { snakeCase } from "./utils/string";
 function renderSelector(propKey, propValue, selectors = [], options = {}) {
@@ -4,0 +4,0 @@ const subselectors = propKey.split(",").map((v) => {

renderMediaQuery.d.ts

@@ -1,2 +0,2 @@
-export declare type MediaQueryComparatorType = {
+export type MediaQueryComparatorType = {
     up: number;
@@ -3,0 +3,0 @@ down: number;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15642

increased by9.89%

Dependency count

0

decreased by-100%

Number of package files

33

increased by22.22%

Lines of code

348

increased by9.78%

Number of lines in readme file

21

increased by16.67%

Dependency changes

• - Removed@suid/utils@0.6.0

• - Removed@suid/types@0.3.0(transitive)

• - Removed@suid/utils@0.6.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedseroval@1.1.1(transitive)

• - Removedseroval-plugins@1.1.1(transitive)

• - Removedsolid-js@1.9.3(transitive)