https://github.com/a-la/styles

CSS Properties For JSX.
https://github.com/a-la/styles

a-la css jsx style

Last synced: 1 day ago
JSON representation

CSS Properties For JSX.

• Host: GitHub
• URL: https://github.com/a-la/styles
• Owner: a-la
• License: agpl-3.0
• Created: 2020-03-17T13:33:22.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-17T16:09:24.000Z (almost 5 years ago)
• Last Synced: 2024-12-23T23:32:45.515Z (6 days ago)
• Topics: a-la, css, jsx, style
• Language: JavaScript
• Homepage: https://www.artd.eco
• Size: 287 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @a-la/styles

[![npm version](https://badge.fury.io/js/%40a-la%2Fstyles.svg)](https://www.npmjs.com/package/@a-la/styles)

`@a-la/styles` is CSS Properties For JSX.



  



```sh

yarn add -D @a-la/styles

npm i --save-dev @a-la/styles

```

## Table Of Contents

- [Table Of Contents](#table-of-contents)

- [Usage](#usage)

- [Special Cases](#special-cases)

- [Copyright & License](#copyright--license)



  



## Usage

By installing this package, you will be able to specify styles on tags and components as JSX properties when using [`alamode`](https://github.com/a-la/alamode) transpiler.

To receive access to auto-completions, you'll need to import the `@a-la/styles` package in your source code:

```jsx

import '@a-la/styles'

// or if using Preact 8:

import '@a-la/styles/preact'

export const Component = () => {

  return (
Hello World!
)

}

```


The actual import doesn't do anything as the source file is blank. It is needed only for VSCode to pick up distributed typings.

Because of [a bug](https://github.com/microsoft/TypeScript/issues/28905) in VSCode, you won't see properties with hyphens, e.g., `margin-top` and will only see `marginTop`, but you can actually use both. The camel cases are added for discoverability of properties.



  



## Special Cases

Some CSS properties will interfere with attributes of certain tags. There's an ignore map at [`/ignore.json`](/ignore.json) that prevents the output of the following cases:

```html









```



  



## Copyright & License

GNU Affero General Public License v3.0

Data comes from [VS Code Web Custom Data](https://www.npmjs.com/package/vscode-web-custom-data):

- `css/mdn/mdn-documentation.js` is built upon content from [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web) and distributed under CC BY-SA 2.5.

  

    

      

        

      

    

    © Art Deco™ for À La Mode 2020