tailwind-styled-components - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

dist/tailwind.d.ts

@@ -1,9 +0,12 @@
-export declare type FunctionTemplate = (template: TemplateStringsArray, ...templateElements: any[]) => (props: {
-    children?: any;
-    [props: string]: any;
-}) => any;
+import React from "react";
+declare type TransientProps = Record<`$${string}`, any>;
+export declare type FunctionTemplate<P, E> = <K extends TransientProps = {}>(template: TemplateStringsArray, ...templateElements: ((props: P & K) => string | undefined | null)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & K> & React.RefAttributes<E>>;
+interface ClassNameProp {
+    className?: string;
+}
+declare function functionTemplate<P extends ClassNameProp, E = any>(Element: React.ComponentType<P>): FunctionTemplate<P, E>;
 export declare type IntrinsicElements = {
-    [key in keyof JSX.IntrinsicElements]: FunctionTemplate;
+    [key in keyof JSX.IntrinsicElements]: FunctionTemplate<JSX.IntrinsicElements[key], key>;
 };
-declare const tw: ((Component: any) => FunctionTemplate) & IntrinsicElements;
+declare const tw: typeof functionTemplate & IntrinsicElements;
 export default tw;

dist/tailwind.js

@@ -34,9 +34,11 @@ "use strict";
 }
