cssstyle 1.4.0 → 2.3.0

package/lib/allWebkitProperties.js

@@ -0,0 +1,194 @@
+'use strict';
+
+/**
+ * This file contains all implemented properties that are not a part of any
+ * current specifications or drafts, but are handled by browsers nevertheless.
+ */
+
+module.exports = [
+  'animation',
+  'animation-delay',
+  'animation-direction',
+  'animation-duration',
+  'animation-fill-mode',
+  'animation-iteration-count',
+  'animation-name',
+  'animation-play-state',
+  'animation-timing-function',
+  'appearance',
+  'aspect-ratio',
+  'backface-visibility',
+  'background-clip',
+  'background-composite',
+  'background-origin',
+  'background-size',
+  'border-after',
+  'border-after-color',
+  'border-after-style',
+  'border-after-width',
+  'border-before',
+  'border-before-color',
+  'border-before-style',
+  'border-before-width',
+  'border-end',
+  'border-end-color',
+  'border-end-style',
+  'border-end-width',
+  'border-fit',
+  'border-horizontal-spacing',
+  'border-image',
+  'border-radius',
+  'border-start',
+  'border-start-color',
+  'border-start-style',
+  'border-start-width',
+  'border-vertical-spacing',
+  'box-align',
+  'box-direction',
+  'box-flex',
+  'box-flex-group',
+  'box-lines',
+  'box-ordinal-group',
+  'box-orient',
+  'box-pack',
+  'box-reflect',
+  'box-shadow',
+  'color-correction',
+  'column-axis',
+  'column-break-after',
+  'column-break-before',
+  'column-break-inside',
+  'column-count',
+  'column-gap',
+  'column-rule',
+  'column-rule-color',
+  'column-rule-style',
+  'column-rule-width',
+  'columns',
+  'column-span',
+  'column-width',
+  'filter',
+  'flex-align',
+  'flex-direction',
+  'flex-flow',
+  'flex-item-align',
+  'flex-line-pack',
+  'flex-order',
+  'flex-pack',
+  'flex-wrap',
+  'flow-from',
+  'flow-into',
+  'font-feature-settings',
+  'font-kerning',
+  'font-size-delta',
+  'font-smoothing',
+  'font-variant-ligatures',
+  'highlight',
+  'hyphenate-character',
+  'hyphenate-limit-after',
+  'hyphenate-limit-before',
+  'hyphenate-limit-lines',
+  'hyphens',
+  'line-align',
+  'line-box-contain',
+  'line-break',
+  'line-clamp',
+  'line-grid',
+  'line-snap',
+  'locale',
+  'logical-height',
+  'logical-width',
+  'margin-after',
+  'margin-after-collapse',
+  'margin-before',
+  'margin-before-collapse',
+  'margin-bottom-collapse',
+  'margin-collapse',
+  'margin-end',
+  'margin-start',
+  'margin-top-collapse',
+  'marquee',
+  'marquee-direction',
+  'marquee-increment',
+  'marquee-repetition',
+  'marquee-speed',
+  'marquee-style',
+  'mask',
+  'mask-attachment',
+  'mask-box-image',
+  'mask-box-image-outset',
+  'mask-box-image-repeat',
+  'mask-box-image-slice',
+  'mask-box-image-source',
+  'mask-box-image-width',
+  'mask-clip',
+  'mask-composite',
+  'mask-image',
+  'mask-origin',
+  'mask-position',
+  'mask-position-x',
+  'mask-position-y',
+  'mask-repeat',
+  'mask-repeat-x',
+  'mask-repeat-y',
+  'mask-size',
+  'match-nearest-mail-blockquote-color',
+  'max-logical-height',
+  'max-logical-width',
+  'min-logical-height',
+  'min-logical-width',
+  'nbsp-mode',
+  'overflow-scrolling',
+  'padding-after',
+  'padding-before',
+  'padding-end',
+  'padding-start',
+  'perspective',
+  'perspective-origin',
+  'perspective-origin-x',
+  'perspective-origin-y',
+  'print-color-adjust',
+  'region-break-after',
+  'region-break-before',
+  'region-break-inside',
+  'region-overflow',
+  'rtl-ordering',
+  'svg-shadow',
+  'tap-highlight-color',
+  'text-combine',
+  'text-decorations-in-effect',
+  'text-emphasis',
+  'text-emphasis-color',
+  'text-emphasis-position',
+  'text-emphasis-style',
+  'text-fill-color',
+  'text-orientation',
+  'text-security',
+  'text-size-adjust',
+  'text-stroke',
+  'text-stroke-color',
+  'text-stroke-width',
+  'transform',
+  'transform-origin',
+  'transform-origin-x',
+  'transform-origin-y',
+  'transform-origin-z',
+  'transform-style',
+  'transition',
+  'transition-delay',
+  'transition-duration',
+  'transition-property',
+  'transition-timing-function',
+  'user-drag',
+  'user-modify',
+  'user-select',
+  'wrap',
+  'wrap-flow',
+  'wrap-margin',
+  'wrap-padding',
+  'wrap-shape-inside',
+  'wrap-shape-outside',
+  'wrap-through',
+  'writing-mode',
+  'zoom',
+].map(prop => 'webkit-' + prop);

