@praxisjs/css 0.1.7 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @praxisjs/css
 
+## 0.2.0
+
+### Minor Changes
+
+- ffc4aec: `preflight()` now wraps its reset in `@layer reset` by default so it can be ordered against other layered CSS (e.g. Tailwind utilities) instead of always winning the cascade regardless of specificity. Pass `preflight({ layer: 'custom-name' })` to rename the layer, or `preflight({ layer: false })` to opt back into un-layered CSS.
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/__tests__/preflight.test.js

@@ -51,5 +51,24 @@ describe("preflight()", () => {
         expect(document.head.querySelector("style[data-praxis-global]")).toBeNull();
         expect(col.getCSS()).toContain("box-sizing: border-box");
     });
+    it("wraps the reset in `@layer reset` by default", async () => {
+        const { preflight } = await import("../preflight.js");
+        preflight();
+        const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+        expect(css).toContain("@layer reset {");
+        expect(css).toContain("box-sizing: border-box");
+    });
+    it("wraps the reset in a custom named layer", async () => {
+        const { preflight } = await import("../preflight.js");
+        preflight({ layer: "tailwind-base" });
+        const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+        expect(css).toContain("@layer tailwind-base {");
+    });
+    it("injects un-layered CSS when layer: false", async () => {
+        const { preflight } = await import("../preflight.js");
+        preflight({ layer: false });
+        const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+        expect(css).not.toContain("@layer");
+    });
 });
 //# sourceMappingURL=preflight.test.js.map

package/dist/__tests__/preflight.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"preflight.test.js","sourceRoot":"","sources":["../../src/__tests__/preflight.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"preflight.test.js","sourceRoot":"","sources":["../../src/__tests__/preflight.test.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { cx, type ClassValue } from "./cx.js";
-export { preflight } from "./preflight.js";
+export { preflight, type PreflightOptions } from "./preflight.js";
 export { globalStyle, type GlobalStyleFactory } from "./global.js";
 export { type CSSBuilder, type CSSProperties } from "./builder/css-builder.js";
 export { keyframes } from "./builder/keyframes.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAqB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAmB,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAyB,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAqB,MAAM,mBAAmB,CAAC"}

package/dist/preflight.d.ts

@@ -1,3 +1,12 @@
+export interface PreflightOptions {
+    /**
+     * Names the CSS `@layer` the reset is wrapped in, so it can be ordered
+     * against other layered CSS (e.g. Tailwind's `@layer utilities`) instead
+     * of always winning the cascade. Defaults to `"reset"`. Pass `false` to
+     * inject un-layered CSS instead.
+     */
+    layer?: string | false;
+}
 /**
  * Injects an opinionated browser reset into `document.head` exactly once.
  *
@@ -14,5 +23,5 @@
  * import { preflight } from '@praxisjs/css'
  * preflight()
  */
-export declare function preflight(): void;
+export declare function preflight({ layer }?: PreflightOptions): void;
 //# sourceMappingURL=preflight.d.ts.map

package/dist/preflight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preflight.d.ts","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AA6KA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,IAAI,IAAI,CAEhC"}
+{"version":3,"file":"preflight.d.ts","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AA6KA,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAe,EAAE,GAAE,gBAAqB,GAAG,IAAI,CAO1E"}

package/dist/preflight.js

@@ -185,7 +185,11 @@ input:where([type='button'], [type='reset'], [type='submit']),
  * import { preflight } from '@praxisjs/css'
  * preflight()
  */
-export function preflight() {
-    globalStyle(_css => PREFLIGHT);
+export function preflight({ layer = "reset" } = {}) {
+    if (!layer) {
+        globalStyle(_css => PREFLIGHT);
+        return;
+    }
+    globalStyle(_css => `@layer ${layer} {\n${PREFLIGHT}\n}`);
 }
 //# sourceMappingURL=preflight.js.map

package/dist/preflight.js.map

@@ -1 +1 @@
-{"version":3,"file":"preflight.js","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,oHAAoH;AACpH,yEAAyE;AACzE,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS;IACvB,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AACjC,CAAC"}
+{"version":3,"file":"preflight.js","sourceRoot":"","sources":["../src/preflight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,oHAAoH;AACpH,yEAAyE;AACzE,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKjB,CAAC;AAYF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,KAAuB,EAAE;IAClE,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;QAC/B,OAAO;IACT,CAAC;IAED,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,KAAK,OAAO,SAAS,KAAK,CAAC,CAAC;AAC5D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/css",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/__tests__/preflight.test.ts

@@ -60,4 +60,26 @@ describe("preflight()", () => {
     expect(document.head.querySelector("style[data-praxis-global]")).toBeNull();
     expect(col.getCSS()).toContain("box-sizing: border-box");
   });
+
+  it("wraps the reset in `@layer reset` by default", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight();
+    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+    expect(css).toContain("@layer reset {");
+    expect(css).toContain("box-sizing: border-box");
+  });
+
+  it("wraps the reset in a custom named layer", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight({ layer: "tailwind-base" });
+    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+    expect(css).toContain("@layer tailwind-base {");
+  });
+
+  it("injects un-layered CSS when layer: false", async () => {
+    const { preflight } = await import("../preflight.js");
+    preflight({ layer: false });
+    const css = document.head.querySelector("style[data-praxis-global]")?.textContent ?? "";
+    expect(css).not.toContain("@layer");
+  });
 });

package/src/index.ts

@@ -1,5 +1,5 @@
 export { cx, type ClassValue } from "./cx.js";
-export { preflight } from "./preflight.js";
+export { preflight, type PreflightOptions } from "./preflight.js";
 export { globalStyle, type GlobalStyleFactory } from "./global.js";
 export { type CSSBuilder, type CSSProperties } from "./builder/css-builder.js";
 export { keyframes } from "./builder/keyframes.js";

package/src/preflight.ts

@@ -171,6 +171,16 @@ input:where([type='button'], [type='reset'], [type='submit']),
 }
 `;
 
+export interface PreflightOptions {
+  /**
+   * Names the CSS `@layer` the reset is wrapped in, so it can be ordered
+   * against other layered CSS (e.g. Tailwind's `@layer utilities`) instead
+   * of always winning the cascade. Defaults to `"reset"`. Pass `false` to
+   * inject un-layered CSS instead.
+   */
+  layer?: string | false;
+}
+
 /**
  * Injects an opinionated browser reset into `document.head` exactly once.
  *
@@ -187,6 +197,11 @@ input:where([type='button'], [type='reset'], [type='submit']),
  * import { preflight } from '@praxisjs/css'
  * preflight()
  */
-export function preflight(): void {
-  globalStyle(_css => PREFLIGHT);
+export function preflight({ layer = "reset" }: PreflightOptions = {}): void {
+  if (!layer) {
+    globalStyle(_css => PREFLIGHT);
+    return;
+  }
+
+  globalStyle(_css => `@layer ${layer} {\n${PREFLIGHT}\n}`);
 }