SX: change imports/exports to allow composability

src/babel-plugin-transform-sx-tailwind/README.md

@@ -7,7 +7,7 @@ This has a positive impact on the final bundle size because the huge Tailwind de
 ```diff
 import React from 'react';
 - import { tailwind } from '@adeira/sx-tailwind';
-+ import * as sx from '@adeira/sx';
++ import sx from '@adeira/sx';
 
 export default function Example() {
   return (

src/babel-plugin-transform-sx-tailwind/src/__tests__/__snapshots__/index.test.js.snap

@@ -24,7 +24,7 @@ export default function Example(): Node {
 
 // @flow
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return (
     <span className={__styles_3xIUAp('flex', 'h-3', 'w-3')}>
@@ -127,7 +127,7 @@ export default function Example(): Node {
 
 // @flow
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return (
     <>
@@ -186,7 +186,7 @@ export default function Example(): Node {
 
 // @flow
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return (
     <div className={__styles_BKbxA('text-white', 'bg-black')}>
@@ -272,7 +272,7 @@ const styles = 'Here I am';
 
 // @flow
 import type { Element } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Element<'button'> {
   return (
     <button
@@ -315,7 +315,7 @@ exports[`transform SX Tailwind sx-already-imported.js: sx-already-imported.js 1`
 
 import type { Node } from 'react';
 import { tailwind } from '@adeira/sx-tailwind';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function Example(): Node {
   return (
@@ -341,7 +341,7 @@ const styles = sx.create({
 
 // @flow
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return (
     <div>
@@ -416,7 +416,7 @@ const styles = create({
 
 // @flow
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 import { create } from '@adeira/sx';
 export default function Example(): Node {
   return (
@@ -490,7 +490,7 @@ export default function Example(): Element<'button'> {
 
 // @flow
 import type { Element } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Element<'button'> {
   return (
     <button
@@ -574,7 +574,7 @@ export default function Example(): Element<'button'> {
 
 // @flow
 import type { Element } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Element<'button'> {
   return (
     <button
@@ -659,7 +659,7 @@ export default function Example(): Node {
 
 // @flow
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return (
     <>
@@ -742,7 +742,7 @@ export default function Example(): Element<'button'> {
 
 // @flow
 import type { Element } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Element<'button'> {
   return (
     <button
@@ -799,7 +799,7 @@ export default function Example(): Element<'button'> {
 
 // @flow
 import type { Element } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Element<'button'> {
   return (
     <button
@@ -849,7 +849,7 @@ export default function Example(): Node {
 
 // @flow
 import React, { type Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return <div className={__styles_3noU6Y('text-black', 'bg-white')}>Lorem lipsum</div>;
 }
@@ -892,7 +892,7 @@ export default function Example(): Node {
 
 // @flow
 import React, { type Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   const darkMode = true;
   return (
@@ -947,7 +947,7 @@ exports[`transform SX Tailwind template-literal-expression.js: template-literal-
 
 import React, { type Node } from 'react';
 import { tailwind } from '@adeira/sx-tailwind';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function Example(): Node {
   return <div className={\`\${tailwind('px-4')} \${styles('customStyle')}\`}>Lorem lipsum</div>;
@@ -961,7 +961,7 @@ const styles = sx.create({
 
 // @flow
 import React, { type Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 export default function Example(): Node {
   return <div className={\`\${__styles_4ozVnl('px-4')} \${styles('customStyle')}\`}>Lorem lipsum</div>;
 }

src/babel-plugin-transform-sx-tailwind/src/__tests__/fixtures/sx-already-imported.js

@@ -2,7 +2,7 @@
 
 import type { Node } from 'react';
 import { tailwind } from '@adeira/sx-tailwind';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function Example(): Node {
   return (

src/babel-plugin-transform-sx-tailwind/src/__tests__/fixtures/template-literal-expression.js

@@ -2,7 +2,7 @@
 
 import React, { type Node } from 'react';
 import { tailwind } from '@adeira/sx-tailwind';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function Example(): Node {
   return <div className={`${tailwind('px-4')} ${styles('customStyle')}`}>Lorem lipsum</div>;

src/babel-plugin-transform-sx-tailwind/src/index.js

@@ -34,7 +34,7 @@ module.exports = function sxTailwindBabelPlugin() /*: any */ {
             }
           });
 
-          const sxImport = template.ast(`import * as sx from '@adeira/sx'`);
+          const sxImport = template.ast(`import sx from '@adeira/sx'`);
           path.replaceWith(sxImport);
         }
       },
@@ -100,7 +100,7 @@ module.exports = function sxTailwindBabelPlugin() /*: any */ {
               type === 'ImportDeclaration' &&
               source.value === '@adeira/sx' &&
               Array.isArray(specifiers) &&
-              specifiers[0].type === 'ImportNamespaceSpecifier'
+              specifiers[0].type === 'ImportDefaultSpecifier'
             ) {
               a.push(index);
             }

src/eslint-plugin-sx/docs/rules/no-unused-stylesheet.md

@@ -7,7 +7,7 @@ This rule aims to find unused SX stylesheet definitions.
 Examples of **incorrect** code for this rule:
 
 ```jsx
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent() {
   return null;
@@ -20,7 +20,7 @@ const styles = sx.create({
 ```
 
 ```jsx
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent() {
   return <div className={styles('aaa')} />;
@@ -36,7 +36,7 @@ const styles = sx.create({
 Examples of **correct** code for this rule:
 
 ```jsx
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent() {
   return <div className={styles('aaa')} />;

src/eslint-plugin-sx/package.json

@@ -23,6 +23,6 @@
     "jest-docblock": "^26.0.0"
   },
   "peerDependencies": {
-    "@adeira/sx": "^0.20.0"
+    "@adeira/sx": "^0.21.0"
   }
 }

src/eslint-plugin-sx/src/rules/__tests__/__snapshots__/no-unused-stylesheet.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`reports correct lines and columns: SX function "styles" was not used anywhere in the "className" JSX attribute. 1`] = `
 "  1 | 
-  2 | import * as sx from '@adeira/sx';
+  2 | import sx from '@adeira/sx';
 > 3 | const styles = sx.create({
     |       ^^^^^^^^^^^^^^^^^^^^
 > 4 |   aaa: {
@@ -17,7 +17,7 @@ exports[`reports correct lines and columns: SX function "styles" was not used an
 `;
 
 exports[`reports correct lines and columns: Unknown stylesheet used: bbb (not defined anywhere) 1`] = `
-"  2 | import * as sx from '@adeira/sx';
+"  2 | import sx from '@adeira/sx';
   3 | export default function TestComponent() {
 > 4 |   return <div className={styles('bbb')} />
     |                                 ^^^^^
@@ -27,7 +27,7 @@ exports[`reports correct lines and columns: Unknown stylesheet used: bbb (not de
 `;
 
 exports[`reports correct lines and columns: Unused stylesheet: aaa (defined via "styles" variable) 1`] = `
-"  2 | import * as sx from '@adeira/sx';
+"  2 | import sx from '@adeira/sx';
   3 | const styles = sx.create({
 > 4 |   aaa: {
     |   ^^^^^^

src/eslint-plugin-sx/src/rules/__tests__/__snapshots__/normalizeIndent.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`normalizes indent correctly 1`] = `
 "
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 const styles = sx.create({
   aaa: {
     color: blue,

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-concatenated-classes/invalid/custom-sx-names.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as tada from '@adeira/sx';
+import tada from '@adeira/sx';
 
 export default function MyComponent(): Node {
   // Should be:

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/invalid/issue-1323.js

@@ -6,7 +6,7 @@
  * @see https://github.com/adeira/universe/pull/1323
  */
 
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 import type { Node } from 'react'; // keep the import order exactly like this (first SX, second React)
 
 export default function Navbar(): Node {

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/invalid/unknown-stylesheet.js

@@ -5,7 +5,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   // $FlowExpectedError[incompatible-call] - yadada is not defined in the stylesheet below

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/invalid/unused-stylesheet.js

@@ -5,7 +5,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles('aaa')} />;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/invalid/unused-sx-multiple.js

@@ -7,7 +7,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles2('bbb')} />;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/invalid/unused-sx-not-className.js

@@ -5,7 +5,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function Navbar(): Node {
   // "styles" is essentially unused here since it's not used in "className"

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/invalid/unused-sx.js

@@ -5,7 +5,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return null;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/valid/react-component-unused-sx.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type { Node } from 'react';
-import * as tada from '@adeira/sx'; // eslint-disable-line no-unused-vars
+import tada from '@adeira/sx'; // eslint-disable-line no-unused-vars
 
 export default function MyComponent(): Node {
   return styles('ok');

src/eslint-plugin-sx/src/rules/__tests__/fixtures/no-unused-stylesheet/valid/sx-namespace-import.js

@@ -1,7 +1,7 @@
 // @flow
 
 import type { Node } from 'react';
-import * as tada from '@adeira/sx';
+import tada from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles('aaa')} />;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/valid-usage/invalid/sx-empty-argument.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   // $FlowExpectedError[incompatible-call] wrong on purpose (see below)

src/eslint-plugin-sx/src/rules/__tests__/fixtures/valid-usage/invalid/sx-invalid-argument.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   // $FlowExpectedError[incompatible-call] for testing purposes

src/eslint-plugin-sx/src/rules/__tests__/fixtures/valid-usage/invalid/sx-invalid-stylesheet-type.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles('aaa')} />;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/valid-usage/invalid/sx-keyframes-empty-argument.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles('aaa')} />;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/valid-usage/invalid/sx-keyframes-invalid-argument.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles('aaa')} />;

src/eslint-plugin-sx/src/rules/__tests__/fixtures/valid-usage/invalid/sx-keyframes-invalid-stylesheet-type.js

@@ -4,7 +4,7 @@
  */
 
 import type { Node } from 'react';
-import * as sx from '@adeira/sx';
+import sx from '@adeira/sx';
 
 export default function MyComponent(): Node {
   return <div className={styles('aaa')} />;