https://github.com/zixiaowang/aphuckrodite

It's naughty to have this library
https://github.com/zixiaowang/aphuckrodite

Last synced: 3 days ago
JSON representation

It's naughty to have this library

• Host: GitHub
• URL: https://github.com/zixiaowang/aphuckrodite
• Owner: ZixiaoWang
• License: other
• Created: 2021-09-11T08:54:53.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-21T15:14:37.000Z (about 3 years ago)
• Last Synced: 2024-04-26T18:47:07.684Z (7 months ago)
• Language: TypeScript
• Size: 2.39 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license

Awesome Lists containing this project

README

        
# Aph-uck-rodite



    

  

----

EN / [中文](./docs/README-zh.md)

----

Aphuckrodite = F**k Aphrodite

## Why?

Aphrodite is a good css-in-js library, but it only provides very limited functions.   

The `create` method only accept a flatten object as style input, and it doesn't support other CSS selector rather than using keys as classes.  

No `id` selector, no `tag` selector, no nested syntax, all the `number` value is `px` by default...

## What different?

APIs are the same as `Aphrodite`, but it catches invalid keys or values and prevents throwing errors everywhere. Most Importantly, **IT SUPPORTS CSS FRAGMENT!**  

## How?

```typescript

import React from 'react';

import { css, Stylesheet } from 'Aphuckrodite';

// This is scoped style

// The generated class name with have an unique hash string in the name

const scopedStyles = Stylesheet.create({

    container: {

        width: 1920,

        padding: 20,

        border: "1px solid black";

    }

});

// This is global style

// The styles can be shared in other components

const globalStyles = Stylesheet.createCSS(`

    .container {

        width: 1366px;

        padding: 12px;

        border: 1px solid grey;

    }

`);

/**

 * @React.Component

 * React Component

 */

const CustomComponent = (props: any): JSX.Element => {

    return (

        


            {/* Your code here... */}

        

    )

}


```

### License

WTFPL