@a-la/styles
Advanced tools
@a-la/styles is CSS Properties For JSX.
yarn add -D @a-la/styles
npm i --save-dev @a-la/styles
By installing this package, you will be able to specify styles on tags and components as JSX properties when using alamode transpiler.
To receive access to auto-completions, you'll need to import the @a-la/styles package in your source code:
import '@a-la/styles'
// or if using Preact 8:
import '@a-la/styles/preact'
export const Component = () => {
return (<div border="1px solid green">Hello World!</div>)
}
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 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.
Some CSS properties will interfere with attributes of certain tags. There's an ignore map at /ignore.json that prevents the output of the following cases:
<hr width color size>
<pre width>
<img width height alt>
<iframe width height>
<embed width height>
<object width height border>
<video width height>
<input width height size alt>
<canvas width height>
<table border>
<body background>
<meta content>
<br clear>
<select size>
<area alt>
GNU Affero General Public License v3.0
Data comes from VS Code Web Custom Data:
css/mdn/mdn-documentation.js is built upon content from Mozilla Developer Network and distributed under CC BY-SA 2.5.
| © Art Deco™ for À La Mode 2020 |
|---|
FAQs
CSS Properties For JSX.
The npm package @a-la/styles receives a total of 1 weekly downloads. As such, @a-la/styles popularity was classified as not popular.
We found that @a-la/styles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.