html-css-attributes

Add every css properties as individual attributes on your html elements


Keywords
atomic-css, css, html, html-css, utility-classes
License
MIT
Install
npm install html-css-attributes@1.0.7

Documentation

html-css-attributes ยท GitHub license npm version PRs Welcome

Don't write CSS, simply add attributes to your HTML elements instead!


With this library / vite-plugin you can add every CSS property to your html elements through their own unique attributes. We've also upgraded the style="" attribute allowing you to style based on state and media queries like so: @dark:hover:style="background: red;". In other words; you can now style your pages without truely never leaving your html.


Features

  • ๐ŸŽ๏ธ No parsing, no AST, no scanning, it's PRACTICALLY INSTANT (0.617ms generation time on really large components).
  • ๐Ÿค ~2kb min+gzip - Zero dependencies and browser friendly.
  • ๐Ÿฆพ Added variants to the style="" attribute. Now you can do stuff like @dark-theme:hover:style="background: red; transform: scale(0.98)"
  • ๐Ÿ“‡ Named groups - For more complex UI's
  • ๐Ÿ”ŒVite plugin for every framework (W.I.P)

Example

<html font-family="'Times New Roman', Times, serif">
    <head>
        <title>Example website html</title>
    </head>
    <body margin="0px" background-color="#F0F0F0" @dark:background-color="#020202" @dark:@high-contrast:background-color="black">
        <nav display="flex" justify-content="space-between" flex-direction="row" width="100%" height="50px" @print:display="none">
            <div hover:children:text-decoration="underline">
                <a href="/home" display="inline-block">HOME</a>
                <a href="/about" display="inline-block">ABOUT</a>
                <a href="/contact" display="inline-block">CONTACT</a>
            </div>
            <div>
                <button border-radius="2rem" hover:background-color="purple" border="none">CALL ME</button>
            </div>
        </nav>
    </body>
</html>
generated css in 0.0385 milliseconds (average of 1_000_000 total runs):
[font-family="Times New Roman, Times, serif"]{font-family:Times New Roman, Times, serif}[padding="0px"]{padding:0px}[margin="0px"]{margin:0px}[background-image="url('./background.png')"]{background-image:url('./background.png')}[\:width="123px"],[group="apple"] [group-apple\:width="123px"]{width:123px}[display="flex"]{display:flex}[justify-content="space-between"]{justify-content:space-between}[flex-direction="row"]{flex-direction:row}[width="100%"]{width:100%}[height="50px"]{height:50px}[display="inline-block"]{display:inline-block}[\:background="red"]{background:red}[border-radius="5px"]{border-radius:5px}[\:background-color="purple"],[background-color="purple"]{background-color:purple}[\:background-color="red"],[background-color="red"]{background-color:red}@media only print{[\@print\:background="red"]{background:red}}@media (prefers-color-scheme: dark){[\@dark\:background-color="red"]{background-color:red}}
Disclaimer

๐Ÿงช html-css-attributes is not yet production-ready Expect breaking changes and complete redesigns in the near future. We will update this note once we get closer to a stable v1.0 release.

Getting Started

If you want to use the css generator programatically, simply npm install @html-css-attributes/core and `import generator from '@html-css-attributes/core'.

CDN

We do not yet have a recommended CDN.

Vite

npm install @html-css-attributes/vite --save-dev
yarn add @html-css-attributes/vite --save-dev
pnpm install @html-css-attributes/vite --save-dev
// vite.config.ts
import HTML_CSS_Attributes from '@html-css-attributes/vite'

export default {
  plugins: [
    HTML_CSS_Attributes(),
  ]
}

Add <style html-css-attributes></style> to your frameworks components for which you want to generate css:

Documentation

html-css-attributes makes a bunch of css related optionally configurable attributes available to all your html elements.

CSS properties

We have made a new attribute for every CSS property available on your HTML elements with an identical name to their corresponding css property. For example:

  • display: flex -> <div display="flex"></div>
  • transform: scale(0.5) -> <div transform="scale(0.5)"></div>
  • background: #F0F0F0 -> <div background="#F0F0F0"></div>
  • overflow: scroll -> <div overflow="scroll"></div>

Variants

TODO: add example explaining basics and advanced use cases like: hover:active:children:before:background="red"

Media Queries

Only want to apply a property on smaller screens, when printing the page or when dark theme is active? Simply prefix the attribute with the appropriate media-query-prefix.

  • @media only print { display: flex } -> <div @print:display="flex"></div>
  • @media (prefers-color-scheme: dark) { transform: scale(0.5) } -> <div @dark:transform="scale(0.5)"></div>
  • @media (prefers-color-scheme: light) { background: #F0F0F0 } -> <div @light:background="#F0F0F0"></div>
  • @media (orientation: portrait) { overflow: scroll } -> <div @portrait:overflow="scroll"></div>

Syntactic sugar

We have also added some shortcuts to make your life easier.

the :var suffix

Allows you to write <div color:var="theme"></div> instead of <div color="var(--theme)"></div>

the :url suffix

Allows you to write <div background:url="./background.svg"></div> instead of <div background="url('./background.svg')"></div>

Configurations

TODO

Acknowledgement

in alphabet order

License

MIT License ยฉ 2022 Jack van der Bilt