Add CSSStyleDeclaration injection API for parsed rule styles

.changeset/late-wolves-tickle.md

@@ -0,0 +1,13 @@
+---
+"@acemir/cssom": minor
+---
+
+Add an explicit CSSStyleDeclaration integration API.
+
+New APIs:
+- `setup({ CSSStyleDeclaration })`
+- `setCSSStyleDeclaration(CSSStyleDeclaration)`
+- `getCSSStyleDeclaration()`
+- `resetCSSStyleDeclaration()`
+
+Rule style declarations created during parsing/cloning now use the configured constructor consistently, avoiding module load-order issues when integrating with custom CSSStyleDeclaration implementations.

README.mdown

@@ -33,6 +33,19 @@ To use it with Node.js or any other CommonJS loader:
 
     ➤ npm install @acemir/cssom
 
+You can inject a custom declaration implementation for parsed rule styles:
+
+```js
+const cssom = require("@acemir/cssom");
+
+cssom.setup({
+  CSSStyleDeclaration: YourCSSStyleDeclaration
+});
+
+// or globally:
+cssom.setCSSStyleDeclaration(YourCSSStyleDeclaration);
+```
+
 ## Don’t use it if...
 
 You parse CSS to mungle, minify or reformat code like this:

lib/CSSFontFaceRule.js

@@ -1,14 +1,13 @@
 //.CommonJS
 var CSSOM = {
-	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
 	CSSRule: require("./CSSRule").CSSRule
 };
-// Use cssstyle if available
-try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
-} catch (e) {
-	// ignore
-}
+var styleDeclarationProvider = require("./styleDeclarationProvider");
+Object.defineProperty(CSSOM, "CSSStyleDeclaration", {
+	enumerable: true,
+	configurable: true,
+	get: styleDeclarationProvider.getCSSStyleDeclaration
+});
 ///CommonJS
 
 

lib/CSSKeyframeRule.js

@@ -1,14 +1,13 @@
 //.CommonJS
 var CSSOM = {
-	CSSRule: require("./CSSRule").CSSRule,
-	CSSStyleDeclaration: require('./CSSStyleDeclaration').CSSStyleDeclaration
+	CSSRule: require("./CSSRule").CSSRule
 };
-// Use cssstyle if available
-try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
-} catch (e) {
-	// ignore
-}
+var styleDeclarationProvider = require("./styleDeclarationProvider");
+Object.defineProperty(CSSOM, "CSSStyleDeclaration", {
+	enumerable: true,
+	configurable: true,
+	get: styleDeclarationProvider.getCSSStyleDeclaration
+});
 ///CommonJS
 
 

lib/CSSNestedDeclarations.js

@@ -1,14 +1,13 @@
 //.CommonJS
 var CSSOM = {
-  CSSRule: require("./CSSRule").CSSRule,
-  CSSStyleDeclaration: require('./CSSStyleDeclaration').CSSStyleDeclaration
+  CSSRule: require("./CSSRule").CSSRule
 };
-// Use cssstyle if available
-try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
-} catch (e) {
-	// ignore
-}
+var styleDeclarationProvider = require("./styleDeclarationProvider");
+Object.defineProperty(CSSOM, "CSSStyleDeclaration", {
+  enumerable: true,
+  configurable: true,
+  get: styleDeclarationProvider.getCSSStyleDeclaration
+});
 ///CommonJS
 
 
@@ -53,4 +52,4 @@ Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
 
 //.CommonJS
 exports.CSSNestedDeclarations = CSSOM.CSSNestedDeclarations;
-///CommonJS
+///CommonJS

lib/CSSOM.js