-const functionTemplate = (Element) => (template, ...templateElements) => react_1.default.forwardRef(({ children, ...props }, ref) => (react_1.default.createElement(Element, Object.assign({}, props, { ref: ref, className: parseTailwindClassNames(cleanTemplate(template, props.className), ...templateElements.map((t) => t(props))) }), children)));
-const intrinsicElements = domElements_1.default.reduce((acc, domElement) => ({
+function functionTemplate(Element) {
+    return (template, ...templateElements) => react_1.default.forwardRef((props, ref) => (react_1.default.createElement(Element, Object.assign({}, Object.fromEntries(Object.entries(props).filter(([key]) => key.charAt(0) !== "$")), { ref: ref, className: parseTailwindClassNames(cleanTemplate(template, props.className), ...templateElements.map((t) => t(props))) }))));
+}
+const intrinsicElements = domElements_1.default.reduce((acc, DomElement) => ({
     ...acc,
-    [domElement]: functionTemplate(domElement)
+    [DomElement]: functionTemplate((p) => react_1.default.createElement(DomElement, Object.assign({}, p)))
 }), {});
-const tw = Object.assign((Component) => functionTemplate(Component), intrinsicElements);
+const tw = Object.assign(functionTemplate, intrinsicElements);
 exports.default = tw;
 //# sourceMappingURL=tailwind.js.map

package.json

 {
     "name": "tailwind-styled-components",
-    "version": "1.0.7",
+    "version": "2.0.0",
     "keywords": [
@@ -24,2 +24,3 @@ "react",
         "clean": "rimraf dist",
+        "test": "jest",
         "prepublishOnly": "npm run clean && npm run build"
@@ -34,12 +35,17 @@ },
     "devDependencies": {
+        "@testing-library/react": "^11.2.6",
+        "@types/jest": "^26.0.22",
         "@types/node": "^14.14.7",
         "@types/react": "^16.9.56",
-        "@typescript-eslint/eslint-plugin": "^4.7.0",
-        "@typescript-eslint/parser": "^4.7.0",
+        "@typescript-eslint/eslint-plugin": "^4.22.0",
+        "@typescript-eslint/parser": "^4.22.0",
         "eslint": "^7.13.0",
         "eslint-config-prettier": "^6.15.0",
         "eslint-plugin-prettier": "^3.1.4",
+        "jest": "^26.6.3",
         "prettier": "^2.1.2",
+        "react-dom": "^17.0.2",
         "rimraf": "^3.0.2",
-        "typescript": "^4.0.5"
+        "ts-jest": "^26.5.5",
+        "typescript": "^4.2.4"
     },
@@ -46,0 +52,0 @@ "dependencies": {

README.md

@@ -5,3 +5,3 @@ # Tailwind-Styled-Component
 
-[![NPM version][npm-image]][npm-url] 
+[![NPM version][npm-image]][npm-url]
 
@@ -11,2 +11,46 @@ [npm-image]: http://img.shields.io/npm/v/tailwind-styled-components.svg?style=flat-square
 
+#### Before 😬
+
+```
+<div className=`flex ${primary ? "bg-indigo-600" : "bg-indigo-300"} inline-flex items-center border border-transparent text-xs font-medium rounded shadow-sm text-white hover:bg-indigo-700 focus:outline-none`>
+```
+
+#### After 🥳
+
+`<Button $primary={false}>`
+
+```js
+const Button = tw.div`
+    ${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
+    
+    flex
+    inline-flex
+    items-center
+    border
+    border-transparent
+    text-xs
+    font-medium
+    rounded
+    shadow-sm
+    text-white
+    
+    hover:bg-indigo-700
+    focus:outline-none
+`
+```
+
+## Features
+
+♻️ Reusable
+
+🧩 Extendable
+
+💅 Compatible with Styled Components
+
+⚡️ Use props like every React Component
+
+🤯 Stop editing 400+ characters lines
+
+🧘 Cleaner code in the render function
+
 ## Install
@@ -22,2 +66,29 @@
 
+*This extension requires TailwindCSS to be installed and configured on your project too. [Install TailwindCSS](https://tailwindcss.com/docs/installation)*
+
+#### [Optional] Configure IntelliSense autocomplete on VSCode
+
+First, install Tailwind CSS IntelliSense VSCode extension
+
+https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
+
+Then add these user settings ([How to edit VSCode settings?](https://code.visualstudio.com/docs/getstarted/settings))
+
+```js
+"tailwindCSS.includeLanguages": {
+    "typescript": "javascript", // if you are using typescript
+    "typescriptreact": "javascript"  // if you are using typescript with react
+},
+"editor.quickSuggestions": {
+    "strings": true // forces VS Code to trigger completions when editing "string" content
+},
+"tailwindCSS.experimental.classRegex": [
+    "tw`([^`]*)", // tw`...`
+    "tw=\"([^\"]*)", // <div tw="..." />
+    "tw={\"([^\"}]*)", // <div tw={"..."} />
+    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
+    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
+]
+```
+
 ## Usage
@@ -27,3 +98,2 @@
 
-
 ```js
@@ -35,3 +105,3 @@ import tw from "tailwind-styled-components"
 
-You can use tailwind-styled-components without using styled components
+Create a Tailwind Styled Component with Tailwind rules that you can render directly
 
@@ -49,2 +119,10 @@ ```js
 
+```js
+render(
+    <Container>
+        <div>Use the Container as any other React Component</div>
+    </Container>
+)
+```
+
 Will be rendered as
@@ -54,28 +132,26 @@
 <div class="flex items-center justify-center flex-col w-full bg-indigo-600">
-  <!-- children -->
+    <div>Use the Container as any other React Component</div>
 </div>
 ```
 
-
 ### Conditional class names
 
-Set tailwind class conditionaly with the same syntaxt as [styled components](https://styled-components.com/docs/basics#adapting-based-on-props)
+Set tailwind class conditionally with the same syntax as [styled components](https://styled-components.com/docs/basics#adapting-based-on-props)
 
-```js
-const Button = tw.button`
+```ts
+interface ButtonProps {
+   $primary: boolean
+}
+
+const Button = tw.button<ButtonProps>`
     flex
-    ${p => p.primary ? "bg-indigo-600" : "bg-indigo-300"}
+    ${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
 `
 ```
----
-**Be sure to set the entire class name**
 
-✅ &nbsp;Do `${p => p.primary ? "bg-indigo-600" : "bg-indigo-300"}`
+*Tailwind Styled Components supports [Transient Props](https://styled-components.com/docs/api#transient-props))*
+*Prefix the props name with a dollar sign ($) to prevent forwarding them to the DOM element*
 
-❌ &nbsp;Don't `bg-indigo-${p => p.primary ? "600" : "300"}`
-
----
-
 ```jsx
-<Button primary={true} />
+<Button $primary={true} />
 ```
@@ -87,3 +163,3 @@
 <button class="flex bg-indigo-600">
-  <!-- children -->
+    <!-- children -->
 </button>
@@ -95,3 +171,3 @@ ```
 ```jsx
-<Button primary={false} />
+<Button $primary={false} />
 ```
@@ -103,20 +179,37 @@
 <button class="flex bg-indigo-300">
-  <!-- children -->
+    <!-- children -->
 </button>
 ```
 
+---
 
+**Be sure to set the entire class name**
+
+✅ &nbsp;Do `${p => p.primary ? "bg-indigo-600" : "bg-indigo-300"}`
+
+❌ &nbsp;Don't `bg-indigo-${p => p.primary ? "600" : "300"}`
+
+---
+
 ### Extends
 
 ```js
-const RedContainer = tw(Container)`
-    bg-red-600
+const DefaultContainer = tw.div`
+    flex
+    items-center
+    bg-blue-600
 `
 ```
 
+```js
+const RedContainer = tw(DefaultContainer)`
+    bg-red-300
+`
+```
+
 Will be rendered as
 
 ```html
-<div class="flex items-center justify-center flex-col w-full bg-red-600">
-  <!-- children -->
+<div class="flex items-center bg-red-300">
+    <!-- children -->
 </div>
@@ -127,3 +220,2 @@ ```
 
-
 ### Extends Styled Component
@@ -133,9 +225,8 @@
 
-
 ```js
-const StyledComponentWithCustomJs = styled.div`
+const StyledComponentWithCustomCss = styled.div`
     filter: blur(1px);
 `
 
-const  = tw(StyledComponentWithCustomJs)`
+const  = tw(StyledComponentWithCustomCss)`
    flex
@@ -145,2 +236,4 @@ `
 
+*Css rule `filter` is not supported by default on TailwindCSS*
+
 Will be rendered as
@@ -150,10 +243,9 @@
 <div class="flex" style="filter: blur(1px);">
-  <!-- children -->
+    <!-- children -->
 </div>
 ```
 
-
 ## Example
 
-```jsx
+```tsx
 import React from "react"
@@ -163,12 +255,10 @@ import tw from "tailwind-styled-components"
 
-const Container = tw.div`
-    flex
-    items-center
-    justify-center
-`
-
 // Create a <Title> react component that renders an <h1> which is
 // indigo and sized at 1.125rem
-const Title = tw.h1`
-  ${p => p.large ? "text-lg": "text-base"}
+interface TitleProps {
+    $large: boolean;
+}
+
+const Title = tw.h1<TitleProps>`
+  ${(p) => (p.$large ? "text-lg" : "text-base")}
   text-indigo-500
@@ -179,8 +269,8 @@ `
 // a special blue background color
-const Container = styled.section`
-  background-color: #0366d6;
+const SpecialBlueContainer = styled.section`
+    background-color: #0366d6;
 `
 
 // Create a <Container> react component that extends the SpecialBlueContainer to render
-// a tailwind <section> with the special blue background and adds the flex classes 
+// a tailwind <section> with the special blue background and adds the flex classes
 const Container = tw(SpecialBlueContainer)`
@@ -194,5 +284,7 @@ flex
 // Use them like any other React component – except they're styled!
-<Container>
-  <Title large={true}>Hello World, this is my first tailwind styled component!</Title>
-</Container>
+render(
+    <Container>
+        <Title $large={true}>Hello World, this is my first tailwind styled component!</Title>
+    </Container>
+)
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70721

increased by13.91%

Lines of code

206

increased by2.49%

Number of lines in readme file

274

increased by50.55%

Worsened metrics

Dev dependency count

15

increased by50%

No dependency changes