https://github.com/01joseph-hwang10/pclc

Preact Helper library for class based css frameworks like tailwindcss. Highly inspired by styled-components.
https://github.com/01joseph-hwang10/pclc

classed-components css css-in-js preact tailwindcss typescript

Last synced: 2 days ago
JSON representation

Preact Helper library for class based css frameworks like tailwindcss. Highly inspired by styled-components.

• Host: GitHub
• URL: https://github.com/01joseph-hwang10/pclc
• Owner: 01Joseph-Hwang10
• License: mit
• Created: 2022-03-19T14:45:48.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-19T16:14:23.000Z (almost 3 years ago)
• Last Synced: 2025-01-17T13:17:10.606Z (17 days ago)
• Topics: classed-components, css, css-in-js, preact, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/pclc
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# pclc : Classed-Components (for Preact)

Preact Helper library for class based css frameworks like tailwindcss. Highly inspired by styled-components.

## Installation

```bash

# npm

npm install pclc

# yarn

yarn add pclc

```

## Configuration

You can include or/and exclude html tags to use by adding the property accordingly in a js file which should be named as `pclc.config.js` and placed in the root of your project.

Configuration Interface

```ts

interface Config {

  // HTML tags to include. If defined, exclude property will be ignored

  include?: string[];

  // HTML tags to exclude.

  exclude?: string[];

}

```

## Usage

Like `styled` in styled-components, template tag is attached after `classed` and HTML tag (or custom function/functional component).

One thing to note is that unlike styled-components, it does not support "interpolations". But it does support "adapting based on props", and you can use it by passing a function that takes props as argument, and returns class names as a result.

Example :

```tsx

import clsx from "clsx";

import { FunctionalComponent, h } from "preact";

import classed, { tw } from "pclc";

import { render } from "@testing-library/preact";

interface ImageProps {

  src: string;

  alt?: string;

  className?: string;

}

const Image: FunctionalComponent = ({ src, alt, className }) => {

  return (

    

  );

};

const Wrapper = classed.div("h-full flex flex-col");

const Title = classed.div`text-gray-500 text-center text-xs py-2 border-b`;

const CarList = classed.div`flex flex-col flex-1 overflow-scroll`;

const CarItem = classed.div<{ selected?: boolean }>(({ selected }) =>

  clsx([

    tw`border-2 flex p-3 m-2 items-center`,

    selected ? tw`border-black` : tw`border-white`,

  ])

);

const CarImage = classed(Image)`h-14`;

const CarCaption = classed.span`text-gray-500 text-xs py-2 text-center`;

const App: FunctionalComponent = () => (

  

    Choose a ride, or swipe up for more

    

      

        

        Car 1

      

      

        

        Car 2

      

    

  

);

export default App;

```

The rendered component tree looks like this:

```tsx



  


    Choose a ride, or swipe up for more

  

  


    


      

      

        Car 1

      

    

    


      

      

        Car 2

      

    

  



```


## TailwindCSS Intellisense Tip

To use TailwindCSS intellisense VScode extension, add the following to your vscode settings (`.vscode/settings.json`):

```json

{

  /* Your settings */

  /* ... */

  "tailwindCSS.experimental.classRegex": [

    "(?:tw|classed\\.[a-z]{1,15})\\(*[`'\"](.*[`'\"])\\)*"

  ]

}

```

The regex above matches the following code and fires tailwindcss intellisense extension in vscode.

```ts

classed.div("h-full flex flex-col")

classed.span`text-gray-500 text-xs py-2 text-center`

tw`border-2 flex p-3 m-2 items-center`

```