package/lib/implementedProperties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 7/15/2019
+// autogenerated - 4/29/2020
 
 /*
  *

package/lib/parsers.js

@@ -5,6 +5,7 @@
 'use strict';
 
 const namedColors = require('./named_colors.json');
+const { hslToRgb } = require('./utils/colorSpace');
 
 exports.TYPES = {
   INTEGER: 1,
@@ -17,18 +18,20 @@ exports.TYPES = {
   ANGLE: 8,
   KEYWORD: 9,
   NULL_OR_EMPTY_STR: 10,
+  CALC: 11,
 };
 
 // rough regular expressions
 var integerRegEx = /^[-+]?[0-9]+$/;
-var numberRegEx = /^[-+]?[0-9]*\.[0-9]+$/;
-var lengthRegEx = /^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw))$/;
+var numberRegEx = /^[-+]?[0-9]*\.?[0-9]+$/;
+var lengthRegEx = /^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch))$/;
 var percentRegEx = /^[-+]?[0-9]*\.?[0-9]+%$/;
 var urlRegEx = /^url\(\s*([^)]*)\s*\)$/;
 var stringRegEx = /^("[^"]*"|'[^']*')$/;
-var colorRegEx1 = /^#[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]([0-9a-fA-F][0-9a-fA-F][0-9a-fA-F])?$/;
+var colorRegEx1 = /^#([0-9a-fA-F]{3,4}){1,2}$/;
 var colorRegEx2 = /^rgb\(([^)]*)\)$/;
 var colorRegEx3 = /^rgba\(([^)]*)\)$/;
+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)$/;
 
@@ -60,6 +63,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;
   }
@@ -69,6 +75,7 @@ exports.valueType = function valueType(val) {
   if (colorRegEx1.test(val)) {
     return exports.TYPES.COLOR;
   }
+
   var res = colorRegEx2.exec(val);
   var parts;
   if (res !== null) {
@@ -92,7 +99,7 @@ exports.valueType = function valueType(val) {
     }
     if (
       parts.slice(0, 3).every(percentRegEx.test.bind(percentRegEx)) ||
-      parts.every(integerRegEx.test.bind(integerRegEx))
+      parts.slice(0, 3).every(integerRegEx.test.bind(integerRegEx))
     ) {
       if (numberRegEx.test(parts[3])) {
         return exports.TYPES.COLOR;
@@ -200,6 +207,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;
@@ -287,15 +299,26 @@ exports.parseColor = function parseColor(val) {
     alpha = 1;
   var parts;
   var res = colorRegEx1.exec(val);
-  // is it #aaa or #ababab
+  // is it #aaa, #ababab, #aaaa, #abababaa
   if (res) {
+    var defaultHex = val.substr(1);
     var hex = val.substr(1);
-    if (hex.length === 3) {
+    if (hex.length === 3 || hex.length === 4) {
       hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+
+      if (defaultHex.length === 4) {
+        hex = hex + defaultHex[3] + defaultHex[3];
+      }
     }
     red = parseInt(hex.substr(0, 2), 16);
     green = parseInt(hex.substr(2, 2), 16);
     blue = parseInt(hex.substr(4, 2), 16);
+    if (hex.length === 8) {
+      var hexAlpha = hex.substr(6, 2);
+      var hexAlphaToRgbaAlpha = Number((parseInt(hexAlpha, 16) / 255).toFixed(3));
+
+      return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + hexAlphaToRgbaAlpha + ')';
+    }
     return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
   }
 
@@ -367,10 +390,12 @@ exports.parseColor = function parseColor(val) {
     if (_alpha && numberRegEx.test(_alpha)) {
       alpha = parseFloat(_alpha);
     }
+
+    const [r, g, b] = hslToRgb(hue, saturation / 100, lightness / 100);
     if (!_alphaString || alpha === 1) {
-      return 'hsl(' + hue + ', ' + saturation + '%, ' + lightness + '%)';
+      return 'rgb(' + r + ', ' + g + ', ' + b + ')';
     }
-    return 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha + ')';
+    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
   }
 
   if (type === exports.TYPES.COLOR) {

package/lib/parsers.test.js

@@ -0,0 +1,139 @@
+'use strict';
+
+const parsers = require('./parsers');
+
+describe('valueType', () => {
+  it('returns color for red', () => {
+    let input = 'red';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for #nnnnnn', () => {
+    let input = '#fefefe';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for rgb(n, n, n)', () => {
+    let input = 'rgb(10, 10, 10)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for rgb(p, p, p)', () => {
+    let input = 'rgb(10%, 10%, 10%)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for rgba(n, n, n, n)', () => {
+    let input = 'rgba(10, 10, 10, 1)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for rgba(n, n, n, n) with decimal alpha', () => {
+    let input = 'rgba(10, 10, 10, 0.5)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for rgba(p, p, p, n)', () => {
+    let input = 'rgba(10%, 10%, 10%, 1)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns color for rgba(p, p, p, n) with decimal alpha', () => {
+    let input = 'rgba(10%, 10%, 10%, 0.5)';
+    let output = parsers.valueType(input);
+
+    expect(output).toEqual(parsers.TYPES.COLOR);
+  });
+
+  it('returns length for 100ch', () => {
+    let input = '100ch';
+    let output = parsers.valueType(input);
+
+    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');
+});
+describe('parseNumber', () => {
+  it.todo('test');
+});
+describe('parseLength', () => {
+  it.todo('test');
+});
+describe('parsePercent', () => {
+  it.todo('test');
+});
+describe('parseMeasurement', () => {
+  it.todo('test');
+});
+describe('parseUrl', () => {
+  it.todo('test');
+});
+describe('parseString', () => {
+  it.todo('test');
+});
+describe('parseColor', () => {
+  it('should convert hsl to rgb values', () => {
+    let input = 'hsla(0, 1%, 2%)';
+    let output = parsers.parseColor(input);
+
+    expect(output).toEqual('rgb(5, 5, 5)');
+  });
+  it('should convert hsla to rgba values', () => {
+    let input = 'hsla(0, 1%, 2%, 0.5)';
+    let output = parsers.parseColor(input);
+
+    expect(output).toEqual('rgba(5, 5, 5, 0.5)');
+  });
+
+  it.todo('Add more tests');
+});
+describe('parseAngle', () => {
+  it.todo('test');
+});
+describe('parseKeyword', () => {
+  it.todo('test');
+});
+describe('dashedToCamelCase', () => {
+  it.todo('test');
+});
+describe('shorthandParser', () => {
+  it.todo('test');
+});
+describe('shorthandSetter', () => {
+  it.todo('test');
+});
+describe('shorthandGetter', () => {
+  it.todo('test');
+});
+describe('implicitSetter', () => {
+  it.todo('test');
+});
+describe('subImplicitSetter', () => {
+  it.todo('test');
+});
+describe('camelToDashed', () => {
+  it.todo('test');
+});

package/lib/properties/fontSize.js

@@ -2,6 +2,7 @@
 
 var TYPES = require('../parsers').TYPES;
 var valueType = require('../parsers').valueType;
+var parseMeasurement = require('../parsers').parseMeasurement;
 
 var absoluteSizes = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'];
 var relativeSizes = ['larger', 'smaller'];
@@ -16,9 +17,18 @@ module.exports.isValid = function(v) {
   );
 };
 
+function parse(v) {
+  const valueAsString = String(v).toLowerCase();
+  const optionalArguments = absoluteSizes.concat(relativeSizes);
+  const isOptionalArgument = optionalArguments.some(
+    stringValue => stringValue.toLowerCase() === valueAsString
+  );
+  return isOptionalArgument ? valueAsString : parseMeasurement(v);
+}
+
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('font-size', v);
+    this._setProperty('font-size', parse(v));
   },
   get: function() {
     return this.getPropertyValue('font-size');

package/lib/properties.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// autogenerated - 7/15/2019
+// autogenerated - 4/29/2020
 
 /*
  *
@@ -1040,9 +1040,16 @@ fontSize_export_isValid = function (v) {
   return type === external_dependency_parsers_0.TYPES.LENGTH || type === external_dependency_parsers_0.TYPES.PERCENT || type === external_dependency_parsers_0.TYPES.KEYWORD && fontSize_local_var_absoluteSizes.indexOf(v.toLowerCase()) !== -1 || type === external_dependency_parsers_0.TYPES.KEYWORD && fontSize_local_var_relativeSizes.indexOf(v.toLowerCase()) !== -1;
 };
 
+function fontSize_local_fn_parse(v) {
+  const valueAsString = String(v).toLowerCase();
+  const optionalArguments = fontSize_local_var_absoluteSizes.concat(fontSize_local_var_relativeSizes);
+  const isOptionalArgument = optionalArguments.some(stringValue => stringValue.toLowerCase() === valueAsString);
+  return isOptionalArgument ? valueAsString : external_dependency_parsers_0.parseMeasurement(v);
+}
+
 fontSize_export_definition = {
   set: function (v) {
-    this._setProperty('font-size', v);
+    this._setProperty('font-size', fontSize_local_fn_parse(v));
   },
   get: function () {
     return this.getPropertyValue('font-size');

package/lib/utils/colorSpace.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const hueToRgb = (t1, t2, hue) => {
+  if (hue < 0) hue += 6;
+  if (hue >= 6) hue -= 6;
+
+  if (hue < 1) return (t2 - t1) * hue + t1;
+  else if (hue < 3) return t2;
+  else if (hue < 4) return (t2 - t1) * (4 - hue) + t1;
+  else return t1;
+};
+
+// https://www.w3.org/TR/css-color-4/#hsl-to-rgb
+exports.hslToRgb = (hue, sat, light) => {
+  const t2 = light <= 0.5 ? light * (sat + 1) : light + sat - light * sat;
+  const t1 = light * 2 - t2;
+  const r = hueToRgb(t1, t2, hue + 2);
+  const g = hueToRgb(t1, t2, hue);
+  const b = hueToRgb(t1, t2, hue - 2);
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+};

package/package.json

@@ -6,13 +6,18 @@
     "CSSStyleDeclaration",
     "StyleSheet"
   ],
-  "version": "1.4.0",
-  "homepage": "https://github.com/jsakas/CSSStyleDeclaration",
+  "version": "2.3.0",
+  "homepage": "https://github.com/jsdom/cssstyle",
   "maintainers": [
     {
       "name": "Jon Sakas",
       "email": "jon.sakas@gmail.com",
       "url": "https://jon.sakas.co/"
+    },
+    {
+      "name": "Rafał Ruciński",
+      "email": "fatfisz@gmail.com",
+      "url": "https://fatfisz.com"
     }
   ],
   "contributors": [
@@ -20,45 +25,33 @@
       "name": "Chad Walker",
       "email": "chad@chad-cat-lore-eddie.com",
       "url": "https://github.com/chad3814"
-    },
-    {
-      "name": "Rafał Ruciński",
-      "email": "fatfisz@gmail.com",
-      "url": "https://fatfisz.com"
-    },
-    {
-      "name": "Nikita Vasilyev",
-      "email": "me@elv1s.ru"
-    },
-    {
-      "name": "Davide P. Cervone"
-    },
-    {
-      "name": "Forbes Lindesay"
     }
   ],
-  "repository": "jsakas/CSSStyleDeclaration",
-  "bugs": "https://github.com/jsakas/CSSStyleDeclaration/issues",
+  "repository": "jsdom/cssstyle",
+  "bugs": "https://github.com/jsdom/cssstyle/issues",
   "directories": {
     "lib": "./lib"
   },
+  "files": [
+    "lib/"
+  ],
   "main": "./lib/CSSStyleDeclaration.js",
   "dependencies": {
-    "cssom": "0.3.x"
+    "cssom": "~0.3.6"
   },
   "devDependencies": {
     "babel-generator": "~6.26.1",
     "babel-traverse": "~6.26.0",
     "babel-types": "~6.26.0",
     "babylon": "~6.18.0",
-    "eslint": "5.13.0",
-    "eslint-config-prettier": "4.0.0",
-    "eslint-plugin-prettier": "3.0.1",
-    "nodeunit": "~0.11.3",
+    "eslint": "~6.0.0",
+    "eslint-config-prettier": "~6.0.0",
+    "eslint-plugin-prettier": "~3.1.0",
+    "jest": "^24.8.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "1.16.4",
+    "prettier": "~1.18.0",
     "request": "^2.88.0",
-    "resolve": "~1.8.1"
+    "resolve": "~1.11.1"
   },
   "scripts": {
     "download": "node ./scripts/download_latest_properties.js && eslint lib/allProperties.js --fix",
@@ -67,9 +60,13 @@
     "generate:properties": "node ./scripts/generate_properties.js",
     "lint": "npm run generate && eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix --max-warnings 0",
-    "prepublishOnly": "npm run test-ci",
-    "test": "npm run generate && nodeunit tests",
-    "test-ci": "npm run lint && npm run test"
+    "prepublishOnly": "npm run lint && npm run test",
+    "test": "npm run generate && jest",
+    "test-ci": "npm run lint && npm run test && codecov",
+    "update-authors": "git log --format=\"%aN <%aE>\" | sort -f | uniq > AUTHORS"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "engines": {
+    "node": ">=8"
+  }
 }

package/.eslintignore

@@ -1,3 +0,0 @@
-node_modules
-lib/implementedProperties.js
-lib/properties.js

package/.eslintrc.js

@@ -1,50 +0,0 @@
-'use strict';
-
-module.exports = {
-  root: true,
-  extends: ['eslint:recommended', 'prettier'],
-  parserOptions: {
-    ecmaVersion: 2018,
-  },
-  env: {
-    es6: true,
-  },
-  globals: {
-    exports: true,
-    module: true,
-    require: true,
-    window: true,
-  },
-  plugins: ['prettier'],
-  rules: {
-    'prettier/prettier': [
-      'warn',
-      {
-        printWidth: 100,
-        singleQuote: true,
-        trailingComma: 'es5',
-      },
-    ],
-    strict: ['warn', 'global'],
-  },
-  overrides: [
-    {
-      files: ['lib/implementedProperties.js', 'lib/properties.js'],
-      rules: {
-        'prettier/prettier': 'off',
-      },
-    },
-    {
-      files: 'scripts/**/*',
-      rules: {
-        'no-console': 'off',
-      },
-    },
-    {
-      files: ['scripts/**/*', 'tests/**/*'],
-      env: {
-        node: true,
-      },
-    },
-  ],
-};