chore: format

tw-in-js · Dec 8, 2020 · f3f48aa · f3f48aa
1 parent 6314c56
commit f3f48aa
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 116 deletions.
diff --git a/README.md b/README.md
@@ -24,31 +24,15 @@ We aim to create a place for likeminded people to talk about problems and possib
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-- [tw-in-js](#tw-in-js)
-  - [Rational](#rational)
-  - [Challenges](#challenges)
-  - [Opportunities](#opportunities)
-  - [Inspiration](#inspiration)
-  - [Basic Usage](#basic-usage)
-  - [Customization](#customization)
-    - [Preflight](#preflight)
-    - [Strict](#strict)
-    - [Hash](#hash)
-    - [Theme](#theme)
-    - [Plugins](#plugins)
-  - [Advanced Usage](#advanced-usage)
-    - [Function Signature](#function-signature)
-      - [Template Literal](#template-literal)
-      - [Strings](#strings)
-      - [Objects](#objects)
-      - [Arrays](#arrays)
-      - [Mixture](#mixture)
-    - [Grouping](#grouping)
-      - [Variant Grouping](#variant-grouping)
-      - [Directive Grouping](#directive-grouping)
-  - [Contribute](#contribute)
-    - [Develop](#develop)
-  - [License](#license)
+- [Rational](#rational)
+- [Challenges](#challenges)
+- [Opportunities](#opportunities)
+- [Inspiration](#inspiration)
+- [Basic Usage](#basic-usage)
+- [Customization](#customization)
+- [Advanced Usage](#advanced-usage)
+- [Contribute](#contribute)
+- [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->
@@ -109,13 +93,13 @@ Despite the module being very flexible and powerful, it is the intention to keep
 Getting started with the library requires no configuration, setup (or even installation if you use unpkg):
 
 ```js
-import { tw } from 'tw-in-js';
+import { tw } from 'tw-in-js'
 
 document.body.innerHTML = `
   <main class=${tw('bg-black text-white')}>
     <h1 class=${tw('text-xl')}>This is Tailwind in JS!</h1>
   </main>
-`;
+`
 ```
 
 Using the `tw` function exported by the module without any configuration results in the compilation of the rules `bg-black text-white` and `text-xl` in exactly as specified in the Tailwind documentation. It is possible to modilfy the behaviour of the compiler by providing a custom theme file but when none is passed then the default Tailwind theme is used.
@@ -127,15 +111,15 @@ Calling the `tw` function results in the passed rules to be interpretted, normal
 Understadably developers will more often than not, want to customize the out of the box experience. It is possible to do this with the exported `setup` function. Doing this will ultimately change the behaviour of calling the `tw` function, making it appropriate for your particular use case.
 
 ```js
-import { setup } from 'tw-in-js';
+import { setup } from 'tw-in-js'
 
 setup({
   preflight: true, // include base style reset
   strict: false, // throw errors for invalid rules
   hash: false, // hash all generated class names
   theme: {}, // define custom theme values
   plugins: {}, // define new grammars for the compiler
-});
+})
 ```
 
 The setup functions is a named export of the main module and accepts an config object as an argument.
@@ -170,7 +154,7 @@ Applying a new theme or extending the default is probably the most common custom
 Here is an example of overriding and extending values in the theme:
 
 ```js
-import { setup } from 'tw-in-js';
+import { setup } from 'tw-in-js'
 
 setup({
   theme: {
@@ -185,7 +169,7 @@ setup({
       },
     },
   },
-});
+})
 ```
 
 ### Plugins
@@ -195,13 +179,13 @@ A more advanced customization is to provide plugins in the form of named functio
 For example adding the support for the [scroll-snap](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) property:
 
 ```js
-import { setup } from 'tw-in-js';
+import { setup } from 'tw-in-js'
 
 setup({
   plugins: {
     'scroll-snap': (parts) => ({ 'scroll-snap-type': parts[1] }),
   },
-});
+})
 ```
 
 The above plugin would cover cases like `scroll-snap-none` and returning the appropriate CSS. Plugin functions are called upon when a built in translation function for a given directive can't be found.
@@ -224,37 +208,37 @@ It is possible to invoke the `tw` function in a multitude of different ways. It
 #### Template Literal
 
 ```js
-bw`bg-gray-200 rounded`;
+bw`bg-gray-200 rounded`
 //=> bg-gray-200 rounded
-bw`bg-gray-200 ${false && 'rounded'}`;
+bw`bg-gray-200 ${false && 'rounded'}`
 //=> bg-gray-200
-bw`bg-gray-200 ${[false && 'rounded', 'block']}`;
+bw`bg-gray-200 ${[false && 'rounded', 'block']}`
 //=> bg-gray-200 block
-bw`bg-gray-200 ${{ rounded: false, underline: isTrue() }}`;
+bw`bg-gray-200 ${{ rounded: false, underline: isTrue() }}`
 //=> bg-gray-200 underline
 ```
 
 #### Strings
 
 ```js
-bw('bg-gray-200', true && 'rounded', 'underline');
+bw('bg-gray-200', true && 'rounded', 'underline')
 //=> bg-gray-200 rounded underline
 ```
 
 #### Objects
 
 ```js
-bw({ 'bg-gray-200': true, rounded: false, underline: isTrue() });
+bw({ 'bg-gray-200': true, rounded: false, underline: isTrue() })
 //=> bg-gray-200 underline
-bw({ 'bg-gray-200': true }, { rounded: false }, null, { underline: true });
+bw({ 'bg-gray-200': true }, { rounded: false }, null, { underline: true })
 //=> bg-gray-200 underline
 ```
 
 #### Arrays
 
 ```js
-bw(['bg-gray-200', 0, false, 'rounded']); //=> bg-gray-200 rounded
-bw(['bg-gray-200'], ['', 0, false, 'rounded'], [['underline']]); //=> bg-gray-200 rounded underline
+bw(['bg-gray-200', 0, false, 'rounded']) //=> bg-gray-200 rounded
+bw(['bg-gray-200'], ['', 0, false, 'rounded'], [['underline']]) //=> bg-gray-200 rounded underline
 ```
 
 #### Mixture
@@ -264,7 +248,7 @@ bw('bg-gray-200', [
   1 && 'rounded',
   { underline: false, 'text-black': null },
   ['text-lg', ['shadow-lg']],
-]); //=> bg-gray-200 rounded text-lg shadow-lg
+]) //=> bg-gray-200 rounded text-lg shadow-lg
 ```
 
 ### Grouping
@@ -280,7 +264,7 @@ Directives with the same variants can be grouped using parenthesis. The `tw` fun
 > Notice that directives within tagged template literals can span multiple lines
 
 ```js
-tw`sm:(bg-black text-white)`;
+tw`sm:(bg-black text-white)`
 //=> sm:bg-black sm:text-white
 ```
 
@@ -293,7 +277,7 @@ tw`
     text-white
     hover:(bg-white text-black)
   )
-`;
+`
 //=> sm:bg-black sm:text-white sm:hover:bg-white sm:hover:text-black
 ```
 
@@ -306,7 +290,7 @@ bw({
     'text-white': true,
     hover: 'bg-white text-black',
   },
-});
+})
 // => sm:bg-black sm:text-white sm:hover:bg-white sm:hover:text-black
 ```
 

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -15,12 +15,11 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 
-- [@tw-in-js/types](#tw-in-jstypes)
-  - [Installation](#installation)
-  - [Usage](#usage)
-  - [Polyfills](#polyfills)
-  - [Contribute](#contribute)
-  - [License](#license)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Polyfills](#polyfills)
+- [Contribute](#contribute)
+- [License](#license)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->

diff --git a/packages/core/src/__tests__/api.json b/packages/core/src/__tests__/api.json
@@ -623,15 +623,13 @@
     ]
   ],
   "divide-dashed": ".divide-dashed>:not([hidden])~:not([hidden]){border-style:dashed}",
-  "divide-transparent":
-    ".divide-transparent>:not([hidden])~:not([hidden]){border-color:transparent}"
-  ,
+  "divide-transparent": ".divide-transparent>:not([hidden])~:not([hidden]){border-color:transparent}",
   "divide-opacity-95": ".divide-opacity-95>:not([hidden])~:not([hidden]){--tw-divide-opacity:0.95}",
   "first:font-bold": ".first\\:font-bold:first-child{font-weight:700}",
   "last:font-bold": ".last\\:font-bold:last-child{font-weight:700}",
   "odd:font-bold": ".odd\\:font-bold:nth-child(odd){font-weight:700}",
   "even:font-bold": ".even\\:font-bold:nth-child(2n){font-weight:700}",
-  "transform-none": ".transform-none{transform:none}" ,
+  "transform-none": ".transform-none{transform:none}",
   "transform-gpu": ".transform-gpu{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate3d(var(--tw-translate-x,0),var(--tw-translate-y,0),0) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}",
   "transform": ".transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))}",
   "rotate(-3 hover:6 md:(3 hover:-6))": [

diff --git a/packages/core/src/__tests__/hash.test.ts b/packages/core/src/__tests__/hash.test.ts
@@ -20,63 +20,63 @@ beforeEach(() => {
 
 test('class names are hashed', () => {
   expect(instance.tw('group flex pt-4 text-center')).toBe(
-    'tw-1bk5mm5 tw-1r10iar tw-1rt79r9 tw-1utukjz',
+    'tw-1bk5mm5 tw-1sv1rgs tw-ocaj78 tw-5693iz',
   )
   expect(injector.target).toStrictEqual([
-    '.tw-1r10iar{display:flex}',
-    '.tw-1rt79r9{padding-top:1rem}',
-    '.tw-1utukjz{text-align:center}',
+    '.tw-1sv1rgs{display:flex}',
+    '.tw-ocaj78{padding-top:1rem}',
+    '.tw-5693iz{text-align:center}',
   ])
 })
 
 test('keyframes are hashed', () => {
-  expect(instance.tw('animate-pulse')).toBe('tw-43z9rb')
+  expect(instance.tw('animate-pulse')).toBe('tw-15o2im6')
   expect(injector.target).toStrictEqual([
-    '.tw-43z9rb{animation:tw-sktrkv 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}',
+    '.tw-15o2im6{animation:tw-sktrkv 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}',
     '@keyframes tw-sktrkv{0%,100%{opacity:1}50%{opacity:.5}}',
   ])
 })
 
 test('same declarations are inserted only once', () => {
-  expect(instance.tw('border-x border-lr')).toBe('tw-1w9zs13 tw-1w9zs13')
+  expect(instance.tw('border-x border-lr')).toBe('tw-1kfasqk tw-1kfasqk')
   expect(injector.target).toStrictEqual([
-    ".tw-1w9zs13{border-left-width:1px;border-right-width:1px}",
+    '.tw-1kfasqk{border-left-width:1px;border-right-width:1px}',
   ])
 })
 
 test('same color is inserted only once', () => {
-  expect(instance.tw('text-primary text-#0d3880')).toBe('tw-6mocys tw-6mocys')
+  expect(instance.tw('text-primary text-#0d3880')).toBe('tw-1hgnj9x tw-1hgnj9x')
   expect(injector.target).toStrictEqual([
-    ".tw-6mocys{--tw-dxr4o8:1;color:#0d3880;color:rgba(13,56,128,var(--tw-dxr4o8))}",
+    '.tw-1hgnj9x{--tw-dxr4o8:1;color:#0d3880;color:rgba(13,56,128,var(--tw-dxr4o8))}',
   ])
 })
 
 test('transform', () => {
-  expect(instance.tw('transform')).toBe('tw-dq648b')
+  expect(instance.tw('transform')).toBe('tw-1ojy65l')
   expect(injector.target).toStrictEqual([
-    '.tw-dq648b{--tw-1e4pbj4:0;--tw-142admc:0;--tw-9ouawy:0;--tw-wnlb2r:0;--tw-o4ir2d:0;--tw-vkgkf8:1;--tw-1lff04g:1;transform:translateX(var(--tw-1e4pbj4,0)) translateY(var(--tw-142admc,0)) rotate(var(--tw-9ouawy,0)) skewX(var(--tw-wnlb2r,0)) skewY(var(--tw-o4ir2d,0)) scaleX(var(--tw-vkgkf8,1)) scaleY(var(--tw-1lff04g,1))}',
+    '.tw-1ojy65l{--tw-1e4pbj4:0;--tw-142admc:0;--tw-9ouawy:0;--tw-wnlb2r:0;--tw-o4ir2d:0;--tw-vkgkf8:1;--tw-1lff04g:1;transform:translateX(var(--tw-1e4pbj4,0)) translateY(var(--tw-142admc,0)) rotate(var(--tw-9ouawy,0)) skewX(var(--tw-wnlb2r,0)) skewY(var(--tw-o4ir2d,0)) scaleX(var(--tw-vkgkf8,1)) scaleY(var(--tw-1lff04g,1))}',
   ])
 })
 
 test('scale', () => {
-  expect(instance.tw('scale-90')).toBe('tw-bgi9pa')
+  expect(instance.tw('scale-90')).toBe('tw-m8swvl')
   expect(injector.target).toStrictEqual([
-    '.tw-bgi9pa{--tw-vkgkf8:0.9;--tw-1lff04g:0.9;transform:scale(0.9);transform:translateX(var(--tw-1e4pbj4,0)) translateY(var(--tw-142admc,0)) rotate(var(--tw-9ouawy,0)) skewX(var(--tw-wnlb2r,0)) skewY(var(--tw-o4ir2d,0)) scaleX(var(--tw-vkgkf8,1)) scaleY(var(--tw-1lff04g,1))}',
+    '.tw-m8swvl{--tw-vkgkf8:0.9;--tw-1lff04g:0.9;transform:scale(0.9);transform:translateX(var(--tw-1e4pbj4,0)) translateY(var(--tw-142admc,0)) rotate(var(--tw-9ouawy,0)) skewX(var(--tw-wnlb2r,0)) skewY(var(--tw-o4ir2d,0)) scaleX(var(--tw-vkgkf8,1)) scaleY(var(--tw-1lff04g,1))}',
   ])
 })
 
 test('bg-gradient-to-r from-purple-500', () => {
-  expect(instance.tw('bg-gradient-to-r from-purple-500')).toBe('tw-t84a8t tw-1a214wf')
+  expect(instance.tw('bg-gradient-to-r from-purple-500')).toBe('tw-8lrugz tw-1unz9xc')
   expect(injector.target).toStrictEqual([
-    '.tw-1a214wf{--tw-sc6ze8:#8b5cf6}',
-    '.tw-t84a8t{background-image:linear-gradient(to right,var(--tw-wt1r4o,var(--tw-sc6ze8,transparent),var(--tw-1h61fts,transparent)))}',
+    '.tw-1unz9xc{--tw-sc6ze8:#8b5cf6}',
+    '.tw-8lrugz{background-image:linear-gradient(to right,var(--tw-wt1r4o,var(--tw-sc6ze8,transparent),var(--tw-1h61fts,transparent)))}',
   ])
 })
 
 test('different variant produce different hashes', () => {
-  expect(instance.tw('sm:text-center lg:text-center')).toBe('tw-1fk5v02 tw-t512mk')
+  expect(instance.tw('sm:text-center lg:text-center')).toBe('tw-zqeog8 tw-ymouy7')
   expect(injector.target).toStrictEqual([
-    '@media (min-width: 640px){.tw-1fk5v02{text-align:center}}',
-    '@media (min-width: 1024px){.tw-t512mk{text-align:center}}',
+    '@media (min-width: 640px){.tw-zqeog8{text-align:center}}',
+    '@media (min-width: 1024px){.tw-ymouy7{text-align:center}}',
   ])
 })
diff --git a/packages/core/src/__tests__/legacy.test.ts b/packages/core/src/__tests__/legacy.test.ts
@@ -15,11 +15,11 @@ beforeEach(async () => {
 
 test('class names are hashed', () => {
   expect(instance.tw('group flex pt-4 text-center')).toBe(
-    'tw-1bk5mm5 tw-1r10iar tw-1rt79r9 tw-1utukjz',
+    'tw-1bk5mm5 tw-1sv1rgs tw-ocaj78 tw-5693iz',
   )
   expect(injector.target).toStrictEqual([
-    '.tw-1r10iar{display:flex}',
-    '.tw-1rt79r9{padding-top:1rem}',
-    '.tw-1utukjz{text-align:center}',
+    '.tw-1sv1rgs{display:flex}',
+    '.tw-ocaj78{padding-top:1rem}',
+    '.tw-5693iz{text-align:center}',
   ])
 })
diff --git a/packages/core/src/__tests__/mode.test.ts b/packages/core/src/__tests__/mode.test.ts
@@ -15,11 +15,15 @@ test('mode warn (default)', () => {
 
     expect(tw('rounded-t-xxx')).toBe('rounded-t-xxx')
     expect(console.warn).toHaveBeenCalledTimes(2)
-    expect(console.warn).toHaveBeenLastCalledWith(`UNKNOWN_THEME_VALUE: {"id":"UNKNOWN_THEME_VALUE","section":"borderRadius","keypath":["t","xxx"]}`)
+    expect(console.warn).toHaveBeenLastCalledWith(
+      `UNKNOWN_THEME_VALUE: {"id":"UNKNOWN_THEME_VALUE","section":"borderRadius","keypath":["t","xxx"]}`,
+    )
 
     expect(tw('gap')).toBe('gap')
     expect(console.warn).toHaveBeenCalledTimes(3)
-    expect(console.warn).toHaveBeenLastCalledWith(`UNKNOWN_THEME_VALUE: {"id":"UNKNOWN_THEME_VALUE","section":"gap","keypath":["DEFAULT"]}`)
+    expect(console.warn).toHaveBeenLastCalledWith(
+      `UNKNOWN_THEME_VALUE: {"id":"UNKNOWN_THEME_VALUE","section":"gap","keypath":["DEFAULT"]}`,
+    )
   } finally {
     console.warn = consoleWarn
   }
@@ -62,11 +66,7 @@ test('ignore vendor specific pseudo classes errors', () => {
   expect(instance.tw('underline text-center')).toBe('underline text-center')
 
   expect(injector.insert).toHaveBeenCalledTimes(4)
-  expect(injector.insert).toHaveBeenNthCalledWith(
-    1,
-    '::-moz-focus-inner{border-style:none}',
-    0,
-  )
+  expect(injector.insert).toHaveBeenNthCalledWith(1, '::-moz-focus-inner{border-style:none}', 0)
   expect(injector.insert).toHaveBeenNthCalledWith(
     2,
     ':-moz-focusring{outline:1px dotted ButtonText}',

diff --git a/packages/core/src/instance.ts b/packages/core/src/instance.ts
@@ -19,7 +19,7 @@ export const create = (config?: Configuration): Instance => {
     // Replace implementation with configured ones
     // `process`: the real one
     // `setup`: is no op and invokes `mode.report` with `LATE_SETUP_CALL`
-    ({process, setup} = configure(config))
+    ;({ process, setup } = configure(config))
   }
 
   // If we got a config, start right away

diff --git a/packages/core/src/internal/presedence.ts b/packages/core/src/internal/presedence.ts
@@ -71,7 +71,6 @@ export const pseudoPrecedence = (pseudoClass: string): number =>
     ? precedence
     : PRECEDENCES_BY_PSEUDO_CLASS.length
 
-
 // https://github.com/kripod/otion/blob/main/packages/otion/src/propertyMatchers.ts
 // "+1": [
 // 	/* ^border-.*(w|c|sty) */