Stylify.dev. Dynamic CSS Generator.

Stylify is a library that generates CSS dynamically based on what you write. Write HTML. Get CSS. 🚀

Let me tell you a story

Recently, I have been working on multiple projects. One project uses Bootstrap, second one Tailwind and some other v…


This content originally appeared on DEV Community and was authored by Vladimír Macháček

Stylify is a library that generates CSS dynamically based on what you write. Write HTML. Get CSS. 🚀

Let me tell you a story

Recently, I have been working on multiple projects. One project uses Bootstrap, second one Tailwind and some other vanilla CSS with own utility and components classes.

Even though those tools are great and approaches not "bad", learning and remembering the classes, configurations, selectors all over again is just simply anoying and time consuming. IDE plugins for whispering classes sometimes come to me as pure despair.

I asked myself many times, why there is no framework or a library that uses natural CSS properties and their values as selectors, that developers already knows. Yes, the selectors will maybe be a bit longer but there would be nothing to study in order to use it.

Because I have could not find any, I have created my own.

From Idea to Project

It took me a year of development and I have finally released the first version 🎉.
Stylify is a library that comes with a Native Preset that can match 678 (probably all) CSS properties from Chrome, Mozilla, Opera, Safari and Edge. The size is less than 28 kB.

The syntax is simple: cssProperty:value and in case you need screens and pseudo classes screen:pseudoClass:property:value.

In practice, the usage of the Stylify looks like this:

<div class="font-size:24px hover:color:red md:font-size:48px">
    Hello World!
</div>
<script src="https://cdn.jsdelivr.net/npm/@stylify/stylify@latest/dist/stylify.native.min.js"></script>

Because some values can contain a space and a quote, I have decided to add a special syntax. When writting a selector its value should contain a space, you can use __(two underscores) and for a quote ^ (hat).

This allows you to write selectors like this:

<div class="
 border:12px__solid__steelblue 
 font-family:^Arial^,__sans-serif
">
  Hello World!
</div>

When compiled and mangled, it generates the following CSS:

._nmed{
 border:12px solid steelblue
}
._l4hja{
 font-family:'Arial', sans-serif
}

Another Features

  • Dynamic selectors: Define a macro and use it however you want width:240px, width:10%, width:30rem.
  • Dynamic screens: You can combine screens using logical operands like || and && => sm&&tolg:font-size:48px xl&&dark:color:rgba(200,200,200,0.5) and use any value you want minw123px:font-size:24px.
  • Selectors mangling: Stylify can convert long selectors transition:color__0.3s__ease-in-out to _abc123.
  • Spliting CSS: CSS can be generated for each file separately. Thanks to that you can split CSS for example for a page and layout.
  • Components: Define for example a button with dependencies like background:#000 color:#fff padding:24px and use it in a whole project.
  • Variables: Define variables for repetetative values. They can be injected into code as CSS variables.
  • Plain selectors: Allows you to style selectors like article > h1.
  • Helpers: Can be used when the CSS is generated for example for recalculating units and etc.

Seamless Integration

Stylify can be integrated easily into frameworks like Next.js, Nuxt.js, Vite.js, Symfony Framework, Nette Framework, Laravel and etc. Also it works great along with Webpack and Rollup.js.

For easier integration there is a @stylify/nuxt-module for Nuxt.js and a @stylify/bundler that can be used with already mentioned Rollup.js and Webpack or in any other tool.

When integrating into an existing project, it is possible to generate CSS for each page separately (even for small components) and slowly rewrite the website without increasing it's size or breaking anything.

Let me know what you think!

I will be very glad if you try Stylify and let me know any (positive and negative) feedback or idea that could make the Stylify better and therefore more usefull for developers when working on their next project 🙂.


This content originally appeared on DEV Community and was authored by Vladimír Macháček


Print Share Comment Cite Upload Translate Updates
APA

Vladimír Macháček | Sciencx (2021-12-21T18:48:26+00:00) Stylify.dev. Dynamic CSS Generator.. Retrieved from https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/

MLA
" » Stylify.dev. Dynamic CSS Generator.." Vladimír Macháček | Sciencx - Tuesday December 21, 2021, https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/
HARVARD
Vladimír Macháček | Sciencx Tuesday December 21, 2021 » Stylify.dev. Dynamic CSS Generator.., viewed ,<https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/>
VANCOUVER
Vladimír Macháček | Sciencx - » Stylify.dev. Dynamic CSS Generator.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/
CHICAGO
" » Stylify.dev. Dynamic CSS Generator.." Vladimír Macháček | Sciencx - Accessed . https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/
IEEE
" » Stylify.dev. Dynamic CSS Generator.." Vladimír Macháček | Sciencx [Online]. Available: https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/. [Accessed: ]
rf:citation
» Stylify.dev. Dynamic CSS Generator. | Vladimír Macháček | Sciencx | https://www.scien.cx/2021/12/21/stylify-dev-dynamic-css-generator/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts