Merge pull request #667 from ben-rogerson/feature/better-suggestions

Better suggestions

.eslintrc.js

@@ -1,25 +1,18 @@
 module.exports = {
-  settings: {
-    version: 'detect',
-  },
+  settings: { version: 'detect' },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:unicorn/recommended',
     'xo/browser',
-    'xo/esnext',
     'xo-typescript/space',
     'xo-react/space',
     'plugin:chai-friendly/recommended',
     'plugin:jest/recommended',
     'plugin:import/errors',
     'plugin:import/warnings',
     'plugin:import/typescript',
-    'prettier/@typescript-eslint',
     'prettier',
-    'prettier/babel',
-    'prettier/react',
-    'prettier/unicorn',
   ],
   plugins: ['chai-friendly', 'jest', 'import'],
   rules: {
@@ -35,47 +28,42 @@ module.exports = {
     '@typescript-eslint/no-base-to-string': 0,
     '@typescript-eslint/prefer-nullish-coalescing': 0,
     '@typescript-eslint/no-unsafe-return': 0,
+    '@typescript-eslint/no-confusing-void-expression': 0,
+    '@typescript-eslint/no-unsafe-assignment': 0,
     '@typescript-eslint/semi': 0,
     '@typescript-eslint/restrict-template-expressions': 0,
     '@typescript-eslint/default-param-last': 0,
     '@typescript-eslint/prefer-optional-chain': 0,
     '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/no-var-requires': 0,
+    '@typescript-eslint/naming-convention': 0,
+    '@typescript-eslint/no-require-imports': 0,
+    '@typescript-eslint/no-throw-literal': 0,
+    '@typescript-eslint/no-implicit-any-catch': 0,
+    '@typescript-eslint/triple-slash-reference': 0,
     'react/prop-types': 0,
     'jest/prefer-expect-assertions': 0,
     'capitalized-comments': 0,
     'comma-dangle': 0,
-    'import/extensions': [
-      'error',
-      {
-        svg: 'allow',
-      },
-    ],
-    'import/no-unassigned-import': [
-      'error',
-      {
-        allow: ['**/*.css'],
-      },
-    ],
-    'unicorn/filename-case': [
-      'error',
-      {
-        case: 'camelCase',
-      },
-    ],
+    'import/extensions': ['error', { svg: 'allow' }],
+    'import/no-unassigned-import': ['error', { allow: ['**/*.css'] }],
+    'unicorn/filename-case': ['error', { case: 'camelCase' }],
     'unicorn/prefer-type-error': 0,
     'unicorn/no-reduce': 0,
     'unicorn/import-style': 0,
     'unicorn/prefer-optional-catch-binding': 0,
     'unicorn/no-null': 0,
     'unicorn/prevent-abbreviations': 0,
+    'unicorn/no-array-reduce': 0,
+    'unicorn/prefer-module': 0,
+    'unicorn/consistent-destructuring': 0,
+    'unicorn/prefer-node-protocol': 0,
+    'unicorn/prefer-export-from': ['error', { ignoreUsedVariables: true }],
   },
   overrides: [
     {
       files: ['**/*.ts', '**/*.js'],
-      rules: {
-        'jest/no-try-expect': 0,
-      },
+      rules: { 'jest/no-try-expect': 0 },
     },
     {
       files: ['**/*.js', '**/*.jsx'],
@@ -96,9 +84,12 @@ module.exports = {
       },
     },
   ],
-  ignorePatterns: ['.eslintrc.js'],
-  globals: {
-    JSX: true,
-    AriaAttributes: true,
-  },
+  ignorePatterns: [
+    '.eslintrc.js',
+    'macro.js',
+    'types',
+    '__fixtures__',
+    'tailwind.config.js',
+  ],
+  globals: { JSX: true, AriaAttributes: true },
 }

.prettierrc

@@ -4,7 +4,6 @@
   "singleQuote": true,
   "bracketSpacing": true,
   "tabWidth": 2,
