cssstyle 2.2.0 → 3.0.0

package/README.md

@@ -10,6 +10,6 @@ A Node JS implementation of the CSS Object Model [CSSStyleDeclaration interface]
 
 This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM) with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment. 
 
-It was originally created by Chad Walker, it is now maintaind by Jon Sakas and other open source contributors.
+It was originally created by Chad Walker, it is now maintained by the jsdom community.
 
 Bug reports and pull requests are welcome.

package/lib/CSSStyleDeclaration.js

@@ -3,7 +3,7 @@
  * https://github.com/NV/CSSOM
  ********************************************************************/
 'use strict';
-var CSSOM = require('cssom');
+var CSSOM = require('rrweb-cssom');
 var allProperties = require('./allProperties');
 var allExtraProperties = require('./allExtraProperties');
 var implementedProperties = require('./implementedProperties');
@@ -20,7 +20,7 @@ var CSSStyleDeclaration = function CSSStyleDeclaration(onChangeCallback) {
   this._length = 0;
   this._onChange =
     onChangeCallback ||
-    function() {
+    function () {
       return;
     };
 };
@@ -34,7 +34,7 @@ CSSStyleDeclaration.prototype = {
    * @return {string} the value of the property if it has been explicitly set for this declaration block.
    * Returns the empty string if the property has not been set.
    */
-  getPropertyValue: function(name) {
+  getPropertyValue: function (name) {
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -48,7 +48,7 @@ CSSStyleDeclaration.prototype = {
    * @param {string} [priority=null] "important" or null
    * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
    */
-  setProperty: function(name, value, priority) {
+  setProperty: function (name, value, priority) {
     if (value === undefined) {
       return;
     }
@@ -69,7 +69,7 @@ CSSStyleDeclaration.prototype = {
     this[lowercaseName] = value;
     this._importants[lowercaseName] = priority;
   },
-  _setProperty: function(name, value, priority) {
+  _setProperty: function (name, value, priority) {
     if (value === undefined) {
       return;
     }
@@ -101,7 +101,7 @@ CSSStyleDeclaration.prototype = {
    * @return {string} the value of the property if it has been explicitly set for this declaration block.
    * Returns the empty string if the property has not been set or the property name does not correspond to a known CSS property.
    */
-  removeProperty: function(name) {
+  removeProperty: function (name) {
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -129,11 +129,11 @@ CSSStyleDeclaration.prototype = {
    *
    * @param {String} name
    */
-  getPropertyPriority: function(name) {
+  getPropertyPriority: function (name) {
     return this._importants[name] || '';
   },
 
-  getPropertyCSSValue: function() {
+  getPropertyCSSValue: function () {
     //FIXME
     return;
   },
@@ -143,12 +143,12 @@ CSSStyleDeclaration.prototype = {
    *   element.style.getPropertyShorthand("overflow-x")
    *   -> "overflow"
    */
-  getPropertyShorthand: function() {
+  getPropertyShorthand: function () {
     //FIXME
     return;
   },
 
-  isPropertyImplicit: function() {
+  isPropertyImplicit: function () {
     //FIXME
     return;
   },
@@ -156,7 +156,7 @@ CSSStyleDeclaration.prototype = {
   /**
    *   http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-item
    */
-  item: function(index) {
+  item: function (index) {
     index = parseInt(index, 10);
     if (index < 0 || index >= this._length) {
       return '';
@@ -167,7 +167,7 @@ CSSStyleDeclaration.prototype = {
 
 Object.defineProperties(CSSStyleDeclaration.prototype, {
   cssText: {
-    get: function() {
+    get: function () {
       var properties = [];
       var i;
       var name;
@@ -184,7 +184,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
       }
       return properties.join(' ');
     },
-    set: function(value) {
+    set: function (value) {
       var i;
       this._values = {};
       Array.prototype.splice.call(this, 0, this._length);
@@ -212,14 +212,14 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
     configurable: true,
   },
   parentRule: {
-    get: function() {
+    get: function () {
       return null;
     },
     enumerable: true,
     configurable: true,
   },
   length: {
-    get: function() {
+    get: function () {
       return this._length;
     },
     /**
@@ -227,7 +227,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
      * length. If the new length is more, it does nothing, the new indices
      * will be undefined until set.
      **/
-    set: function(value) {
+    set: function (value) {
       var i;
       for (i = value; i < this._length; i++) {
         delete this[i];
@@ -241,7 +241,7 @@ Object.defineProperties(CSSStyleDeclaration.prototype, {
 
 require('./properties')(CSSStyleDeclaration.prototype);
 
-allProperties.forEach(function(property) {
+allProperties.forEach(function (property) {
   if (!implementedProperties.has(property)) {
     var declaration = getBasicPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
@@ -249,7 +249,7 @@ allProperties.forEach(function(property) {
   }
 });
 
-allExtraProperties.forEach(function(property) {
+allExtraProperties.forEach(function (property) {
   if (!implementedProperties.has(property)) {
     var declaration = getBasicPropertyDescriptor(property);
     Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);

package/lib/CSSStyleDeclaration.test.js

@@ -10,7 +10,7 @@ var parsers = require('./parsers');
 var dashedProperties = [...allProperties, ...allExtraProperties];
 var allowedProperties = dashedProperties.map(parsers.dashedToCamelCase);
 implementedProperties = Array.from(implementedProperties).map(parsers.dashedToCamelCase);
-var invalidProperties = implementedProperties.filter(prop => !allowedProperties.includes(prop));
+var invalidProperties = implementedProperties.filter((prop) => !allowedProperties.includes(prop));
 
 describe('CSSStyleDeclaration', () => {
   test('has only valid properties implemented', () => {
@@ -19,7 +19,7 @@ describe('CSSStyleDeclaration', () => {
 
   test('has all properties', () => {
     var style = new CSSStyleDeclaration();
-    allProperties.forEach(property => {
+    allProperties.forEach((property) => {
       expect(style.__lookupGetter__(property)).toBeTruthy();
       expect(style.__lookupSetter__(property)).toBeTruthy();
     });
@@ -27,7 +27,7 @@ describe('CSSStyleDeclaration', () => {
 
   test('has dashed properties', () => {
     var style = new CSSStyleDeclaration();
-    dashedProperties.forEach(property => {
+    dashedProperties.forEach((property) => {
       expect(style.__lookupGetter__(property)).toBeTruthy();
       expect(style.__lookupSetter__(property)).toBeTruthy();
     });
@@ -302,7 +302,7 @@ describe('CSSStyleDeclaration', () => {
   test('padding and margin should set/clear shorthand properties', () => {
     var style = new CSSStyleDeclaration();
     var parts = ['Top', 'Right', 'Bottom', 'Left'];
-    var testParts = function(name, v, V) {
+    var testParts = function (name, v, V) {
       style[name] = v;
       for (var i = 0; i < 4; i++) {
         var part = name + parts[i];
@@ -329,7 +329,7 @@ describe('CSSStyleDeclaration', () => {
   test('padding and margin shorthands should set main properties', () => {
     var style = new CSSStyleDeclaration();
     var parts = ['Top', 'Right', 'Bottom', 'Left'];
-    var testParts = function(name, v, V) {
+    var testParts = function (name, v, V) {
       var expected;
       for (var i = 0; i < 4; i++) {
         style[name] = v;
@@ -353,7 +353,7 @@ describe('CSSStyleDeclaration', () => {
   });
 
   test('onchange callback should be called when the csstext changes', () => {
-    var style = new CSSStyleDeclaration(function(cssText) {
+    var style = new CSSStyleDeclaration(function (cssText) {
       expect(cssText).toEqual('opacity: 0;');
     });
     style.setProperty('opacity', 0);
@@ -547,4 +547,10 @@ describe('CSSStyleDeclaration', () => {
     expect(style.getPropertyValue('--foo')).toEqual('');
     expect(style.getPropertyValue('--fOo')).toEqual('purple');
   });
+
+  test('supports calc', () => {
+    const style = new CSSStyleDeclaration();
+    style.setProperty('width', 'calc(100% - 100px)');
+    expect(style.getPropertyValue('width')).toEqual('calc(100% - 100px)');
+  });
 });

package/lib/allProperties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 1/20/2020
+// autogenerated - 1/22/2023
 
 /*
  *
@@ -8,6 +8,8 @@
  */
 
 module.exports = new Set([
+  '-webkit-line-clamp',
+  'accent-color',
   'align-content',
   'align-items',
   'align-self',
@@ -15,15 +17,20 @@ module.exports = new Set([
   'all',
   'animation',
   'animation-delay',
+  'animation-delay-end',
+  'animation-delay-start',
   'animation-direction',
   'animation-duration',
   'animation-fill-mode',
   'animation-iteration-count',
   'animation-name',
   'animation-play-state',
+  'animation-range',
   'animation-timing-function',
   'appearance',
+  'aspect-ratio',
   'azimuth',
+  'backface-visibility',
   'background',
   'background-attachment',
   'background-blend-mode',
@@ -35,7 +42,8 @@ module.exports = new Set([
   'background-repeat',
   'background-size',
   'baseline-shift',
-  'block-overflow',
+  'baseline-source',
+  'block-ellipsis',
   'block-size',
   'bookmark-label',
   'bookmark-level',
@@ -134,7 +142,16 @@ module.exports = new Set([
   'column-width',
   'columns',
   'contain',
+  'contain-intrinsic-block-size',
+  'contain-intrinsic-height',
+  'contain-intrinsic-inline-size',
+  'contain-intrinsic-size',
+  'contain-intrinsic-width',
+  'container',
+  'container-name',
+  'container-type',
   'content',
+  'content-visibility',
   'continue',
   'counter-increment',
   'counter-reset',
@@ -218,9 +235,9 @@ module.exports = new Set([
   'image-orientation',
   'image-rendering',
   'image-resolution',
-  'initial-letters',
-  'initial-letters-align',
-  'initial-letters-wrap',
+  'initial-letter',
+  'initial-letter-align',
+  'initial-letter-wrap',
   'inline-size',
   'inline-sizing',
   'inset',
@@ -234,6 +251,7 @@ module.exports = new Set([
   'justify-content',
   'justify-items',
   'justify-self',
+  'leading-trim',
   'left',
   'letter-spacing',
   'lighting-color',
@@ -285,6 +303,7 @@ module.exports = new Set([
   'min-block-size',
   'min-height',
   'min-inline-size',
+  'min-intrinsic-sizing',
   'min-width',
   'mix-blend-mode',
   'nav-down',
@@ -294,15 +313,11 @@ module.exports = new Set([
   'object-fit',
   'object-position',
   'offset',
-  'offset-after',
   'offset-anchor',
-  'offset-before',
   'offset-distance',
-  'offset-end',
   'offset-path',
   'offset-position',
   'offset-rotate',
-  'offset-start',
   'opacity',
   'order',
   'orphans',
@@ -312,7 +327,19 @@ module.exports = new Set([
   'outline-style',
   'outline-width',
   'overflow',
+  'overflow-anchor',
   'overflow-block',
+  'overflow-clip-margin',
+  'overflow-clip-margin-block',
+  'overflow-clip-margin-block-end',
+  'overflow-clip-margin-block-start',
+  'overflow-clip-margin-bottom',
+  'overflow-clip-margin-inline',
+  'overflow-clip-margin-inline-end',
+  'overflow-clip-margin-inline-start',
+  'overflow-clip-margin-left',
+  'overflow-clip-margin-right',
+  'overflow-clip-margin-top',
   'overflow-inline',
   'overflow-wrap',
   'overflow-x',
@@ -335,6 +362,8 @@ module.exports = new Set([
   'pause',
   'pause-after',
   'pause-before',
+  'perspective',
+  'perspective-origin',
   'pitch',
   'pitch-range',
   'place-content',
@@ -342,16 +371,23 @@ module.exports = new Set([
   'place-self',
   'play-during',
   'position',
+  'print-color-adjust',
   'quotes',
   'region-fragment',
   'resize',
+  'rest',
+  'rest-after',
+  'rest-before',
   'richness',
   'right',
+  'rotate',
   'row-gap',
   'ruby-align',
   'ruby-merge',
+  'ruby-overhang',
   'ruby-position',
   'running',
+  'scale',
   'scroll-behavior',
   'scroll-margin',
   'scroll-margin-block',
@@ -378,6 +414,12 @@ module.exports = new Set([
   'scroll-snap-align',
   'scroll-snap-stop',
   'scroll-snap-type',
+  'scroll-timeline',
+  'scroll-timeline-axis',
+  'scroll-timeline-name',
+  'scrollbar-color',
+  'scrollbar-gutter',
+  'scrollbar-width',
   'shape-image-threshold',
   'shape-inside',
   'shape-margin',
@@ -386,6 +428,7 @@ module.exports = new Set([
   'spatial-navigation-contain',
   'spatial-navigation-function',
   'speak',
+  'speak-as',
   'speak-header',
   'speak-numeral',
   'speak-punctuation',
@@ -401,10 +444,19 @@ module.exports = new Set([
   'text-decoration',
   'text-decoration-color',
   'text-decoration-line',
+  'text-decoration-skip',
+  'text-decoration-skip-box',
+  'text-decoration-skip-ink',
+  'text-decoration-skip-inset',
+  'text-decoration-skip-self',
+  'text-decoration-skip-spaces',
   'text-decoration-style',
+  'text-decoration-thickness',
+  'text-edge',
   'text-emphasis',
   'text-emphasis-color',
   'text-emphasis-position',
+  'text-emphasis-skip',
   'text-emphasis-style',
   'text-group-align',
   'text-indent',
@@ -416,22 +468,37 @@ module.exports = new Set([
   'text-space-trim',
   'text-spacing',
   'text-transform',
+  'text-underline-offset',
   'text-underline-position',
   'text-wrap',
   'top',
   'transform',
   'transform-box',
   'transform-origin',
+  'transform-style',
   'transition',
   'transition-delay',
   'transition-duration',
   'transition-property',
   'transition-timing-function',
+  'translate',
   'unicode-bidi',
   'user-select',
   'vertical-align',
+  'view-timeline',
+  'view-timeline-axis',
+  'view-timeline-inset',
+  'view-timeline-name',
+  'view-transition-name',
   'visibility',
+  'voice-balance',
+  'voice-duration',
   'voice-family',
+  'voice-pitch',
+  'voice-range',
+  'voice-rate',
+  'voice-stress',
+  'voice-volume',
   'volume',
   'white-space',
   'widows',

package/lib/allWebkitProperties.js

@@ -191,4 +191,4 @@ module.exports = [
   'wrap-through',
   'writing-mode',
   'zoom',
-].map(prop => 'webkit-' + prop);
+].map((prop) => 'webkit-' + prop);

package/lib/implementedProperties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 1/23/2020
+// autogenerated - 2/12/2023
 
 /*
  *

package/lib/parsers.js

@@ -18,6 +18,7 @@ exports.TYPES = {
   ANGLE: 8,
   KEYWORD: 9,
   NULL_OR_EMPTY_STR: 10,
+  CALC: 11,
 };
 
 // rough regular expressions
@@ -30,7 +31,9 @@ var stringRegEx = /^("[^"]*"|'[^']*')$/;
 var colorRegEx1 = /^#([0-9a-fA-F]{3,4}){1,2}$/;
 var colorRegEx2 = /^rgb\(([^)]*)\)$/;
 var colorRegEx3 = /^rgba\(([^)]*)\)$/;
-var colorRegEx4 = /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/;
+var calcRegEx = /^calc\(([^)]*)\)$/;
+var colorRegEx4 =
+  /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/;
 var angleRegEx = /^([-+]?[0-9]*\.?[0-9]+)(deg|grad|rad)$/;
 
 // This will return one of the above types based on the passed in string
@@ -61,6 +64,9 @@ exports.valueType = function valueType(val) {
   if (urlRegEx.test(val)) {
     return exports.TYPES.URL;
   }
+  if (calcRegEx.test(val)) {
+    return exports.TYPES.CALC;
+  }
   if (stringRegEx.test(val)) {
     return exports.TYPES.STRING;
   }
@@ -70,6 +76,7 @@ exports.valueType = function valueType(val) {
   if (colorRegEx1.test(val)) {
     return exports.TYPES.COLOR;
   }
+
   var res = colorRegEx2.exec(val);
   var parts;
   if (res !== null) {
@@ -201,6 +208,11 @@ exports.parsePercent = function parsePercent(val) {
 
 // either a length or a percent
 exports.parseMeasurement = function parseMeasurement(val) {
+  var type = exports.valueType(val);
+  if (type === exports.TYPES.CALC) {
+    return val;
+  }
+
   var length = exports.parseLength(val);
   if (length !== undefined) {
     return length;
@@ -437,7 +449,7 @@ exports.parseKeyword = function parseKeyword(val, valid_keywords) {
 };
 
 // utility to translate from border-width to borderWidth
-var dashedToCamelCase = function(dashed) {
+var dashedToCamelCase = function (dashed) {
   var i;
   var camel = '';
   var nextCap = false;
@@ -457,7 +469,7 @@ var is_space = /\s/;
 var opening_deliminators = ['"', "'", '('];
 var closing_deliminators = ['"', "'", ')'];
 // this splits on whitespace, but keeps quoted and parened parts together
-var getParts = function(str) {
+var getParts = function (str) {
   var deliminator_stack = [];
   var length = str.length;
   var i;
@@ -510,7 +522,7 @@ exports.shorthandParser = function parse(v, shorthand_for) {
   var obj = {};
   var type = exports.valueType(v);
   if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
-    Object.keys(shorthand_for).forEach(function(property) {
+    Object.keys(shorthand_for).forEach(function (property) {
       obj[property] = '';
     });
     return obj;
@@ -529,9 +541,9 @@ exports.shorthandParser = function parse(v, shorthand_for) {
   }
   var parts = getParts(v);
   var valid = true;
-  parts.forEach(function(part, i) {
+  parts.forEach(function (part, i) {
     var part_valid = false;
-    Object.keys(shorthand_for).forEach(function(property) {
+    Object.keys(shorthand_for).forEach(function (property) {
       if (shorthand_for[property].isValid(part, i)) {
         part_valid = true;
         obj[property] = part;
@@ -545,14 +557,14 @@ exports.shorthandParser = function parse(v, shorthand_for) {
   return obj;
 };
 
-exports.shorthandSetter = function(property, shorthand_for) {
-  return function(v) {
+exports.shorthandSetter = function (property, shorthand_for) {
+  return function (v) {
     var obj = exports.shorthandParser(v, shorthand_for);
     if (obj === undefined) {
       return;
     }
     //console.log('shorthandSetter for:', property, 'obj:', obj);
-    Object.keys(obj).forEach(function(subprop) {
+    Object.keys(obj).forEach(function (subprop) {
       // in case subprop is an implicit property, this will clear
       // *its* subpropertiesX
       var camel = dashedToCamelCase(subprop);
@@ -565,7 +577,7 @@ exports.shorthandSetter = function(property, shorthand_for) {
         this._values[subprop] = obj[subprop];
       }
     }, this);
-    Object.keys(shorthand_for).forEach(function(subprop) {
+    Object.keys(shorthand_for).forEach(function (subprop) {
       if (!obj.hasOwnProperty(subprop)) {
         this.removeProperty(subprop);
         delete this._values[subprop];
@@ -583,16 +595,16 @@ exports.shorthandSetter = function(property, shorthand_for) {
   };
 };
 
-exports.shorthandGetter = function(property, shorthand_for) {
-  return function() {
+exports.shorthandGetter = function (property, shorthand_for) {
+  return function () {
     if (this._values[property] !== undefined) {
       return this.getPropertyValue(property);
     }
     return Object.keys(shorthand_for)
-      .map(function(subprop) {
+      .map(function (subprop) {
         return this.getPropertyValue(subprop);
       }, this)
-      .filter(function(value) {
+      .filter(function (value) {
         return value !== '';
       })
       .join(' ');
@@ -604,14 +616,14 @@ exports.shorthandGetter = function(property, shorthand_for) {
 // if two, the first applies to the top and bottom, and the second to left and right
 // if three, the first applies to the top, the second to left and right, the third bottom
 // if four, top, right, bottom, left
-exports.implicitSetter = function(property_before, property_after, isValid, parser) {
+exports.implicitSetter = function (property_before, property_after, isValid, parser) {
   property_after = property_after || '';
   if (property_after !== '') {
     property_after = '-' + property_after;
   }
   var part_names = ['top', 'right', 'bottom', 'left'];
 
-  return function(v) {
+  return function (v) {
     if (typeof v === 'number') {
       v = v.toString();
     }
@@ -632,7 +644,7 @@ exports.implicitSetter = function(property_before, property_after, isValid, pars
       return undefined;
     }
 
-    parts = parts.map(function(part) {
+    parts = parts.map(function (part) {
       return parser(part);
     });
     this._setProperty(property_before + property_after, parts.join(' '));
@@ -663,11 +675,11 @@ exports.implicitSetter = function(property_before, property_after, isValid, pars
 //  sub-parts are set.  If so, it sets the shorthand version and removes
 //  the individual parts from the cssText.
 //
-exports.subImplicitSetter = function(prefix, part, isValid, parser) {
+exports.subImplicitSetter = function (prefix, part, isValid, parser) {
   var property = prefix + '-' + part;
   var subparts = [prefix + '-top', prefix + '-right', prefix + '-bottom', prefix + '-left'];
 
-  return function(v) {
+  return function (v) {
     if (typeof v === 'number') {
       v = v.toString();
     }
@@ -700,7 +712,7 @@ exports.subImplicitSetter = function(prefix, part, isValid, parser) {
 var camel_to_dashed = /[A-Z]/g;
 var first_segment = /^\([^-]\)-/;
 var vendor_prefixes = ['o', 'moz', 'ms', 'webkit'];
-exports.camelToDashed = function(camel_case) {
+exports.camelToDashed = function (camel_case) {
   var match;
   var dashed = camel_case.replace(camel_to_dashed, '-$&').toLowerCase();
   match = dashed.match(first_segment);

package/lib/parsers.test.js

@@ -65,6 +65,13 @@ describe('valueType', () => {
 
     expect(output).toEqual(parsers.TYPES.LENGTH);
   });
+
+  it('returns calc from calc(100px * 2)', () => {
+    let input = 'calc(100px * 2)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.CALC);
+  });
 });
 describe('parseInteger', () => {
   it.todo('test');