prettier

cssinjs · Sep 18, 2021 · aa7074b · aa7074b
1 parent 8e13468
commit aa7074b
Show file tree

Hide file tree

Showing 87 changed files with 286 additions and 334 deletions.
diff --git a/docs/csp.md b/docs/csp.md
@@ -59,10 +59,10 @@ To communicate the nonce value to JSS, we're going use some basic templating wit
 1.  First, create the template HTML file.
 
     ```html
-      <head>
-        <meta property="csp-nonce" content="{{ styleNonce }}">
-      </head>
-      ...
+    <head>
+      <meta property="csp-nonce" content="{{ styleNonce }}" />
+    </head>
+    ...
     ```
 
 1.  Now update the server to render the template with the `styleNonce` variable to be interpolated with the nonce generated from our middleware `res.locals.styleNonce`.

diff --git a/docs/intro.md b/docs/intro.md
@@ -56,9 +56,7 @@ const styles = {
   ctaButton: {
     extend: 'button',
     '&:hover': {
-      background: color('blue')
-        .darken(0.3)
-        .hex()
+      background: color('blue').darken(0.3).hex()
     }
   },
   '@media (min-width: 1024px)': {

diff --git a/docs/jss-api.md b/docs/jss-api.md
@@ -191,8 +191,7 @@ const sheet2 = jss.createStyleSheet({}, {index: 1, meta: 'sheet-2'}).attach()
 ```
 
 ```html
-<style data-meta="sheet-2"></style>
-<style data-meta="sheet-1"></style>
+<style data-meta="sheet-2"></style> <style data-meta="sheet-1"></style>
 ```
 
 ## Add a rule to an existing Style Sheet
@@ -274,11 +273,11 @@ import jss from 'jss'
 const styles = {
   container: {
     height: 200,
-    width: data => data.width
+    width: (data) => data.width
   },
   button: {
-    color: data => data.button.color,
-    padding: data => data.button.padding
+    color: (data) => data.button.color,
+    padding: (data) => data.button.padding
   }
 }
 
@@ -452,7 +451,7 @@ import {getDynamicStyles} from 'jss'
 const dynamicStyles = getDynamicStyles({
   button: {
     fontSize: 12,
-    color: data => data.color
+    color: (data) => data.color
   }
 })
 

diff --git a/docs/jss-plugin-compose.md b/docs/jss-plugin-compose.md
@@ -127,8 +127,12 @@ const button2 = (
 It renders to:
 
 ```html
-<button class="buttonActiveDisabled-123456 buttonActive-123456 button-123456">Active Disabled Button</button>
-<button class="buttonDisabled-123456 button-123456 active-123456 disabled-123456">Disabled Button with active state</button>
+<button class="buttonActiveDisabled-123456 buttonActive-123456 button-123456">
+  Active Disabled Button
+</button>
+<button class="buttonDisabled-123456 button-123456 active-123456 disabled-123456">
+  Disabled Button with active state
+</button>
 ```
 
 ### Mix global and local classes.

diff --git a/docs/jss-plugin-default-unit.md b/docs/jss-plugin-default-unit.md
@@ -33,7 +33,7 @@ import defaultUnit from 'jss-plugin-default-unit'
 const options = {
   'line-height': 'rem',
   'font-size': 'rem',
-  width: val => `${val / 2}px`
+  width: (val) => `${val / 2}px`
 }
 
 jss.use(defaultUnit(options))

diff --git a/docs/jss-plugin-expand.md b/docs/jss-plugin-expand.md
@@ -47,7 +47,10 @@ compiles to
 ```javascript
 const styles = {
   container: {
-    transition: [['opacity', '200ms'], ['width', '300ms']]
+    transition: [
+      ['opacity', '200ms'],
+      ['width', '300ms']
+    ]
   }
 }
 ```

diff --git a/docs/jss-plugin-extend.md b/docs/jss-plugin-extend.md
@@ -69,7 +69,7 @@ Nested `extend` inside of the function is not supported. Will override other pro
 ```javascript
 const styles = {
   button: {
-    extend: data => ({
+    extend: (data) => ({
       color: data.theme.color
     }),
     fontSize: '20px'

diff --git a/docs/jss-plugin-rule-value-function.md b/docs/jss-plugin-rule-value-function.md
@@ -11,7 +11,7 @@ _Plugins are applied by default to function rules or values._
 ```javascript
 const styles = {
   button: {
-    color: data => data.color
+    color: (data) => data.color
   }
 }
 ```
@@ -28,7 +28,7 @@ Similar to function values, you can use a function to return a dynamic style obj
 
 ```javascript
 const styles = {
-  button: data => ({
+  button: (data) => ({
     display: 'flex',
     color: data.color
   })
@@ -44,7 +44,7 @@ To use the `!important` modifier with function values, you must use [array synta
 ```javascript
 const styles = {
   button: {
-    color: data => [[data.color], '!important']
+    color: (data) => [[data.color], '!important']
   }
 }
 ```

diff --git a/docs/jss-plugin-rule-value-observable.md b/docs/jss-plugin-rule-value-observable.md
@@ -11,7 +11,7 @@ import {Observable} from 'rxjs'
 
 const styles = {
   button: {
-    color: new Observable(observer => {
+    color: new Observable((observer) => {
       observer.next('red')
     })
   }
@@ -32,7 +32,7 @@ Similar to observable values, you can declare "observable" rules. A stream shoul
 import {Observable} from 'rxjs'
 
 const styles = {
-  button: new Observable(observer => {
+  button: new Observable((observer) => {
     observer.next({
       color: 'red',
       opacity: 1

diff --git a/docs/jss-syntax.md b/docs/jss-syntax.md
@@ -347,9 +347,7 @@ import color from 'color'
 
 const styles = {
   button: {
-    color: color('blue')
-      .darken(0.3)
-      .hex()
+    color: color('blue').darken(0.3).hex()
   }
 }
 ```

diff --git a/docs/plugins.md b/docs/plugins.md
@@ -76,7 +76,7 @@ You need to register a `plugin` only once per JSS instance. There are some hooks
     import jss from 'jss'
 
     jss.use({
-      onProcessSheet: sheet => {
+      onProcessSheet: (sheet) => {
         // Do something here.
       }
     })

diff --git a/docs/react-jss-hoc.md b/docs/react-jss-hoc.md
@@ -68,9 +68,7 @@ The above code will compile to
 ```html
 <div id="root">
   <button class="Button-myButton-1-25">
-    <span class="Button-myLabel-1-26">
-      Submit
-    </span>
+    <span class="Button-myLabel-1-26"> Submit </span>
   </button>
 </div>
 ```
@@ -109,7 +107,7 @@ const Button = ({classes, children, theme}) => (
   </button>
 )
 
-const styles = theme => ({
+const styles = (theme) => ({
   button: {
     background: theme.colorPrimary
   },
@@ -156,7 +154,7 @@ const StyledComponent = withStyles({})(InnerComponent)
 
 const App = (
   <StyledComponent
-    ref={ref => {
+    ref={(ref) => {
       console.log(ref)
     }}
   />

diff --git a/docs/react-jss-ts.md b/docs/react-jss-ts.md
@@ -67,7 +67,7 @@ const useStyles = createUseStyles((theme: CustomTheme) => ({
   myButton: {
     padding: (props: ButtonProps) => props.spacing || 10
   },
-  myLabel: props => ({
+  myLabel: (props) => ({
     display: 'block',
     color: props.labelColor || 'red',
     fontWeight: props.fontWeight || 'bold',
@@ -87,7 +87,7 @@ const useStyles = createUseStyles({
     backgroundColor: theme.background || 'gray'
   }),
   myButton: {
-    padding: props => props.spacing || 10
+    padding: (props) => props.spacing || 10
   }
 })
 ```

diff --git a/docs/react-jss.md b/docs/react-jss.md
@@ -88,9 +88,7 @@ The above code will compile to
 ```html
 <div id="root">
   <button class="Button-myButton-1-25">
-    <span class="Button-myLabel-1-26">
-      Submit
-    </span>
+    <span class="Button-myLabel-1-26"> Submit </span>
   </button>
 </div>
 ```
@@ -124,9 +122,9 @@ import {createUseStyles} from 'react-jss'
 
 const useStyles = createUseStyles({
   myButton: {
-    padding: props => props.spacing
+    padding: (props) => props.spacing
   },
-  myLabel: props => ({
+  myLabel: (props) => ({
     display: 'block',
     color: props.labelColor,
     fontWeight: props.fontWeight,
@@ -157,9 +155,7 @@ The above code will compile to
 ```html
 <div id="root">
   <button class="myButton-1-25">
-    <span class="myLabel-1-26">
-      Submit
-    </span>
+    <span class="myLabel-1-26"> Submit </span>
   </button>
 </div>
 ```
@@ -187,9 +183,9 @@ import {createUseStyles} from 'react-jss'
 const useStyles = createUseStyles(
   {
     myButton: {
-      padding: props => props.spacing
+      padding: (props) => props.spacing
     },
-    myLabel: props => ({
+    myLabel: (props) => ({
       display: 'block',
       color: props.labelColor,
       fontWeight: props.fontWeight,
@@ -222,9 +218,7 @@ The above code will compile to
 ```html
 <div id="root">
   <button class="Button-myButton-1-25">
-    <span class="Button-myLabel-1-26">
-      Submit
-    </span>
+    <span class="Button-myLabel-1-26"> Submit </span>
   </button>
 </div>
 ```
@@ -264,7 +258,7 @@ import {createUseStyles, useTheme, ThemeProvider} from 'react-jss'
 
 // Using `theme` function is better when you have many theme dependant styles.
 // Note that in this case you don't need to use useTheme(), it subscribes to the them automatically
-const useStylesFromThemeFunction = createUseStyles(theme => ({
+const useStylesFromThemeFunction = createUseStyles((theme) => ({
   button: {
     background: theme.colorPrimary
   },

diff --git a/karma.conf.js b/karma.conf.js
@@ -10,7 +10,7 @@ const travisBuildNumber = process.env.TRAVIS_BUILD_NUMBER
 const travisBuildId = process.env.TRAVIS_BUILD_ID
 const travisJobNumber = process.env.TRAVIS_JOB_NUMBER
 
-module.exports = config => {
+module.exports = (config) => {
   config.set({
     customLaunchers: browsers,
     browsers: ['Chrome'],

diff --git a/packages/jss-plugin-camel-case/src/index.test.js b/packages/jss-plugin-camel-case/src/index.test.js
@@ -6,7 +6,7 @@ import functionPlugin from 'jss-plugin-rule-value-function'
 import camelCase from './index'
 
 const settings = {
-  createGenerateId: () => rule => `${rule.key}-id`
+  createGenerateId: () => (rule) => `${rule.key}-id`
 }
 
 describe('jss-plugin-camel-case', () => {
@@ -184,7 +184,7 @@ describe('jss-plugin-camel-case', () => {
     it('with dynamic css variable', () => {
       const sheet = localJss.createStyleSheet({
         a: {
-          '--fontSize': size => size
+          '--fontSize': (size) => size
         }
       })
 

diff --git a/packages/jss-plugin-compose/src/index.test.js b/packages/jss-plugin-compose/src/index.test.js
@@ -5,7 +5,7 @@ import {create} from 'jss'
 import sinon from 'sinon'
 import compose from '.'
 
-const settings = {createGenerateId: () => rule => `${rule.key}-id`}
+const settings = {createGenerateId: () => (rule) => `${rule.key}-id`}
 
 describe('jss-plugin-compose', () => {
   let jss

diff --git a/packages/jss-plugin-default-unit/src/index.js b/packages/jss-plugin-default-unit/src/index.js
@@ -5,7 +5,7 @@ import defaultUnits, {px} from './defaultUnits'
  */
 function addCamelCasedVersion(obj) {
   const regExp = /(-[a-z])/g
-  const replace = str => str[1].toUpperCase()
+  const replace = (str) => str[1].toUpperCase()
   const newObj = {}
   for (const key in obj) {
     newObj[key] = obj[key]

diff --git a/packages/jss-plugin-default-unit/src/index.test.js b/packages/jss-plugin-default-unit/src/index.test.js
@@ -9,14 +9,16 @@ import functionPlugin from 'jss-plugin-rule-value-function'
 import defaultUnit from './index'
 
 const settings = {
-  createGenerateId: () => rule => `${rule.key}-id`
+  createGenerateId: () => (rule) => `${rule.key}-id`
 }
 
 describe('jss-plugin-default-unit', () => {
   let jss
 
   beforeEach(() => {
-    jss = create(settings).use(defaultUnit({'min-width': 'pc', 'max-width': val => `${val / 2}px`}))
+    jss = create(settings).use(
+      defaultUnit({'min-width': 'pc', 'max-width': (val) => `${val / 2}px`})
+    )
   })
 
   describe('unitless values', () => {
@@ -425,7 +427,7 @@ describe('jss-plugin-default-unit', () => {
 
       sheet = jss.createStyleSheet({
         a: {
-          width: new Observable(observer => {
+          width: new Observable((observer) => {
             observer.next(1)
           })
         }

diff --git a/packages/jss-plugin-expand/src/index.js b/packages/jss-plugin-expand/src/index.js
@@ -10,7 +10,7 @@ import {propArray, propArrayInObj, propObj, customPropObj} from './props'
  * @return {String} mapped values
  */
 function mapValuesByProp(value, prop, rule) {
-  return value.map(item => objectToArray(item, prop, rule, false, true))
+  return value.map((item) => objectToArray(item, prop, rule, false, true))
 }
 
 /**

diff --git a/packages/jss-plugin-expand/src/index.test.js b/packages/jss-plugin-expand/src/index.test.js
@@ -6,7 +6,7 @@ import observablePlugin from 'jss-plugin-rule-value-observable'
 import expand from '.'
 
 const settings = {
-  createGenerateId: () => rule => `${rule.key}-id`
+  createGenerateId: () => (rule) => `${rule.key}-id`
 }
 
 describe('jss-plugin-expand', () => {
@@ -50,7 +50,10 @@ describe('jss-plugin-expand', () => {
     beforeEach(() => {
       sheet = jss.createStyleSheet({
         a: {
-          transition: [['opacity', 1, 'linear'], ['transform', 300, 'ease']]
+          transition: [
+            ['opacity', 1, 'linear'],
+            ['transform', 300, 'ease']
+          ]
         }
       })
     })
@@ -381,7 +384,7 @@ describe('jss-plugin-expand', () => {
 
       sheet = jss.createStyleSheet({
         a: {
-          width: new Observable(observer => {
+          width: new Observable((observer) => {
             observer.next(1)
           })
         }