zss-engine 0.1.1 → 0.2.0

package/dist/{types → src/types}/common/css-properties.d.ts

@@ -1,14 +1,12 @@
-import type { CSSVariableValue } from './css-variables';
+import type { CSSVariableValue } from '../main/vars';
 import type { Properties, Property } from 'csstype';
 type ColorValue = Exclude<Property.Color, '-moz-initial'> | (string & {});
 type CSSColorProperty = Exclude<ColorValue, SystemColorKeyword>;
 type SystemColorKeyword = 'ActiveBorder' | 'ActiveCaption' | 'AppWorkspace' | 'Background' | 'ButtonFace' | 'ButtonHighlight' | 'ButtonShadow' | 'ButtonText' | 'CaptionText' | 'GrayText' | 'Highlight' | 'HighlightText' | 'InactiveBorder' | 'InactiveCaption' | 'InactiveCaptionText' | 'InfoBackground' | 'InfoText' | 'Menu' | 'MenuText' | 'Scrollbar' | 'ThreeDDarkShadow' | 'ThreeDFace' | 'ThreeDHighlight' | 'ThreeDLightShadow' | 'ThreeDShadow' | 'Window' | 'WindowFrame' | 'WindowText';
 type ExcludeMozInitial<T> = Exclude<T, '-moz-initial'>;
-type PropertiesWithoutMozInitial = {
-    [K in keyof Properties]: ExcludeMozInitial<Properties[K]>;
-};
-type CSSProperties = Omit<PropertiesWithoutMozInitial, 'fontSize'> & {
-    fontSize: PropertiesWithoutMozInitial['fontSize'] | number;
+type CSSTypeProperties = Properties<number | (string & {})>;
+type CSSProperties = {
+    [K in keyof CSSTypeProperties]: ExcludeMozInitial<CSSTypeProperties[K]>;
 };
 type BaseCSSProperties = {
     [K in keyof CSSProperties]: CSSProperties[K] | CSSVariableValue;

package/dist/src/types/main/vars.d.ts

@@ -0,0 +1,10 @@
+export type VarsDefinition = Record<string, string | number | Record<string, string | number>>;
+type CSSVariableKey = `--${string}`;
+export type CSSVariableValue = `var(${CSSVariableKey})`;
+type CSSVariableProperties = {
+    [key: CSSVariableKey]: string | number;
+};
+export type VarsTransformed = {
+    [key: string]: CSSVariableProperties;
+};
+export {};

package/dist/{utils → src/utils}/helper.js

@@ -4,7 +4,7 @@ export const isServer = !isWindowDefined || !isDocumentDefined;
 export const isDevelopment = process.env.NODE_ENV === 'development';
 export const isDevAndTest = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
 export const isDevServer = isDevelopment && isServer;
-const exception = ['line-height', 'font-weight', 'opacity', 'scale', 'z-index'];
+const exception = ['line-height', 'font-weight', 'opacity', 'scale', 'z-index', 'column-count', 'order', 'orphans', 'widows'];
 export const applyCssValue = (value, cssProp) => {
     if (typeof value === 'number') {
         return exception.includes(cssProp) ? value.toString() : value + 'px';

package/dist/tests/inject-client-css.test.js

@@ -0,0 +1,9 @@
+import { injectClientCSS } from '../src';
+test('injectClientCSS correctly appends style element with expected content', () => {
+    const hash = 'ABC12';
+    const sheet = `.test-class_${hash} { color: red; }`;
+    injectClientCSS(hash, sheet);
+    const styleElement = document.getElementById(hash);
+    expect(styleElement).not.toBeNull();
+    expect(styleElement?.textContent).toContain(`.test-class_${hash} { color: red; }`);
+});

package/dist/tests/inject-client-global-css.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/inject-client-global-css.test.js

@@ -0,0 +1,9 @@
+import { injectClientGlobalCSS } from '../src';
+test('injectClientGlobalCSS correctly appends global style element with expected content', () => {
+    const scoped = 'global-scope';
+    const sheet = '.global-class { color: blue; }';
+    injectClientGlobalCSS(sheet, scoped);
+    const styleElement = document.querySelector(`[data-scope="${scoped}"]`);
+    expect(styleElement).not.toBeNull();
+    expect(styleElement?.textContent).toContain('.global-class { color: blue; }');
+});

package/dist/tests/inject-server-css.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/inject-server-css.test.js

@@ -0,0 +1,12 @@
+import { getServerCSS, injectServerCSS } from '../src';
+test('should inject and get server CSS correctly', () => {
+    const hash1 = 'abcd1';
+    const hash2 = 'abcd2';
+    const sheet1 = 'body { color: red; }';
+    const sheet2 = 'h1 { font-size: 20px; }';
+    injectServerCSS(hash1, sheet1);
+    injectServerCSS(hash2, sheet2);
+    const serverCSS = getServerCSS();
+    expect(serverCSS).toContain(sheet1);
+    expect(serverCSS).toContain(sheet2);
+});

package/dist/tests/transpiler.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/transpiler.test.js

@@ -0,0 +1,12 @@
+import { genBase36Hash, transpiler } from '../src';
+test('object to sheet transpiler produces expected output', async () => {
+    const object = {
+        e2e: {
+            color: 'aqua',
+        },
+    };
+    const base62Hash = genBase36Hash(object, 6);
+    const { styleSheet } = transpiler(object, base62Hash);
+    expect(styleSheet).toContain('.e2e_');
+    expect(styleSheet).toContain('color: aqua;');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zss-engine",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Zero-runtime Style Sheet Engine",
   "keywords": [
     "zero-runtime",

package/dist/types/common/css-variables.d.ts

@@ -1,3 +0,0 @@
-type CSSVariableKey = `--${string}`;
-export type CSSVariableValue = `var(${CSSVariableKey})`;
-export {};

package/dist/types/main/vars.d.ts

@@ -1 +0,0 @@
-export type VarsDefinition = Record<string, string | Record<string, string>>;