Comparing version 0.0.1 to 0.3.2
{ | ||
"name": "twind", | ||
"version": "0.0.1", | ||
"description": "a placeholder for @tw-in-js/core", | ||
"main": "index.js", | ||
"scripts": { | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
"version": "0.3.2", | ||
"description": "compiles tailwind like shorthand syntax into css at runtime", | ||
"keywords": [ | ||
"tailwind", | ||
"tw-in-js", | ||
"tailwind-in-js" | ||
], | ||
"homepage": "https://github.com/tw-in-js/twind#readme", | ||
"bugs": "https://github.com/tw-in-js/twind/issues", | ||
"repository": "github:tw-in-js/twind", | ||
"license": "MIT", | ||
"contributors": [ | ||
"Luke Jackson (lukejacksonn.github.io)", | ||
"Sascha Tandel (https://github.com/sastan)" | ||
], | ||
"main": "./node/twind.js", | ||
"dependencies": { | ||
"csstype": "^3.0.5", | ||
"tiny-css-prefixer": "^1.1.4" | ||
}, | ||
"keywords": [], | ||
"author": "", | ||
"license": "ISC" | ||
} | ||
"publishConfig": { | ||
"access": "public", | ||
"registry": "https://registry.npmjs.com/" | ||
}, | ||
"engines": { | ||
"node": ">=10.13" | ||
}, | ||
"exports": { | ||
".": { | ||
"node": "./node/twind.js", | ||
"esnext": "./esnext/twind.js", | ||
"default": "./module/twind.js" | ||
}, | ||
"./": "./" | ||
}, | ||
"esnext": "./esnext/twind.js", | ||
"module": "./module/twind.js", | ||
"unpkg": "./script/twind.js", | ||
"types": "./types/index.d.ts", | ||
"sideEffects": false | ||
} |
@@ -1,3 +0,90 @@ | ||
# Twind | ||
# twind | ||
> a placeholder for @tw-in-js/core | ||
> the smallest, fastest, most feature complete Tailwind-in-JS solution ever | ||
[![MIT License](https://badgen.net/github/license/tw-in-js/twind)](https://github.com/tw-in-js/twind/blob/main/LICENSE) | ||
[![Latest Release](https://flat.badgen.net/npm/v/twind?icon=npm&label)](https://www.npmjs.com/package/twind) | ||
[![Bundle Size](https://flat.badgen.net/bundlephobia/minzip/twind?icon=packagephobia&label&color=blue)](https://bundlephobia.com/result?p=twind 'gzip bundle size (including dependencies)') | ||
[![Package Size](https://flat.badgen.net/badgesize/brotli/https:/unpkg.com/twind/module/twind.js?icon=jsdelivr&label&color=blue)](https://unpkg.com/twind/module/twind.js 'brotli package size (without dependencies)') | ||
[![Typescript](https://flat.badgen.net/badge/icon/included?icon=typescript&label)](https://unpkg.com/browse/twind/types/index.d.ts) | ||
[![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind?icon=github&label)](https://github.com/tw-in-js/twind) | ||
[![CI](https://github.com/tw-in-js/twind/workflows/CI/badge.svg)](https://github.com/tw-in-js/twind/actions?query=workflow%3Aci) | ||
[![Coverage Status](https://flat.badgen.net/coveralls/c/github/tw-in-js/twind/main?icon=codecov&label)](https://coveralls.io/github/tw-in-js/twind?branch=main) | ||
[![PRs Welcome](https://flat.badgen.net/badge/PRs/welcome/purple)](http://makeapullrequest.com) | ||
--- | ||
If you are here then the likelihood is that you have heard of and are interested in, or have used both Tailwind and CSS-in-JS libraries such as styled components, emotion or goober before. These packages have revolutionized web development and for one reason or another, have proved overwhelmingly popular with the community. | ||
The purpose of this project is to create and maintain the smallest, fastest, most feature complete Tailwind-in-JS solution in the world. Exercising the flexibility of CSS-in-JS within the constraints of the Tailwind API. | ||
We aim to create a place for likeminded people to discuss issues and share implementations around this idea. | ||
## Quickstart | ||
If you would like to get started with twind right away then copy paste this code into your favorite sandbox. | ||
> ⚡️ Alternatively try the [live and interactive demo](https://esm.codes/#aW1wb3J0IHsgdHcsIHNldHVwIH0gZnJvbSAnaHR0cHM6Ly9jZG4uc2t5cGFjay5kZXYvdHdpbmQnCgpkb2N1bWVudC5ib2R5LmlubmVySFRNTCA9IGAKICA8bWFpbiBjbGFzcz0iJHt0d2BiZy1ibGFjayB0ZXh0LXdoaXRlYH0iPgogICAgPGgxIGNsYXNzPSIke3R3YHRleHQteGxgfSI+VGhpcyBpcyBUYWlsd2luZCBpbiBKUyE8L2gxPgogIDwvbWFpbj4KYA==) | ||
```js | ||
import { tw, setup } from 'https://cdn.skypack.dev/twind' | ||
document.body.innerHTML = ` | ||
<main class="${tw`bg-black text-white`}"> | ||
<h1 class="${tw`text-xl`}">This is Tailwind in JS!</h1> | ||
</main> | ||
` | ||
``` | ||
For further instruction on usage please [read the documentation](docs)! | ||
## Rational | ||
This project was started by the authors of two similar libraries – [oceanwind](https://github.com/lukejacksonn/oceanwind) and [beamwind](https://github.com/kenoxa/beamwind) – who chose to collaborate rather than compete with each other in this space. The open source community is full of fragmentation but we wanted to see cohesion here. We hope that combining efforts helps us coin standards for certain aspects of the implementation; things like input parsing, [grouping syntax](./docs/grouping.md) and prescedence calculation. | ||
## Challenges | ||
The core problems we are trying to solve here are as follows: | ||
1. Parsing Input: taking input and normalizing it to create a comprehendable set of Tailwind rules | ||
2. Merging Themes: combining JSON themes which configure and constrain the compiler | ||
3. Compiling Rules: taking a set of Tailwind rules and translating them into appropriate CSS rules | ||
4. Injecting Styles: taking CSS rules and generating classes that get append to a stylesheet in the DOM | ||
5. Custom Plugins: taking functions and using them to extend the capabilities of the compiler | ||
This has to happen in a performant way at runtime, whilst adhering to Tailwind V2 as a language specification. All grammars that exist in Tailwind should be covered by this implementation. | ||
## Opportunities | ||
Simply recreating a tailwind like experience at runtime might seem like a futile exercise but we'd like to believe it opens up the doors to some exciting new possibilities. There is always going to be a tradeoff between compiling at ahead of time and compiling _just in time_, however we are confident the upsides here are significant enough to persue a runtime implementation and the results have been promising so far. | ||
> Note it is still possible to remove all runtime overhead via a prepass either at serve or built time | ||
The flexible nature of a runtime first approach affords us possibilities like: | ||
- Dynamic Theming: generating new themes on the fly without the need to recompile anything | ||
- Unlimited Variants: enabling every variant combination by default because unused rules are never generated | ||
- Enhanced Syntax: taking advantage of macros within template literals to create more terse rules | ||
- Error Handling: warning the developer about duplicate and missing variants or directives | ||
- Hashing Classes: reducing the overall output size and eliminating conflicts via deterministic hashing | ||
- Inline Plugins: extending the capabilities of the compiler with simple functions at runtime | ||
Another big advantage we see of shipping the interpreter compiler itself (rather than pre-compiled output) is that the effective size of the CSS for your whole app is deterministic and fixed. The weight of the compiler itself along with your theme file is all that users will ever download, no matter how many styles you use. | ||
Currently the compiler weighs around 10KB which is smaller than styled-components and the average tailwind output. | ||
## Inspiration | ||
It goes without saying that the primary inspiration here comes from Tailwind. It is a revolutionary take on styling the web which has proven popular by designers and developers alike. All the core plugins here, abide by the rules painstakingly thought out, implemented and popularized by Adam Wathan et al. making us forever in his debt. | ||
> I've wanted to do a CSS-in-JS flavor of Tailwind for over 2 years because of all the neat benefits you get there so it's cool to see projects like this! – [@adamwathan](https://twitter.com/adamwathan/status/1320370489408225282) | ||
We hope one day we will get the chance to collaborate together on an official implementation! | ||
Another big motivator was seeing [htm](https://www.npmjs.com/package/htm) by Jason Miller at Google, compiling JSX at runtime with performance characteristics that were comparable to code that was transpile ahead of time with babel. | ||
We'd like to call ourselves the htm of the css world but that awards goes to [goober](https://www.npmjs.com/package/goober) which is an inspiringly small and efficient CSS-in-JS library by Cristian Bote a member of the core preact team. | ||
## License | ||
[MIT](https://github.com/tw-in-js/twind/blob/main/LICENSE) |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
No contributors or author data
MaintenancePackage does not specify a list of contributors or an author in package.json.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
691958
73
3725
1
1
91
2
2
+ Addedcsstype@^3.0.5
+ Addedtiny-css-prefixer@^1.1.4
+ Addedcsstype@3.1.3(transitive)
+ Addedtiny-css-prefixer@1.1.4(transitive)