-  "jsxBracketSameLine": false,
   "trailingComma": "es5",
   "useTabs": false,
   "arrowParens": "avoid"

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

README.md

@@ -110,10 +110,10 @@ tw`text-sm md:text-lg`
 **👌 Simple imports** - Twin collapses imports from common styling libraries into a single import:
 
 ```diff
-+ import tw, { styled, css } from 'twin.macro'
-- import tw from 'twin.macro'
 - import styled from '@emotion/styled'
 - import css from '@emotion/react'
+- import tw from 'twin.macro'
++ import tw, { styled, css } from 'twin.macro'
 ```
 
 **🐹 Adds no size to your build** - Twin converts the classes you’ve used into css objects using Babel and then compiles away, leaving no runtime code
@@ -203,7 +203,6 @@ Twin works within many modern stacks - take a look at these examples to get star
 - **Webpack**<br/>[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/webpack-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/webpack-emotion-typescript)
 - **Preact**<br/>[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/preact-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/preact-emotion) / [goober](https://github.com/ben-rogerson/twin.examples/tree/master/preact-goober)
 - **Create React App**<br/>[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/cra-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion)
-- **Snowpack**<br/>[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/snowpack-react-styled-components) / [styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/snowpack-react-styled-components-typescript) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/snowpack-react-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/snowpack-react-emotion-typescript)
 - **Vite**<br/>[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-emotion-typescript)
 
 ### Advanced frameworks

__fixtures__/!custom.js

@@ -8,5 +8,3 @@ tw`group-hocus:bg-red-500`
 tw`group-focus:bg-red-500`
 tw`group-active:bg-red-500`
 tw`group-visited:bg-red-500`
-
-tw`stroke-non-scaling`

__fixtures__/colorFunctions/tailwind.config.js

@@ -1,14 +1,16 @@
-const color = name => ({ opacityVariable, opacityValue }) => {
-  if (opacityValue !== undefined) {
-    return `rgba(var(--twc-${name}), ${opacityValue})`
-  }
+const color =
+  name =>
+  ({ opacityVariable, opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return `rgba(var(--twc-${name}), ${opacityValue})`
+    }
 
-  if (opacityVariable !== undefined) {
-    return `rgba(var(--twc-${name}), var(${opacityVariable}, 1))`
-  }
+    if (opacityVariable !== undefined) {
+      return `rgba(var(--twc-${name}), var(${opacityVariable}, 1))`
+    }
 
-  return `rgb(var(--twc-${name}))`
-}
+    return `rgb(var(--twc-${name}))`
+  }
 
 const colorScale = name =>
   [50, 100, 200, 300, 400, 500, 600, 700, 800, 900].reduce(

__fixtures__/cssPropEmotion/autoCssProp.js

@@ -1,4 +1,3 @@
 import './macro' // twinImport
-
 ;<div css="" />
 ;<div className="" />

__fixtures__/cssPropStyledComponents/autoCssProp.js

@@ -1,4 +1,3 @@
 import './macro' // twinImport
-
 ;<div css="" />
 ;<div className="" />

__fixtures__/utilitiesBorders/borderColor.js

@@ -1625,3 +1625,6 @@ tw`border-l-[color:rgba(255, 255, 255, .45)]`
 
 tw`border-[color:green]`
 tw`border-[color:rgba(255, 255, 255, .45)]`
+
+tw`border-x-[color:green]`
+tw`border-y-[color:rgba(255, 255, 255, .45)]`

__fixtures__/utilitiesBorders/borderWidth.js

@@ -46,4 +46,7 @@ tw`border-t-[length:10px]`
 tw`border-r-[length:10px]`
 tw`border-b-[length:10px]`
 tw`border-l-[length:10px]`
+tw`border-l-[length:10px]`
+tw`border-x-[length:10px]`
+tw`border-y-[length:10px]`
 tw`border-[length:10px]`