Merge pull request #202 from AegisJSProject/bug/css-media

FIx creating CSS output with media queries

Author: shgysk8zer0

.github/workflows/npm-publish.yml

@@ -25,13 +25,11 @@ jobs:
           cache: npm
           registry-url: https://registry.npmjs.org
       - name: Install dependencies
-        run: npm ci --ignore-scripts --no-audit --fund-no
+        run: npm ci --no-audit --no-fund
       - name: Run tests
         run: npm test
       - name: Build Package
         run: npm run build --if-present
       - name: Publish to npm
         run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
 

.nvmrc

@@ -1 +1 @@
-20.9.0
+24.10.0

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.2.8] - 2026-03-14
+
+### Changed
+- Separate `@property` from old `--prop`s
+
+### Fixed
+- Fix outputing `.css` for sheets with media queries
+
 ## [v0.2.7] - 2025-04-21
 
 ### Fixed

createSheets.js

@@ -4,29 +4,78 @@ globalThis.reportError ??= console.error;
 
 const scripts = [
 	'./animations.js', './button.js', './forms.js', './misc.js', './properties.js', './reset.js',
-	'./scrollbar.js', './styles.js', './theme.js',
+	'./scrollbar.js', './styles.js', './theme.js', './properties-legacy.js',
 ];
 
 class CSSStyleSheet {
 	#text = '';
+	#media = null;
+	#disabled = false;
+
+	constructor({ media = null, disabled = false } = {}) {
+		this.#media = media;
+		this.#disabled = disabled;
+	}
+
+	get media() {
+		return this.#media;
+	}
+
+	get disabled() {
+		return this.#disabled;
+	}
+
+	set disabled(val) {
+		this,this.#disabled = val;
+	}
 
 	toString() {
-		return this.#text;
+		if (this.disabled) {
+			return '';
+		} else if (typeof this.#media === 'string') {
+			return `@media (${this.#media}) {${this.#text}}`;
+		} else {
+			return this.#text;
+		}
 	}
 
 	replaceSync(text) {
 		this.#text = text;
 	}
 
 	async replace(text) {
-		return Promise.resolve().then(() => this.replaceSync(text)).then(() => this);
+		return Promise.try(() => this.replaceSync(text)).then(() => this);
 	}
 }
 
 globalThis.CSS = { supports: () => true };
 globalThis.CSSStyleSheet = CSSStyleSheet;
 globalThis.document = {};
-globalThis.MediaQueryList = class MediaQueryList extends EventTarget {};
+globalThis.matchMedia = media => {
+	const mql = new MediaQueryList();
+	mql.media = media;
+	return mql;
+};
+
+globalThis.MediaQueryList = class MediaQueryList extends EventTarget {
+	#media = null;
+
+	get matches() {
+		return true;
+	}
+
+	get media() {
+		return this.#media;
+	}
+
+	set media(val) {
+		this.#media = val;
+	}
+
+	toString() {
+		return this.#media;
+	}
+};
 
 async function saveSheet(path) {
 	const module = await import(path);