@@ -4,6 +4,7 @@ var CSSOM = {
    * 
    * @param {Object} opts - Configuration options for the CSSOM instance
    * @param {Object} [opts.globalObject] - Optional global object to be assigned to CSSOM objects prototype
+   * @param {Function} [opts.CSSStyleDeclaration] - Optional constructor used for declaration blocks in parsed rules
    * @returns {Object} A new CSSOM instance with the applied configuration
    * @description
    * This method creates a new instance of CSSOM and optionally
@@ -12,7 +13,13 @@ var CSSOM = {
    * using a factory function and assigns the globalObject to its prototype's __globalObject property.
    */
   setup: function (opts) {
+    opts = opts || {};
     var instance = Object.create(this);
+    if (opts.CSSStyleDeclaration) {
+      var styleDeclarationProvider = require("./styleDeclarationProvider");
+      styleDeclarationProvider.setCSSStyleDeclaration(opts.CSSStyleDeclaration);
+      instance.CSSStyleDeclaration = opts.CSSStyleDeclaration;
+    }
     if (opts.globalObject) {
       if (instance.CSSStyleSheet) {
         var factoryCSSStyleSheet = createFunctionFactory(instance.CSSStyleSheet);
@@ -55,4 +62,3 @@ function createFunctionFactory(fn) {
 //.CommonJS
 module.exports = CSSOM;
 ///CommonJS
-

lib/CSSPageRule.js

@@ -1,17 +1,16 @@
 //.CommonJS
 var CSSOM = {
-	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
 	CSSRule: require("./CSSRule").CSSRule,
 	CSSRuleList: require("./CSSRuleList").CSSRuleList,
 	CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
 };
+var styleDeclarationProvider = require("./styleDeclarationProvider");
 var regexPatterns = require("./regexPatterns").regexPatterns;
-// Use cssstyle if available
-try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
-} catch (e) {
-	// ignore
-}
+Object.defineProperty(CSSOM, "CSSStyleDeclaration", {
+	enumerable: true,
+	configurable: true,
+	get: styleDeclarationProvider.getCSSStyleDeclaration
+});
 ///CommonJS
 
 

lib/CSSStyleRule.js

@@ -1,17 +1,16 @@
 //.CommonJS
 var CSSOM = {
-	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
 	CSSRule: require("./CSSRule").CSSRule,
 	CSSRuleList: require("./CSSRuleList").CSSRuleList,
 	CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
 };
+var styleDeclarationProvider = require("./styleDeclarationProvider");
 var regexPatterns = require("./regexPatterns").regexPatterns;
-// Use cssstyle if available
-try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
-} catch (e) {
-	// ignore
-}
+Object.defineProperty(CSSOM, "CSSStyleDeclaration", {
+	enumerable: true,
+	configurable: true,
+	get: styleDeclarationProvider.getCSSStyleDeclaration
+});
 ///CommonJS
 
 

lib/clone.js

@@ -9,19 +9,18 @@ var CSSOM = {
 	CSSMediaRule: require("./CSSMediaRule").CSSMediaRule,
 	CSSContainerRule: require("./CSSContainerRule").CSSContainerRule,
 	CSSSupportsRule: require("./CSSSupportsRule").CSSSupportsRule,
-	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
 	CSSKeyframeRule: require('./CSSKeyframeRule').CSSKeyframeRule,
 	CSSKeyframesRule: require('./CSSKeyframesRule').CSSKeyframesRule,
 	CSSScopeRule: require('./CSSScopeRule').CSSScopeRule,
 	CSSLayerBlockRule: require('./CSSLayerBlockRule').CSSLayerBlockRule,
 	CSSLayerStatementRule: require('./CSSLayerStatementRule').CSSLayerStatementRule
 };
-// Use cssstyle if available
-try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
-} catch (e) {
-	// ignore
-}
+var styleDeclarationProvider = require("./styleDeclarationProvider");
+Object.defineProperty(CSSOM, "CSSStyleDeclaration", {
+	enumerable: true,
+	configurable: true,
+	get: styleDeclarationProvider.getCSSStyleDeclaration
+});
 ///CommonJS
 
 

lib/cssstyleTryCatchBlock.js

@@ -1,5 +1,9 @@
+//.CommonJS
+var styleDeclarationProvider = require("./styleDeclarationProvider");
+
 try {
-	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
+	styleDeclarationProvider.setCSSStyleDeclaration(require("cssstyle").CSSStyleDeclaration);
 } catch (e) {
 	// ignore
-}
+}
+///CommonJS

lib/index.js

@@ -6,6 +6,15 @@ require('./errorUtils');
 require("./regexPatterns")
 
 exports.CSSStyleDeclaration = require('./CSSStyleDeclaration').CSSStyleDeclaration;
+exports.getCSSStyleDeclaration = function() {
+	return require("./styleDeclarationProvider").getCSSStyleDeclaration();
+};
+exports.setCSSStyleDeclaration = function(CSSStyleDeclaration) {
+	return require("./styleDeclarationProvider").setCSSStyleDeclaration(CSSStyleDeclaration);
+};
+exports.resetCSSStyleDeclaration = function() {
+	return require("./styleDeclarationProvider").resetCSSStyleDeclaration();
+};
 
 require('./cssstyleTryCatchBlock');
 

lib/styleDeclarationProvider.js

@@ -0,0 +1,28 @@
+//.CommonJS
+var currentCSSStyleDeclaration;
+///CommonJS
+
+function getDefaultCSSStyleDeclaration() {
+	return require("./CSSStyleDeclaration").CSSStyleDeclaration;
+}
+
+function getCSSStyleDeclaration() {
+	return currentCSSStyleDeclaration || getDefaultCSSStyleDeclaration();
+}
+
+function setCSSStyleDeclaration(CSSStyleDeclaration) {
+	if (typeof CSSStyleDeclaration !== "function") {
+		throw new TypeError("CSSStyleDeclaration must be a constructor function");
+	}
+	currentCSSStyleDeclaration = CSSStyleDeclaration;
+}
+
+function resetCSSStyleDeclaration() {
+	currentCSSStyleDeclaration = undefined;
+}
+
+//.CommonJS
+exports.getCSSStyleDeclaration = getCSSStyleDeclaration;
+exports.setCSSStyleDeclaration = setCSSStyleDeclaration;
+exports.resetCSSStyleDeclaration = resetCSSStyleDeclaration;
+///CommonJS