twind - npm Package Compare versions

Comparing version 1.0.0-next.2 to 1.0.0-next.3

CHANGELOG.md

 # twind
 
+## 1.0.0-next.3
+
+### Patch Changes
+
+- expose `tw` and `apply` for twind v0.16 compatibility ([`79c63ef9`](https://github.com/tw-in-js/twind/commit/79c63ef9ed3dda9f3bfafde977016b3b75db7c4c))
+
+* expose setup function to configure twind ([`79c63ef9`](https://github.com/tw-in-js/twind/commit/79c63ef9ed3dda9f3bfafde977016b3b75db7c4c))
+
+- BREAKING: renamed umd bundles to global (`twind.global.js`) and there are plain IIFEs ([`79c63ef9`](https://github.com/tw-in-js/twind/commit/79c63ef9ed3dda9f3bfafde977016b3b75db7c4c))
+
+- Updated dependencies [[`79c63ef9`](https://github.com/tw-in-js/twind/commit/79c63ef9ed3dda9f3bfafde977016b3b75db7c4c)]:
+  - @twind/core@1.0.0-next.2
+  - @twind/preset-autoprefix@1.0.0-next.2
+  - @twind/preset-mini@1.0.0-next.2
+  - @twind/preset-tailwind@1.0.0-next.2
+
 ## 1.0.0-next.1
@@ -4,0 +20,0 @@

package.json

 {
   "name": "twind",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
   "description": "tailwindcss compat based on twind",
@@ -50,3 +50,3 @@ "homepage": "https://twind.dev",
       "module": "./twind.js",
-      "script": "./twind.umd.js",
+      "script": "./twind.global.js",
       "types": "./twind.d.ts",
@@ -61,6 +61,30 @@ "node": {
     "./package.json": "./package.json",
+    "./core": {
+      "esnext": "./core.esnext.js",
+      "module": "./core.js",
+      "script": "./core.global.js",
+      "types": "./core.d.ts",
+      "node": {
+        "module": "./core.js",
+        "import": "./core.mjs",
+        "require": "./core.cjs"
+      },
+      "default": "./core.js"
+    },
+    "./mini": {
+      "esnext": "./mini.esnext.js",
+      "module": "./mini.js",
+      "script": "./mini.global.js",
+      "types": "./mini.d.ts",
+      "node": {
+        "module": "./mini.js",
+        "import": "./mini.mjs",
+        "require": "./mini.cjs"
+      },
+      "default": "./mini.js"
+    },
     "./colors": {
       "esnext": "./colors.esnext.js",
       "module": "./colors.js",
-      "script": "./colors.umd.js",
+      "script": "./colors.global.js",
       "types": "./colors.d.ts",
@@ -77,5 +101,6 @@ "node": {
   "dependencies": {
-    "@twind/core": "*",
-    "@twind/preset-autoprefix": "*",
-    "@twind/preset-tailwind": "*"
+    "@twind/core": "1.0.0-next.2",
+    "@twind/preset-autoprefix": "1.0.0-next.2",
+    "@twind/preset-mini": "1.0.0-next.2",
+    "@twind/preset-tailwind": "1.0.0-next.2"
   },
@@ -92,7 +117,6 @@ "peerDependencies": {
   "esnext": "./twind.esnext.js",
-  "unpkg": "./twind.umd.js",
-  "jsdelivr": "./twind.umd.js",
-  "umd:main": "./twind.umd.js",
+  "unpkg": "./twind.global.js",
+  "jsdelivr": "./twind.global.js",
   "types": "./twind.d.ts",
-  "readme": "# twind\n\n---\n\n## READ THIS FIRST!\n\n**Twind v1 is still in beta. Expect bugs!**\n\nTwind v1 is a complete rewrite aiming to be compatible with Tailwind v3 classes\n\n---\n\n## Installation\n\nInstall from npm:\n\n```sh\n# Using npm\nnpm install twind@next\n\n# Using Yarn\nyarn add twind@next\n```\n\n## Usage\n\n```js\nimport 'twind'\n```\n\nOr using a CDNs:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/twind@next\"></script>\n```\n"
+  "readme": "# twind\n\n---\n\n## READ THIS FIRST!\n\n**Twind v1 is still in beta. Expect bugs!**\n\nTwind v1 is a complete rewrite aiming to be compatible with Tailwind v3 classes\n\n---\n\nTailwind right in the browser without any build step.\n\n## CDN Usage\n\nAdd this line to your `index.html`:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/twind@next\"></script>\n```\n\nTo configure Twind (optional):\n\n```html\n<script>\n  twind.setup({\n    presets: [\n      // custom presets...\n    ],\n    theme: {\n      extend: {\n        colors: {\n          clifford: '#da373d',\n        }\n      }\n    }\n    rules: [\n      // custom rules...\n    ],\n    // ...\n  })\n</script>\n```\n\nBy default, [@twind/autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix) and [@twind/preset-tailwind](https://www.npmjs.com/package/@twind/preset-tailwind) will be applied.\n\n### CDN Builds\n\n#### Core\n\nWithout any preset:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/twind@next/core.global.js\"></script>\n```\n\n#### Tailwind\n\nWith [@twind/autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix) and [@twind/preset-tailwind](https://www.npmjs.com/package/@twind/preset-tailwind):\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/twind@next\"></script>\n```\n\n#### Mini\n\nWith [@twind/autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix) and [@twind/preset-mini](https://www.npmjs.com/package/@twind/preset-mini):\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/twind@next/mini.global.js\"></script>\n```\n\n## Bundler Usage\n\n```sh\nnpm i twind\n```\n\n```js\nimport { setup } from 'twind'\n\nsetup({\n  /* options */\n})\n```\n\n## API\n\nEverything from [@twind/core](https://www.npmjs.com/package/@twind/core) is available.\n\n### setup\n\nCan be called as many times as you want.\n\n### cx (from [@twind/core](https://www.npmjs.com/package/@twind/core))\n\n```js\nimport { cx } from 'twind'\n\n// Set a className\nelement.className = cx`\n  underline\n  /* multi\n    line\n    comment\n  */\n  hover:focus:!{\n    sm:{italic why}\n    lg:-{px}\n    -mx-1\n  }\n  // Position\n  !top-1 !-bottom-2\n  text-{xl black}\n`\n```\n\n### tw\n\nTDB\n\n### apply\n\nTDB\n\n### theme\n\nTDB\n"
 }

README.md

@@ -13,24 +13,118 @@ # twind
 
-## Installation
+Tailwind right in the browser without any build step.
 
-Install from npm:
+## CDN Usage
 
-```sh
-# Using npm
-npm install twind@next
+Add this line to your `index.html`:
 
-# Using Yarn
-yarn add twind@next
+```html
+<script src="https://cdn.jsdelivr.net/npm/twind@next"></script>
 ```
 
-## Usage
+To configure Twind (optional):
 
-```js
-import 'twind'
+```html
+<script>
+  twind.setup({
+    presets: [
+      // custom presets...
+    ],
+    theme: {
+      extend: {
+        colors: {
+          clifford: '#da373d',
+        }
+      }
+    }
+    rules: [
+      // custom rules...
+    ],
+    // ...
+  })
+</script>
 ```
 
-Or using a CDNs:
+By default, [@twind/autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix) and [@twind/preset-tailwind](https://www.npmjs.com/package/@twind/preset-tailwind) will be applied.
 
+### CDN Builds
+
+#### Core
+
+Without any preset:
+
 ```html
+<script src="https://cdn.jsdelivr.net/npm/twind@next/core.global.js"></script>
+```
+
+#### Tailwind
+
+With [@twind/autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix) and [@twind/preset-tailwind](https://www.npmjs.com/package/@twind/preset-tailwind):
+
+```html
 <script src="https://cdn.jsdelivr.net/npm/twind@next"></script>
 ```
+
+#### Mini
+
+With [@twind/autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix) and [@twind/preset-mini](https://www.npmjs.com/package/@twind/preset-mini):
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/twind@next/mini.global.js"></script>
+```
+
+## Bundler Usage
+
+```sh
+npm i twind
+```
+
+```js
+import { setup } from 'twind'
+
+setup({
+  /* options */
+})
+```
+
+## API
+
+Everything from [@twind/core](https://www.npmjs.com/package/@twind/core) is available.
+
+### setup
+
+Can be called as many times as you want.
+
+### cx (from [@twind/core](https://www.npmjs.com/package/@twind/core))
+
+```js
+import { cx } from 'twind'
+
+// Set a className
+element.className = cx`
+  underline
+  /* multi
+    line
+    comment
+  */
+  hover:focus:!{
+    sm:{italic why}
+    lg:-{px}
+    -mx-1
+  }
+  // Position
+  !top-1 !-bottom-2
+  text-{xl black}
+`
+```
+
+### tw
+
+TDB
+
+### apply
+
+TDB
+
+### theme
+
+TDB

twind.d.ts

@@ -1,8 +0,12 @@
-import * as _twind_preset_tailwind from '@twind/preset-tailwind';
-import * as _twind_core from '@twind/core';
+import { Class, BaseTheme, TwindConfig, Twind, Preset, TwindUserConfig, ExtractThemes } from '@twind/core';
 export * from '@twind/core';
 
-declare const tw: _twind_core.Twind<_twind_core.BaseTheme & _twind_preset_tailwind.TailwindTheme & Omit<_twind_core.BaseTheme, "extend">, CSSStyleSheet>;
+declare function apply(strings: TemplateStringsArray | Class, ...interpolations: Class[]): string;
+declare function tw(strings: TemplateStringsArray | Class, ...interpolations: Class[]): string;
+declare function theme(): void;
 
-export { tw };
+declare function setup<Theme extends BaseTheme = BaseTheme>(config: TwindConfig<Theme>, target?: HTMLElement): Twind<Theme, CSSStyleSheet>;
+declare function setup<Theme = BaseTheme, Presets extends Preset<any>[] = Preset[]>(config: TwindUserConfig<Theme, Presets>, target?: HTMLElement): Twind<BaseTheme & ExtractThemes<Theme, Presets>, CSSStyleSheet>;
+
+export { apply, setup, theme, tw };
 //# sourceMappingURL=twind.d.ts.map

twind.esnext.js

@@ -0,16 +1,32 @@
+import {
+  apply,
+  runtime,
+  theme,
+  tw
+} from "./_/chunks/chunk-PUOHJDKQ.js";
+
 // src/index.ts
-import { defineConfig, twind, cssom, observe } from "@twind/core";
+import {
+  defineConfig
+} from "@twind/core";
 import autoprefix from "@twind/preset-autoprefix";
 import tailwind from "@twind/preset-tailwind";
 export * from "@twind/core";
-var config = defineConfig({
-  presets: [
-    autoprefix(),
-    tailwind()
-  ]
-});
-var tw = observe(twind(config, cssom()));
+if (typeof document != "undefined" && document.currentScript) {
+  autoSetupTimeoutRef = setTimeout(runtime, 0, {});
+}
+var autoSetupTimeoutRef;
+function setup(config, target) {
+  clearTimeout(autoSetupTimeoutRef);
+  return runtime(defineConfig({
+    ...config,
+    presets: [autoprefix(), ...config.presets || [], tailwind()]
+  }), target);
+}
 export {
+  apply,
+  setup,
+  theme,
   tw
 };
 //# sourceMappingURL=twind.esnext.js.map

twind.js

@@ -0,16 +1,32 @@
+import {
+  apply,
+  runtime,
+  theme,
+  tw
+} from "./_/chunks/chunk-PUOHJDKQ.js";
+
 // src/index.ts
-import { defineConfig, twind, cssom, observe } from "@twind/core";
+import {
+  defineConfig
+} from "@twind/core";
 import autoprefix from "@twind/preset-autoprefix";
 import tailwind from "@twind/preset-tailwind";
 export * from "@twind/core";
-var config = defineConfig({
-  presets: [
-    autoprefix(),
-    tailwind()
-  ]
-});
-var tw = observe(twind(config, cssom()));
+if (typeof document != "undefined" && document.currentScript) {
+  autoSetupTimeoutRef = setTimeout(runtime, 0, {});
+}
+var autoSetupTimeoutRef;
+function setup(config, target) {
+  clearTimeout(autoSetupTimeoutRef);
+  return runtime(defineConfig({
+    ...config,
+    presets: [autoprefix(), ...config.presets || [], tailwind()]
+  }), target);
+}
 export {
+  apply,
+  setup,
+  theme,
   tw
 };
 //# sourceMappingURL=twind.js.map

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 3 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

487296

142.44%

Number of package files

50

92.31%

Lines of code

847

144.09%

Number of medium quality alerts

0

-100%

Number of lines in readme file

130

261.11%

Worsened metrics

Dependency count

5

25%

Dependency changes

• + Added

  @twind/preset-mini@1.0.0-next.2

• + Added

  @twind/core@1.0.0-next.2
  (transitive)

• + Added

  @twind/preset-autoprefix@1.0.0-next.2
  (transitive)

• + Added

  @twind/preset-mini@1.0.0-next.2
  (transitive)

• + Added

  @twind/preset-tailwind@1.0.0-next.2
  (transitive)

• - Removed

  @twind/core@1.1.3
  (transitive)

• - Removed

  @twind/preset-autoprefix@1.0.7
  (transitive)

• - Removed

  @twind/preset-tailwind@1.1.4
  (transitive)

• Updated

  @twind/core@1.0.0-next.2

• Updated

  @twind/preset-autoprefix@1.0.0-next.2

• Updated

  @twind/preset-tailwind@1.0.0-next.2