Security upgrades

node_modules/jss-plugin-camel-case/src/index.d.ts

@@ -0,0 +1,3 @@
+import {Plugin} from 'jss'
+
+export default function jssPluginSyntaxCamelCase(): Plugin

node_modules/jss-plugin-camel-case/src/index.js

@@ -0,0 +1,63 @@
+// @flow
+import type {Plugin} from 'jss'
+import hyphenate from 'hyphenate-style-name'
+
+/**
+ * Convert camel cased property names to dash separated.
+ *
+ * @param {Object} style
+ * @return {Object}
+ */
+function convertCase(style) {
+  const converted = {}
+
+  for (const prop in style) {
+    const key = prop.indexOf('--') === 0 ? prop : hyphenate(prop)
+
+    converted[key] = style[prop]
+  }
+
+  if (style.fallbacks) {
+    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase)
+    else converted.fallbacks = convertCase(style.fallbacks)
+  }
+
+  return converted
+}
+
+/**
+ * Allow camel cased property names by converting them back to dasherized.
+ *
+ * @param {Rule} rule
+ */
+export default function camelCase(): Plugin {
+  function onProcessStyle(style) {
+    if (Array.isArray(style)) {
+      // Handle rules like @font-face, which can have multiple styles in an array
+      for (let index = 0; index < style.length; index++) {
+        style[index] = convertCase(style[index])
+      }
+      return style
+    }
+
+    return convertCase(style)
+  }
+
+  function onChangeValue(value, prop, rule) {
+    if (prop.indexOf('--') === 0) {
+      return value
+    }
+
+    const hyphenatedProp = hyphenate(prop)
+
+    // There was no camel case in place
+    if (prop === hyphenatedProp) return value
+
+    rule.prop(hyphenatedProp, value)
+
+    // Core will ignore that property value we set the proper one above.
+    return null
+  }
+
+  return {onProcessStyle, onChangeValue}
+}

node_modules/jss-plugin-camel-case/src/index.test.js

@@ -0,0 +1,208 @@
+import expect from 'expect.js'
+import {stripIndent} from 'common-tags'
+import {create} from 'jss'
+import functionPlugin from 'jss-plugin-rule-value-function'
+
+import camelCase from './index'
+
+const settings = {
+  createGenerateId: () => rule => `${rule.key}-id`
+}
+
+describe('jss-plugin-camel-case', () => {
+  let jss
+
+  beforeEach(() => {
+    jss = create(settings).use(camelCase())
+  })
+
+  describe('regular rule', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        a: {
+          fontSize: '20px',
+          zIndex: 1,
+          lineHeight: 1.2
+        }
+      })
+    })
+
+    it('should generate correct CSS', () => {
+      expect(sheet.toString()).to.be(
+        '.a-id {\n  font-size: 20px;\n  z-index: 1;\n  line-height: 1.2;\n}'
+      )
+    })
+  })
+
+  describe('@font-face with array of styles', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        '@font-face': [
+          {
+            fontFamily: 'Lato-Light',
+            src: 'url("/fonts/Lato-Light.ttf") format("truetype")'
+          },
+          {
+            fontFamily: 'Lato-Bold',
+            src: 'url("/fonts/Lato-Bold.ttf") format("truetype")'
+          }
+        ]
+      })
+    })
+
+    it('should generate correct CSS', () => {
+      expect(sheet.toString()).to.be(
+        '@font-face {\n' +
+          '  font-family: Lato-Light;\n' +
+          '  src: url("/fonts/Lato-Light.ttf") format("truetype");\n' +
+          '}\n' +
+          '@font-face {\n' +
+          '  font-family: Lato-Bold;\n' +
+          '  src: url("/fonts/Lato-Bold.ttf") format("truetype");\n' +
+          '}'
+      )
+    })
+  })
+
+  describe('fallbacks object', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        '@font-face': {
+          fontFamily: 'MyWebFont',
+          fallbacks: {
+            fontFamily: 'MyWebFontFallback'
+          }
+        }
+      })
+    })
+
+    it('should generate correct CSS', () => {
+      expect(sheet.toString()).to.be(
+        '@font-face {\n' +
+          '  font-family: MyWebFontFallback;\n' +
+          '  font-family: MyWebFont;\n' +
+          '}'
+      )
+    })
+  })
+
+  describe('fallbacks array', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        '@font-face': {
+          fontFamily: 'MyWebFont',
+          fallbacks: [{fontFamily: 'MyWebFontFallback'}]
+        }
+      })
+    })
+
+    it('should generate correct CSS', () => {
+      expect(sheet.toString()).to.be(
+        '@font-face {\n' +
+          '  font-family: MyWebFontFallback;\n' +
+          '  font-family: MyWebFont;\n' +
+          '}'
+      )
+    })
+  })
+
+  describe('font faces with fallbacks', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        '@font-face': [
+          {
+            fontFamily: 'MyWebFont',
+            fallbacks: {
+              fontFamily: 'MyWebFontFallback'
+            }
+          }
+        ]
+      })
+    })
+
+    it('should generate correct CSS', () => {
+      expect(sheet.toString()).to.be(
+        '@font-face {\n' +
+          '  font-family: MyWebFontFallback;\n' +
+          '  font-family: MyWebFont;\n' +
+          '}'
+      )
+    })
+  })
+
+  describe('function values', () => {
+    let sheet
+
+    beforeEach(() => {
+      const localJss = create(settings).use(functionPlugin(), camelCase())
+      sheet = localJss.createStyleSheet({
+        a: {
+          fontSize: () => 12
+        }
+      })
+    })
+
+    it('should generate correct CSS', () => {
+      sheet.update()
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          font-size: 12;
+        }
+      `)
+    })
+  })
+
+  describe('css variables', () => {
+    let localJss
+    beforeEach(() => {
+      localJss = create(settings).use(functionPlugin(), camelCase())
+    })
+
+    it('with static css variable', () => {
+      const sheet = localJss.createStyleSheet({
+        a: {
+          '--fontSize': 12
+        }
+      })
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 12;
+        }
+      `)
+    })
+
+    it('with dynamic css variable', () => {
+      const sheet = localJss.createStyleSheet({
+        a: {
+          '--fontSize': size => size
+        }
+      })
+
+      sheet.update(12)
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 12;
+        }
+      `)
+
+      sheet.update(16)
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 16;
+        }
+      `)
+    })
+  })
+})