DEV Community: Vladimír Macháček

Signalize.js - Introduction to Modular Javascript Framework

Vladimír Macháček — Mon, 24 Jun 2024 05:00:00 +0000

Signalize is a client-side JavaScript framework designed for swift web development with minimal JavaScript.

Signalize:

Leverages modern ES modules and import maps.
Imports only a small 2 KB core, allowing you to decide what to import and when.

The goal is to provide functionality similar to modern frameworks like Vue, Svelte, Solid, and Qwik, but with minimal JavaScript, the smallest possible learning curve, a simple codebase, no dependencies, and no need for a JavaScript backend.

Signalize in a Nutshell

Let's start with a simple example of how Signalize works:

Signalize is split into several JavaScript modules.
Each module provides different functionality.
To use Signalize, you need to define an import map first.
Then, you import the core and create a new Signalize instance.
This new instance will provide you with the resolve function for loading modules.
Every time you need some functionality, you import it using the resolve function.
Signalize internally reuses modules and automatically loads dependencies in the correct order to keep the framework small.

<!-- 1. Configure the importmap -->
<script type="importmap">
{
  "imports": {
    "signalizejs": "https://cdn.jsdelivr.net/npm/signalizejs@latest/+esm",
    "signalizejs/mutation-observer": "https://cdn.jsdelivr.net/npm/signalizejs@latest/mutation-observer/+esm",
    "signalizejs/dom/ready": "https://cdn.jsdelivr.net/npm/signalizejs@latest/dom/ready/+esm",
    "signalizejs/event": "https://cdn.jsdelivr.net/npm/signalizejs@latest/event/+esm"
  }
}
</script>
<script type="module">
    // 2. Import the Signalize core
    import Signalize from 'signalizejs';

    // 3. Create a new Signalize instance
    const { resolve } = new Signalize();

    // 4.1 Resolve the Event module because we need the "on" function
    // 4.2 The Event module will automatically import the Mutation Observer module
    const { on } = await resolve('event', 'dom/ready');

    // 5. Use the on function
    on('dom:ready', () => alert('Hello World!'));
</script>

The Ecosystem

The Signalize ecosystem currently contains 25 modules focused on solving web development problems such as reactivity, web components, Ajax, SPA, error logging, and various utilities. The number of modules will definitely grow.

Here is a list of a few of them:

Signals & Reactivity: signal, bind
Directives
Web Components
SPA
Dialogs
Logger
Web Perf: Task
Utils: Ajax

The Mindset

The basic idea is to import only what you need. Not everything needs to be a complex app with tons of features:

I need some simple reactivity: Use the Signals and Binding modules.
I have a carousel with dynamic products: Use the Ajax module and manually redraw Snippets.
I need reusable components: Use Web Components
I need more complex forms: Import Directives
I want to turn my website into an SPA: Add the SPA module.

A simple example with Signals & Reactivity.

You can edit this example in the playground

<button>
  Count: <span></span>
</button>

<script type="importmap">
{
  "imports": {
    "signalizejs": "https://cdn.jsdelivr.net/npm/signalizejs/+esm",
    "signalizejs/bind": "https://cdn.jsdelivr.net/npm/signalizejs/bind/+esm",
    "signalizejs/event": "https://cdn.jsdelivr.net/npm/signalizejs/event/+esm",
    "signalizejs/mutation-observer": "https://cdn.jsdelivr.net/npm/signalizejs/mutation-observer/+esm",
    "signalizejs/scope": "https://cdn.jsdelivr.net/npm/signalizejs/scope/+esm",
    "signalizejs/signal": "https://cdn.jsdelivr.net/npm/signalizejs/signal/+esm"
  }
}
</script>

<script type="module" defer>
    import Signalize from 'signalizejs';

    const { resolve } = new Signalize();

    // You code goes here
    const { signal, bind } = await resolve('signal', 'bind');

    const number = signal(0);

    document.querySelector('button').addEventListener(
      'click',
      () => number(number() + 1)
    );
    bind(document.querySelector('span'), { text: number });
</script>

A simple example with Astro.build

Do you like Astro.build? It converts JavaScript into ES modules, so Signalize works very well with Astro. I wrote a guide on how to use Signalize in Astro.

Bellow is a simplified example:

1 - Install Signalize:

npm i signalizejs

2 - Create src/assets/layout.js

import Signalize from 'signalizejs';

export const signalize = new Signalize();

3 - Create src/layouts/main.astro

---
// 1. Get signalizejs url
import signalize from 'signalizejs?url';

// 2. Get event module url. This applies for all modules you will need.
import eventModuleUrl from 'signalizejs/event?url';

// 3. Define importmap
const importMap = JSON.stringify({
    imports: {
        // 4. Configure necessary modules
        'signalizejs/event': eventModuleUrl,
        // Other modules you need
    }
});
---

<html>
    <head>
        <!-- 5. Embed the import map -->
        <script type="importmap" :html={importMap}></script>
        <!-- 6. Create a global Signalize instance -->
        <script>
            import "../assets/layout.js";
        </script>
    </head>
    <body>
        <slot />
    </body>
</html>

4 - Create src/pages/index.astro

---
// src/pages/index.astro
import MainLayout from '../layouts/main.astro';
---
<MainLayout>
    <script>
        import { signalize } from '../assets/layout.js';

        const { on } = await signalize.resolve('event');
    </script>
</MainLayout>

Let me know what you think!

If you like the idea, let me know by starring the Signalize repo.

I welcome any feedback because Signalize is a new library and there is definitely room for improvement. 🙂

Stay in Touch!

I plan to write about the reactivity inspired by Solid and Angular Signals, the bindings and directives inspired by Svelte, and the ES module loader for dependency injection inspired by Qwik's loader.

If you want to get inspired for your next project or learn something new, it's a great place to start.

🔥Webperf Tips (1) - Case Study - Gastein.com

Vladimír Macháček — Tue, 20 Feb 2024 17:52:39 +0000

Hi all!

I have decided to start a series of videos about Webperf Case Studies of various websites. Just for fun.

About this series

On my my Youtube channel,
there is a playlist for Web Performance Case Studies and it will be focused primarily on this type of videos.

If you want to learn about webperf bottlenecks, subscribe to my channel and yo might find similar mistakes on your website and quickly learn how to fix them.

If you want me to analyse your website, leave it in the comments youtube🤟.

How it works

I find a random website and analyse it
After that, I try to explain, how to fix each issue I find

In This video - Gastein.com

✅How to fix blocking head tag resources
✅How to improve Interaction to the next paint
✅Carousel (like Slick) loading tips
✅Modern dialog libraries alternative
✅Others

▶️ Subscribe to my Youtube channel to learn more!

Faster React apps coding: How to migrate from Emotion CSS-in-JS to Stylify Utility-First CSS

Vladimír Macháček — Sat, 25 Feb 2023 09:00:00 +0000

Looking for a better way to manage your CSS in React? Learn how to migrate from Emotion CSS-in-JS to Stylify CSS's utility-first approach and streamline your development workflow.

You can try the examples in this article in the Playground On Stackblitz 🚀.

💎 Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

Features:
✅ Build module. No runtime script.
✅ CSS-like selectors
✅ No framework to study
✅ Less time spent in docs
✅ Mangled & Extremely small CSS
✅ No CSS purge needed
✅ Components, Variables, Custom selectors
✅ It can generate multiple CSS bundles

🔗 Components

In Emotion, components are often defined this way:

const Title = styled.h1`
  color: blue 
  font-weight: bold
  @media (max-width: 640px) {
    color:red
  }
`;
<Title>Hello World!🎉</Title>

Stylify provides a similar feature. Components can be defined within a file (using content options), where they are used, or globally within a config.

Example with the configuration within a file. The content between stylify-components expects javascript object without surrounding brackets:

<!-- 
stylify-components
  title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>

Example in a global compiler config:

const compilerConfig = {
  title: 'color:blue font-weight:bold md:color:red'
};

Usage:

<h1 class="title"></h1>

Components are "lazy" (generated on demand). This means, that even if you configure them (in a file or globally), they will be generated only if matched within the content. No unused CSS will be generated. The same goes for utilities. If the utility for a component is not matched within a content directly, the selector is not generated and only the component selector is added to the CSS output.

The production CSS output will look something like this in production:

.a,.d {color:blue}
.b,.d {font-weight:bold}
 @media (max-width: 768px) {
 .c,.d {color:red}
 }

The html output:

<h1 class="d"></h1>

🎯 Selectors

In Emotion, you can use CSS prop to style element directly like this:

<div css={css`
  color: blue;
  font-weight: bold;
  @media (min-width: 640px) {
    color: red;
  }
`}></div>

Stylify allows you to use utilities directly within the content. So the above example can be refactored to this:

<div className="color:blue font-weight:bold md:color:red"></div>

The production output of the CSS will be similar to the example of the components. The HTML however will look like this:

<div className="a b c"></div>

🌐 Global Styles

Sometimes we need to style some parts of the application globally. To do that within the Emotion, we need to use the Global component:

<Global
  styles={css`
    .some-class {
      color: hotpink !important;
    }
  `}
/>

In the case of Stylify, you can use custom selectors to solve this problem. These selectors can be defined directly within the class attribute or in the global config.

Example with the class attribute:

<div className="[.button_.icon]{font-size:14px}">
  <button className="
    [.icon]{color:#fff;border-radius:12px}
    [&+button]{margin-left:24px}
  ">
    <i className="icon"></i>
  </button>
  <button></button>
<div>

The syntax pattern in the class attribute looks like this:

[css selectors]{stylify selectors split by ;}

The _ (underscore) is used instead of space in both CSS and Stylify selectors and the & character always refers to the current element.

The same code but in the global config would look like this:

const compilerConfig = {
  customSelectors: {
    '.buttons-wrapper .button .icon': 'font-size:14px',
    '.button': `
       .icon { color:#fff border-radius:12px }
       & + button { margin-left:24px }
    `,
  }
}

When defining customSelectors in the global config, the syntax lets you use a nesting feature. The & characters refer to the upper level.

Usage of the global config:

<div className="buttons-wrapper">
  <button className="button">
    <i className="icon"></i>
  </button>
  <button></button>
<div>

💲Variables

When you need to pass a color into the component using props, then instead of doing this color: ${props => props.textColor};, you can use native CSS variables:

<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">
</div>

We just need to tell Stylify to replace variables with CSS variables instead of their value and that the localTextColor is external:

const compilerConfig = {
  replaceVariablesByCssVariables: true,
  externalVariables: ['localTextColor']
}

The external variable can also be defined only in the file where it is used:

<!-- 
stylify-externalVariables
  localTextColor
/stylify-externalVariables
-->
<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">

Stylify also provides an option to configure custom variables. It can be done in the file where they are used, in the same way as components or in the global config:

In file:

<!-- 
stylify-variables
  primary: '#000',
  secondary: '#444'
/stylify-variables
-->
<div class="color:primary"></div>

In Compiler Config:

const compilerConfig = {
  primary: '#000'
}

📦 Splitting CSS

Emotion splits CSS automatically and injects it directly into the document based on the rendered components.

Stylify doesn't have any runtime script, so you have to configure the Bundler and the splitting manually.

However, the Stylify output is so small (it can be even 10 Kb (gzipped) for a large website), that it is ok to have only one bundle for the whole project. Eventually, there you can check tips for CSS bundles splitting.

Bundles config example:

const bundles = [
  { 
     outputFile: 'path/to/layout.css', 
     files: ['path/to/layout.jsx'] 
  },

  // Bundler uses https://npmjs.com/package/fast-glob
  // You can use its glob syntax
  { 
     outputFile: 'path/to/global.css', 
     files: ['path/**/*.jsx'] 
  }
]);

Let me know what you think!

If you like the idea, let me know by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

How to Effortlessly Migrate from Styled Components CSS-in-JS to Stylify Utility-First CSS for Better React Development.

Vladimír Macháček — Thu, 16 Feb 2023 09:35:43 +0000

Say goodbye to CSS-in-JS and Runtime scripts for injecting and compiling CSS and hello to lightning-fast coding with Stylify Utility-First CSS. As a React frontend engineer, you know the importance of efficient, streamlined solutions that don't sacrifice style or functionality. And that's exactly what Stylify offers.

Migrating from Styled Components CSS-in-JS solution is a breeze with Stylify. And because it has no runtime, you can expect snappier performance.

You can try the examples in this article in the Playground On Stackblitz 🚀.

💎 Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

🔗 Components

In Styled Components, components are often defined this way:

const Title = styled.div`
  color: blue 
  font-weight: bold
  @media (max-width: 768px) {
    color:red
  }
`;
<Title>Hello World!🎉</Title>

Stylify provides a similar feature. Components can be defined within a file (using content options), where they are used, or globally within a config.

Example with the configuration within a file. The content between stylify-components expect javascript object without surrounding brackets:

<!-- 
stylify-components
  title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<div class="title"></div>

Example in a global compiler config:

const compilerConfig = {
  title: 'color:blue font-weight:bold md:color:red'
};

Usage:

<div class="title"></div>

The production CSS output will look something like this in production:

.a,.d {color:blue}
.b,.d {font-weight:bold}
 @media (max-width: 768px) {
 .c,.d {color:red}
 }

The html output:

<div class="d"></div>

🎯 Selectors

Stylify also allows you to use utilities directly within the content. So the above example can also look like this:

<div class="color:blue font-weight:bold md:color:red"></div>

The production output of the CSS will be similar to the example of the components. The HTML however will look like this:

<div class="a b c"></div>

💲Variables

When you need to pass a color into the component using props, then instead of doing this color: ${props => props.textColor};, you can use native CSS variables:

<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">
</div>

We just need to tell Stylify to replace variables by CSS variables instead of their value and that the localTextColor is external:

const compilerConfig = {
  replaceVariablesByCssVariables: true,
  externalVariables: ['localTextColor']
}

The external variable can also be defined only in the file where it is used:

<!-- 
stylify-externalVariables
  localTextColor
/stylify-externalVariables
-->
<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">

Stylify also provides an option to configure custom variables. It can be done in the file where they are used, in the same way as components or in the global config:

In file:

<!-- 
stylify-variables
  primary: '#000',
  secondary: '#444'
/stylify-variables
-->
<div class="color:primary"></div>

In Compiler Config:

const compilerConfig = {
  primary: '#000'
}

📦 Splitting CSS

Styled Components splits CSS automatically and inject it directly into the document based on the rendered components.

Stylify doesn't have any runtime script, so you have to configure the Bundler and the splitting manually.

Bundles config example:

const bundles = [
  { 
     outputFile: 'path/to/layout.css', 
     files: ['path/to/layout.jsx'] 
  },

  // Bundler uses https://npmjs.com/package/fast-glob
  // You can use its glob syntax
  { 
     outputFile: 'path/to/global.css', 
     files: ['path/**/*.jsx'] 
  }
]);

Let me know what you think!

If you like the idea, let me know by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Best Practices for Utility-First CSS

Vladimír Macháček — Thu, 02 Feb 2023 12:51:48 +0000

Utility-First CSS is a modern and flexible approach to styling website.

However, it temps developers to "step on the gas", turn on the heavy metal and write literally everything into class attributes in completely random order. This ends up with a class long like Route 50 and coding turns into a "Sherlock Holmes experience".

This guide is a list of useful lessons learned while working and testing Utility-First CSS. It's goal is to help you use Utility-First CSS effectively while eliminating the issues mentioned below.

Even though this guide is focused primarily on Stylify CSS, there are links to Tailwind documentation for similar technology/approach and all tips explained in this guide can be used within any other Utility-First CSS framework that supports similar features.

Table of content:

Utility-First Pros and Cons
How to align and sort selectors
Cleaning bloated templates and duplicated class attributes
Creating reusable Components
Styling elements globally
Eliminating Hardcoded Values by Variables
Simplifying development using hooks
CSS bundles splitting

Utility-First CSS Pros and Cons

Below is a list of a few pros and cons you will probably encounter, when working with Stylify CSS or Tailwind CSS. I have explained them more in a detail on Stylify CSS website.

Pros:

It allows you to atomically style every element on the page exactly how you need
You don't have create weird selector names, switch between files, clean unused CSS etc.
There are fewer duplicated property:values and at rules in the CSS
The CSS is often smaller than with manually written CSS or with component frameworks

Cons:

Class attributes in templates can get easily "unreadable"
Some elements that should work as components (buttons for example) are defined as elements with duplicated class attributes, which can cause harder maintenance
Values for properties like color, border and margin are often hardcoded within the template

Now when we know at least some positives/negatives while using Utility-First CSS, let's take a look at the negatives and let's try to solve them.

How to align and sort selectors

To improve class attribute readability, order your selectors from the smallest media query/screen/container, to largest:

<!-- Min width -->
<button class="font-size:14px sm:font-size:24px lg:font-size:32px"></button>
<!-- Max width -->
<button class="maxw640px:margin-top:24px tomd:flex-direction:column"></button>

In case the class attribute is long and you have multiple media queries within the attribute, put each media query on a separate line. This way you can easily see, which line is responsible for each media/container query and what changed in the pull request.

<div class="
    width:240px height:240px margin-bottom:24px
    md:margin-bottom:32px md:width:320px
    xl:width:100%
"></div>

If there are multiple attributes on an element and a class attribute with a lot of utilities, put the class attribute on the end and break it into multiple lines. This will keep the element more readable:

<div id="" aria-label="" data-my-custom-data class="
    width:240px height:240px margin-bottom:24px
    md:margin-bottom:32px md:width:320px
    xl:width:100%
"></div>

When it comes to selectors that are "related" to each other like font-size/line-height and width/height, put them right next to each other. This way it is easier to find related selectors.

<button class="font-size:18px line-height:24px width:100% height:24px"></button>
<button class="
    display:flex flex-direction:column align-items:center
    font-size:18px line-height:24px
    md:flex-direction:row md:font-size:20px
"></button>

If you use Tailwind, you might want to check their Prettier Plugin which can sort your classes automatically.

To decrease the number of classes, you can also use shortcuts and modern CSS features to avoid unnecessary classes.

<div class="margin-top:12px margin-right:24px font-size:16px md:font-size:24px xl:font-size:32px"></div>
<div class="margin:12px_24px_0_0 font-size:clamp(16px,10vh,32px)"></div>

Cleaning bloated templates and duplicated class attributes

Because of the simplicity of utilities usage, it's easy to forget to split the code into reusable parts. Unfortunately, we cannot avoid this, if we don't want to have unreadable templates:

We can style elements globally, for which we can use global custom selectors, or components.
When using frameworks like React, Vue, Svelte or Angular, we can easily create framework-based components with slots.
In Stylify case, we can also define components within a config file or within a file (template) where they are used.
If you use Tailwind, you can configure components within CSS files with the @apply rule. They have their guide about reusing styles, adding custom styles and extending configuration.

Each of these approaches has its purpose which is explained below.

Creating reusable Components

In case you work with frameworks like Nuxt, Next, Vue, React, Svelte or Lit, you can define components and reuse them.
This way, you have styles for such components only in one place and it doesn't bloat your HTML elsewhere.

Also, you can restrict the amount of possible component style variants by rendering the component based on passed props.

// MyButton.vue
<template>
    <button class="color:red font-size:24px">
        <slot></slot>
    </button>
</template>

// Page.vue
<template>
    <MyButton>Click me!</MyButton>
</template>

Similar approach can also be used within PHP frameworks like Symfony, Laravel or Nette. It might not be as flexible as React or Vue components, but you can create a lot of reusable blocks.

Styling elements globally

Sometimes it's necessary to style elements globally. Such as styling nested elements within an article or adding some CSS reset.

In Stylify, this can be done in various ways using custom selectors.

If you use Tailwind, there are arbitrary variants for this.

When you have only a small amount of selectors and elements to modify, it's ok to style it directly through the class attribute.

<nav class="
display:flex flex-direction:column

[a]{display:inline-flex;align-items:center;text-decoration:none}
[a_.icon]{margin-right:4px;line-height:1}
[a_span]{font-size:16px}
[a:hover_span]{text-decoration:underline}
">
    <a href="#">
        <i class="icon"></i>
        <span>Link</span>
    </a>
</nav>

When the style you have to add to inner/global elements starts to grow, it's better to move it outside of the class attribute.
In Stylify CSS you can define these selectors within the config file or in a template where they are used.

In case, the style is applied only in one template, we can define it within the template. The custom selectors can be defined within a comment in the stylify-customSelectors section. It expects a javascript object without surrounding brackets. The syntax within the template literals is similar to SCSS. However, to keep things simple, it only supports nesting and chaining. Custom selectors content options expects javascript object without surrounding brackets:

<!--
stylify-customSelectors
    '.navigation': `
        display:flex flex-direction:column

        a {
            display:inline-flex align-items:center text-decoration:none
            .icon { margin-right:4px line-height:1 }
            span { font-size:16px }
            &:hover span { text-decoration:underline }
        }
    `
/stylify-customSelectors
-->
<nav class="navigation">
    <a href="#">
        <i class="icon"></i>
        <span>Link</span>
    </a>
</nav>

The config from template can also be moved into the config file:

const compilerConfig = {
    customSelectors: {
        '.navigation': `
            display:flex flex-direction:column

            a {
                display:inline-flex align-items:center text-decoration:none
                .icon { margin-right:4px line-height:1 }
                span { font-size:16px }
                &:hover span { text-decoration:underline }
            }
        `
    }
}

Eliminating Hardcoded Values by Variables

At first, it seems ok to write selector like color:#000 or box-shadow:0_4px_8px_rgba(0,0,0,.16). However, what if we want to use the same shadow across the web or somewhere in the future, we will want to support a light/dark mode. This will simply not work and it will complicate the maintenance and refactoring.

If you use Tailwind, they have an extensive guide on how to configure each part of the framework.

In the case of Stylify, there is nothing like a "theme". There are only variables that can be defined in two ways. If variable is used globally, put it in the global config:

const compilerConfig = {
    variables: {
        textColor: '#000',
        shadow: '0 4px 8px rgba(0,0,0,.16)'
    }
}

If it is used locally, configure it within a comment in a file where it is used using content options. It expects javascript object without surrounding brackets:

<!--
stylify-variables
    textColor: '#000',
    shadow: '0 4px 8px rgba(0,0,0,.16)'
/stylify-variables
-->

You can reuse these variables in multiple places like this:

<span class="color:$textColor box-shadow:$shadow">Hello World!</span>

When you need to modify the font or color based on screen or color theme preference, use CSS variables to flexibly change colors, font sizes, background and other properties, based on screen and media query. This will decrease the number of selectors and will simplify the refactoring.

const compilerConfig = {
    // CSS variables are note enabled by default in Stylify
    replaceVariablesByCssVariables: true,
    // https://stylifycss.com/docs/stylify/compiler#variables
    variabels: {
        textFontSize: '12px',
        textColor: '#000',
        // Tries to match a screen, can be sm, md, lg...
        minw400px: {
            textFontSize: '18px'
        },
        // For a @media (prefer-color-scheme: dark)
        dark: {
            textColor: '#fff'
        },
        // When screen is not found,
        // it falls back to a custom selector
        // in this case element with the ".dark" class
        // which will very probably be the root (html el)
        '.dark': {
            textColor: '#fff'
        },
    }
};

And in HTML:

<span class="font-size:$textFontSize color:$textColor"></span>

Tailwind has a Dark Mode guide in their docs, so make sure to check it out. In their case, you can use for example a class to switch themes.

Simplifying development using hooks

To eliminate some repetitive tasks, you can use the Stylify CSS Hooks system. Stylify provides various hooks within the Compiler, Bundler and Runtime.

These hooks can be used to attach listeners, with which you can for example:

Dynamically generate a style guide
Modify/Convert/Extend values of new selector matches
Modify bundler output
Trigger some callback within a browser, when Stylify generates initial CSS
Etc...

Below is an example of a hook, that listens to a new macro match for font-size. This hook checks, whether the font size value is in the allowed range and converts px units to REM. It also attaches correct line height so we don't have to add line-height selector every time we want to use font-size selector:

import { hooks } from '@stylify/stylify';

// 1. Create a function, that will work with font-size property
const fontSizeHandler = ({ selectorProperties }) => {
    const propertyValue = selectorProperties.properties['font-size'];

    // If value of the font is for example a default reset to REM, do nothing
    // Or, if the unit are not pixels for example
    if (propertyValue === '62.5%' || !propertyValue.endsWith('px')) {
        return;
    }

    const numberValue = Number(propertyValue.match(/^\d+/));
    // Let's create allowed font sizes
    const allowedFontSizes = {
        'Small text': 12,
        'Regular text': 16,
        'Large text': 20,
        'Subtitle': 24,
        'Title': 32,
        'Large title': 42,
        'Extra large title': 64
    }

    // If developer tries to use for example font-size:13px, it will throw an error
    if (!Object.values(allowedFontSizes).includes(numberValue)) {
        throw new Error(`Font size "${propertyValue}" is not allowed. Available values are "${JSON.stringify(allowedFontSizes)}".`);
    }

    const pixelFontSize = Number(pixelUnit.slice(0,-2));
    const remFontSize = pixelFontSize / 10;

    // Also, recalculate px to rem and add a correct line height
    // So we don't have to add it manually each time
    selectorProperties.addMultiple({
        'font-size': `${remFontSize}rem`,
        'line-height': `${remFontSize * (pixelFontSize >= 28 ? 1.2 : 1.7)}rem`
    });
}

// 2. Add it into the handlers
const newMacroMatchHandlers = {
    'font-size': fontSizeHandler
};

// 3. Add a hook that listens to new macro match, get's appropriate handler and calls it
hooks.addListener('compiler:newMacroMatch', ({ macroMatch, selectorProperties }) => {
    const selectorProperties = Object.keys(data.selectorProperties.properties);
    for (const selectorProperty of selectorProperties) {
        const handler = newMacroMatchHandlers[selectorProperty] ?? undefined;

        if (handler === undefined) {
            continue;
        }

        handler(data);
    }
});

CSS bundles splitting

Stylify CSS allows you to split CSS bundles basically for each file separately.
This feature brings increases the level of CSS optimization to the next level as the bundles can get very small.

Split CSS for App sections

Let's say, you have 2 app sections. One for the front of the website and another for admin/user dashboard.
For 2 sections, only 2 CSS files will be generated. The CSS for the frontend will not be loaded into admin and vice versa.

Split CSS for Layouts and pages

This way you have one CSS import for the layout and one for the page. When you load a page, the layout and page CSS will be loaded. This happens for every other page except the layout CSS is now cached.

CSS Layers and Scopes

If you decide to split CSS into multiple files for layouts/pages you might encounter a problem with overridden CSS selectors.

Luckily this problem has an easy solution. We use CSS layers and Scope to correct the specificity.

Tailwind has it's own solution for CSS layers so make sure to check their guide.

Stylify CSS provides CSS layers support within bundle configuration. This configuration can be used within Stylify Unplugin (for Next, React, Vue, Vite, SvelteKit, Symfony, Laravel, Nette and etc.) and Stylify Astro (Astro.build). Both of these packages use Stylify Bundler package under the hood.

Common configuration for Stylify Unplugin, Astro integration and Bundler:

const bundlerConfig = {
    cssLayersOrder: {
        // This will generate @layer layout,page;
        order: 'layout, page',
        // This tells Stylify to export the above layers order
        // only into bundles, that has layout CSS layer
        exportLayer: ['layout']
    },
};

const layoutBundle = {
    files: ['path/to/layout.html'],
    outputFile: 'path/to/layout.css',
    cssLayer: 'layout'
};

const pageBundle = {
    files: ['path/to/page.html'],
    outputFile: 'path/to/page.css',
    cssLayer: 'page'
};

const config = {
    bundler: bundlerConfig,
    bundles: [ layoutBundle, pageBundle ]
};

Usage of this configuration with unplugin:

import { stylifyVite, stylifyWebpack, stylifyEsbuild, stylifyRollup } from '@stylify/unplugin';

stylifyVite(config);
stylifyWebpack(config);
stylifyEsbuild(config);
stylifyRollup(config);

Example with Astro.build integration:

import stylify from '@stylify/astro';

export default {
    integrations: [stylify(config)]
}

Example with direct bundler usage:

import { Bundler } from '@stylify/bundler';

const bundler = new Bundler(config)
bundler.bundle();

await bundler.waitOnBundlesProcessed();

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

Do you have any other best practices you use? Is there anything missing in the docs? Doe's anything need more explanation?

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Also, a big thanks go to Posandu Mapa for his cooperation on this article!

Using Beautiful Material Themes from Material Theme Builder in Stylify CSS

Vladimír Macháček — Sat, 14 Jan 2023 15:51:36 +0000

Material Theme Builder is a tool with which you can easily generate Material Theme color palettes and typography sizes for your website.

Features:

✅ Theme colors can be generated from an uploaded image or by using their color picker.
✅ Configured theme can be exported into Theme.kt, XML, Dart, CSS and DSP.
✅ There is a nice preview of each color and a simple explanation how it should be used.
✅ Colors are generated for ligh/dark mode
✅ Web export is using CSS variables

This guide explains how to generate Material Theme, how to export it into CSS file and how to use it in Stylify CSS.

Playground

Stylify has prepared playground with Vite.js. You can check out the configuration and use it within your project.

The vite plugin configuration can be used within all integrations. This means for example Next.js, Nuxt.js, SvelteKit, Vite.js, Webpack and any other.

How to get a custom Material Theme

Generating the desired theme with the Material Theme Builder is simple:

Go to the Material Theme Builder website.
On the left side (on Desktop), click on the primary color.
The color generator dialog will appear. Select your favorite color.
Optionally, repeat this process for a secondary, tertiary and neutral color.
When you finish the configuration, in the top right corner, there is an export button
Click on it and select Web (CSS).
Download the file and extract it into your project.

In case you wonder, how to use each color, make sure to check out the section under the device preview. There are color palettes with the name of each color:

For example on-primary color should be used for text on primary color. This means for example a button with primary color background (purple) and on primary text color (white)
Colors are split for light/dark mode
The complete guide can be found in material theme docs

Integrating Material Theme into Stylify CSS

To finish the configuration process, you have to configure Stylify, so it knows, that variables starting with md- are external and that it has to replace variables with CSS variables instead of their value.

With Unplugin

This part is for @stylify/unplugin exports: stylifyVite, stylifyWebpack, stylifyEsbuild and stylifyRollup.

If you use the Unplugin in your project (Next.js, Nuxt.js, SvelteKit, Vite, Webpack, Rollup or any other), this guide is what you are looking for:

const stylifyConfig = {
    compiler: {
        replaceVariablesByCssVariables: true,
        externalVariables: [
            // Add external variables identifier
            // This one checks, if variable starts with md-.
            // If so, it is marked as external.
            // Do not add --md. Identifier methods works with Stylify variable name
            // and not CSS variable name. Stylify adds -- automatically
            // if CSS variables are enabled
            (variable) => {
                if (variable.startsWith('md-')) return true;
            }
        ]
    }
    // ...
};

stylifyVite(stylifyConfig);
stylifyWebpack(stylifyConfig);
stylifyRollup(stylifyConfig);
stylifyEsbuild(stylifyConfig);

Astro integration

The config is the same like for Unplugin.

stylify(stylifyConfig);

Bundler

In case you use @stylify/bundler directly, use the stylifyConfig from the above section about Unplugin Integration, but you have to pass it into the Bundler initialization.

const bundler = new Bundler({
    ...stylifyConfig
});

Usage

The final step is to import the generated theme into our project:

Extract the generated theme into your project.
Import the theme.css file into your project (make sure the directory is public). This file will import all other necessary files.

If you care about optimization a bit, this will also cause at least 4 HTTP requests because of the @import rules within the theme file.
You might want to copy the content of those other files into the theme.css file or merge them using some bundler to decrease the number of requests.

When the file is imported into your project, you can start using Material Theme CSS variables in Stylify CSS utilities.

<button class="
    border:none
    padding:8px_12px
    border-radius:24px

    background:$md-sys-color-primary
    color:$md-sys-color-on-primary
    display-large
">Material Button</button>

Cleanup

In case you plan to use Stylify CSS utilities only, then you can remove the colors.module.css. It contains utilities for color and background.

Apart from the colors module, there is a typography.module.css. You might want to remove it as well and rewrite these classes into Stylify CSS components using Stylify dynamic components syntax.

const stylifyConfig = {
    compiler: {
        components: {
            // Example for display class
            // This matches display-small/medium/large
            // and returns utilities dynamically based on the matched size
            'display-(small|medium|large)': ({ matches }) => `
                font-family:$md-sys-typescale-display-${matches[1]}-font-family-name
                font-style:$md-sys-typescale-display-${matches[1]}-font-family-style
                font-weight:$md-sys-typescale-display-${matches[1]}-font-weight
                font-size:$md-sys-typescale-display-${matches[1]}-font-size
                letter-spacing:$md-sys-typescale-display-${matches[1]}-tracking
                line-height:$md-sys-typescale-display-small-height
                text-transform:$md-sys-typescale-display-${matches[1]}-text-transform
                text-decoration:$md-sys-typescale-display-${matches[1]}-text-decoration
            `
        }
    }
}

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Also, a big thanks go to Oscar Lito M Pablo that came up with the idea to make this guide.

Stylify CSS: Code your SvelteKit website faster with CSS-like utilities

Vladimír Macháček — Mon, 02 Jan 2023 18:14:54 +0000

Stylify + SvelteKit. Style your SvelteKit website faster with Stylify. Don't study selectors and syntax. Use pure CSS syntax and get generated CSS with advanced optimization for production.

For easier start, you can check out the Stylify Stackblitz playground 🎮.

💎 Stylify CSS Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

✅ CSS-like selectors
✅ No framework to study
✅ Less time spent in docs
✅ Mangled & Extremely small CSS
✅ No CSS purge needed
✅ Components, Variables, Custom selectors
✅ It can generate multiple CSS bundles

🚀 SvelteKit Setup

The easiest way to Setup the SvelteKit is using CLI:

Run yarn create svelte@latest
Then cd app

This way you will get the default SvelteKit application skeleton.

🔌 Stylify CSS Integration

Install the @stylify/unplugin package using NPM or Yarn:

yarn add @stylify/unplugin
npm i @stylify/unplugin

Open the vite.config.js and copy the following content into it:

import { sveltekit } from '@sveltejs/kit/vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
    bundles: [{
        outputFile: './src/stylify.css',
        files: ['./src/**/*.svelte'],
    }]
});

const config = {
    plugins: [
        stylifyPlugin,
        sveltekit(),
    ]
};

export default config;

The last step, create src/routes/+layout.svelte with the following content stylify.css:

<script>
    import '../stylify.css';
</script>

<slot />

In case, you have created more bundles, for example for pages, you have to add paths to those generated CSS files into correct Svelte files.

Styling the website

If you copy the code below into the src/routes/+page.svelte and run yarn dev you will get a styled Hello World! 🎉 text:

<main class="max-width:800px margin:0_auto">
    <h1 class="text-align:center margin-top:100px font-size:42px">
        Hello World! 🎉
    </h1>
</main>

Stylify watches any change in the files that matches the mask in the bundle files and generates CSS into the src/stylify.css.

If you add for example color:blue the CSS will be automatically updated 🎉.

Go ahead and try Stylify CSS directly on Stackblitz.com 💡.

Components

To avoid bloated templates with utilities, you can use
components directly in files, where they are used through content options (expects javascript object without brackets) or in the compiler config.

<!--
stylify-components
  container: 'max-width:800px margin:0_auto',
  title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
-->
<main class="container">
    <h1 class="title">
        Hello World! 🎉
    </h1>
</main>

Variables

If you like clean code, you also want to avoid hardcoded values in selectors. Variables can be defined in the same way as components:

<!--
stylify-variables
  titleFontSize: '42px',
  containerWidth: '800px'
/stylify-variables

stylify-components
  container: 'max-width:$containerWidth margin:0_auto',
  title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
-->
<main class="container">
    <h1 class="title">
        Hello World! 🎉
    </h1>
</main>

Building for production

If you run yarn build + yarn preview, the svelte markup will be mangled into this:

<main class="a">
    <h1 class="b">
        Hello World! 🎉
    </h1>
</main>

The CSS is shortened too:

:root {--titleFontSize: 42px;--containerWidth: 800px;}
.c,.a{max-width:800px}
.d,.a{margin:0 auto}
.e,.b{text-align:center}
.f,.b{margin-top:100px}
.g,.b{font-size:42px}

Stackblitz Playground

Go ahead and try Stylify CSS + SvelteKit on Stackblitz.

You can customize the build above however you want.

Configuration

The examples above don't include everything Stylify can do:

Define components
Add custom selectors
Configure your macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

Feel free to check out the docs to learn more 💎.

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Stylify CSS: Code your Remix website faster with CSS-like utilities

Vladimír Macháček — Thu, 29 Dec 2022 16:50:29 +0000

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

✅ CSS-like selectors
✅ No framework to study
✅ Less time spent in docs
✅ Mangled & Extremely small CSS
✅ No CSS purge needed
✅ Components, Variables, Custom selectors
✅ Split CSS for pages/layouts

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Installation

Because Remix doesn't have any plugins support yet (2022), we need to use Stylify CSS Bundler directly.

So let's install the @stylify/bundler package first using NPM or Yarn:

npm i -D @stylify/bundler
yarn add -D @stylify/bundler

Also for the watch mode, we need to run two parallel tasks. This can be solved using concurrently:

yarn add -D concurrently
npm i concurrently

Next, create a file, for example stylify.js:

const { Bundler } = require('@stylify/bundler');

const isDev = process.argv[process.argv.length - 1] === '--w';
const bundler = new Bundler({
    watchFiles: isDev,
    // Optional
    compiler: {
        mangleSelectors: !isDev,
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    }
});

// This bundles all CSS into one file
// You can configure the Bundler to bundle CSS for each page separately
// See bundler link below
bundler.bundle([
  { files: ['./app/**/*.tsx'], outputFile: './app/styles/stylify.css' },
]);

When the bundler is configured, add the path to Stylify CSS in the app/root.tsx:

import styles from '~/styles/stylify.css';

export function links() {
  return [{ rel: 'stylesheet', href: styles }];
}

And the last step is to add scripts into the package.json:

"scripts": {
    "build": "yarn stylify:build & cross-env NODE_ENV=production remix build",
    "dev": "concurrently 'yarn stylify:dev' 'cross-env NODE_ENV=development remix dev'",
    "stylify:build": "node stylify.js",
    "stylify:dev": "node stylify.js --w"
}

Styling First Page

If we now edit the app/routes/index.tsx and run the yarn dev command, the CSS will be generated:

export default function Index() {
    return (
        <h1 className="font-size:48px font-family:arial color:steelblue">
            Stylify + Remix = 🚀
        </h1>
    );
}

Defining Components and Variables

We can also define Components and Variables. Within a file, where they are used or in a global config.
In the code below, we use the configuration within a file, where the component is used.

/*
stylify-variables
    blue: 'steelblue'
/stylify-variables

stylify-components
    title: 'font-size:48px font-family:arial color:$blue'
stylify-components
*/
export default function Index() {
    return (
        <h1 className="title">
            Stylify + Remix = 🚀
        </h1>
    );
}

Production CSS and JSX output

The JSX and CSS can be mangled in production (configured by the compiler.mangleSelectors). If so, the output is even smaller and looks similar to the one below.

For the first example with utilities

export default function Index() {
    return (
        // For utilities from first example
        <h1 className="a b c">
            Stylify + Remix = 🚀
        </h1>
    );
}

.a { font-size:48px }
.b { font-family:arial }
.c { color:steelblue }

Stackblitz Playground

Go ahead and try Stylify CSS + Remix on Stackblitz.

You can customize the build above however you want.

Configuration

The examples above don't include everything Stylify can do:

Define components
Add custom selectors
Configure your macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

Feel free to check out the docs to learn more 💎.

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build

Vladimír Macháček — Tue, 13 Dec 2022 20:06:57 +0000

Utility first CSS bundles can be very small. But what if, we could make them even smaller? Split them for each page/layout for example? Some pages might not need styles from another one. Learn how to split CSS bundles in Astro.build automatically using Stylify CSS.

Video Guide

Stylify CSS introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

✨ CSS-like selectors
💎 No framework to study
💡 Less time spent in docs
🧰 Mangled & Extremely small CSS
🤘 No purge needed
🚀 Components, Variables, Custom selectors
📦 It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Motivation

Each bundle can contain only necessary CSS. This means almost zero unused CSS and in production, it can be mangled and minified, so the CSS is even smaller (more info below).

The code

Ok, first the code, then the explanation. This code uses Stylify Astro Integration and the snippet can be found on Stylify Astro Snippets section. Even though the code can look complicated, it is actually pretty simple:

import stylify from '@stylify/astro';
import { hooks } from '@stylify/bundler';
import fastGlob from 'fast-glob';
import path from 'path';
import fs from 'fs';
import { fileURLToPath } from 'url';

const pagesDir = 'src/pages';
const layoutsDir = 'src/layouts';
const stylesDir = 'src/styles';

/** @type { import('@stylify/bundler').BundlerConfigInterface[]} */
const stylifyBundles = [];
const layoutCssLayerName = 'layout';
const pageCssLayerName = 'page';

const getFileCssLayerName = (filePath) =>
  filePath.includes('/pages/') ? pageCssLayerName : layoutCssLayerName;

const getOutputFileName = (file) => {
  const parsedFile = path.parse(file);
  const fileName = parsedFile.name.toLowerCase();
  const dirNameCleanupRegExp = new RegExp(`${pagesDir}|${layoutsDir}|\\W`, 'g');
  const dir = parsedFile.dir.replace(dirNameCleanupRegExp, '');
  return `${dir.length ? `${dir}-` : ''}${fileName}.css`;
};

const createBundle = (file) => {
  const fileCssLayerName = getFileCssLayerName(file);

  return {
    outputFile: `${stylesDir}/${fileCssLayerName}/${getOutputFileName(file)}`,
    files: [file],
    cssLayer: fileCssLayerName,
  };
};

const createBundles = (files) => {
  for (const file of files) {
    stylifyBundles.push(createBundle(file));
  }
};

// 1. Map files in layouts/pages and create bundles
createBundles(fastGlob.sync(`${pagesDir}/**/*.astro`));
createBundles(fastGlob.sync(`${layoutsDir}/**/*.astro`));

// 2. Init Stylify Astro Integraton
const stylifyIntegration = stylify({
  bundler: {
    id: 'astro',
    // Set CSS @layers order
    cssLayersOrder: {
      // Order will be @layer layout,page;
      order: [layoutCssLayerName, pageCssLayerName].join(','),
      // Layers order will be exported into file with layout @layer
      exportLayer: [layoutCssLayerName],
    },
  },
  bundles: stylifyBundles,
});

// 3. Add hook that processes opened files
/** @param { import('@stylify/bundler').BundleFileDataInterface } data */
hooks.addListener('bundler:fileToProcessOpened', (data) => {
  let { content, filePath } = data;

  // 3.1 Only for layout and page files
  if (filePath.includes('/pages/') || filePath.includes('/layouts/')) {
    const cssFilePathImport = `import '/${stylesDir}/${getFileCssLayerName(
      filePath
    )}/${getOutputFileName(filePath)}';`;

    if (!content.includes(cssFilePathImport)) {
      if (/import \S+ from (?:'|")\S+(\/layouts\/\S+)(?:'|");/.test(content)) {
        content = content.replace(
          /import \S+ from (?:'|")\S+\/layouts\/\S+(?:'|");/,
          `$&\n${cssFilePathImport}`
        );
      } else if (/^\s*---\n/.test(content)) {
        content = content.replace(/^(\s*)---\n/, `$&${cssFilePathImport}\n`);
      } else {
        content = `---\n${cssFilePathImport}\n---\n${content}`;
      }

      fs.writeFileSync(filePath, content);
    }
  }

  // 3.2 For all files
  const regExp = new RegExp(
    `import \\S+ from (?:'|")\\S+(\\/components\\/\\S+)(?:'|");`,
    'g'
  );
  let importedComponent;
  const importedComponentFiles = [];
  const rootDir = path.dirname(fileURLToPath(import.meta.url));

  while ((importedComponent = regExp.exec(content))) {
    importedComponentFiles.push(
      path.join(rootDir, 'src', importedComponent[1])
    );
  }

  data.contentOptions.files = importedComponentFiles;
});

// 4. Wait for bundler to initialize and watch for directories
// to create new bundles when a file is added
hooks.addListener('bundler:initialized', ({ bundler }) => {
  // Watch layouts and pages directories
  // If you plan to use nested directories like blog/_slug.astro
  // for which you want to automatize bundles configuration
  // You will need to add the path to them here
  const dirsToWatchForNewBundles = [layoutsDir, pagesDir];
  for (const dir of dirsToWatchForNewBundles) {
    fs.watch(dir, (eventType, fileName) => {
      const fileFullPath = path.join(dir, fileName);

      if (eventType !== 'rename' || !fs.existsSync(fileFullPath)) {
        return;
      }

      bundler.bundle([createBundle(fileFullPath)]);
    });
  }
});

export default {
  // 5. Add Stylify Astro Integration
  integrations: [stylifyIntegration]
};

How it works

The code above is split into 5 steps:

It finds all pages in src/pages and all layouts in src/layouts and calls the createBundles to create bundles configuration for us with the correct layer name and output file.
The Stylify integration is initialized and CSS layers order is configured so it will generate the order only into a file, that has the layout CSS layer name.
bundler:fileToProcessOpened hook is added. This hook has two parts. One part is done, when this file is a layout or a page and the another for every opened file.
- When a layout or a page file is opened, it checks, whether it contains a path to CSS file and if not, it adds it to the head of the file.
- For all other files, it tries to check for imports. If any component import is found, it maps it as a dependency. This way it can map a whole components dependency tree automatically so you just keep adding/removing them and the CSS is generated correctly
When Bundler is initialized we can start watching for newly added files within the layout and pages directory. Every time a new file is added, we create a new Bundle.
The Stylify Integration is added to the Astro config.

When we run the dev command, Stylify will do the following:

Map layout/page files
Generate CSS into correct files, wrap the content into the correct CSS layer and adds links to these files into Astro templates.
If a new file in layout/pages is created a new bundle is automatically added

And how does the output looks for production?
Layout (src/layouts/Layout.astro):

@layer layout,page;
@layer layout {.b{font-size:16px}}

Page (src/pages/index.astro):

@layer page {.a{color:darkblue}}

Integration example

Check out the interactive example on Stack Blitz.

Configuration

The examples above don't include everything Stylify can do:

Define components
Add custom selectors
Configure your macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

Feel free to check out the docs to learn more 💎.

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Stylify CSS: Code your Laravel website faster with CSS-like utilities

Vladimír Macháček — Thu, 08 Dec 2022 10:02:45 +0000

Code your Laravel website faster with Stylify CSS-like utilities. Don't study CSS framework. Focus on coding.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

✨ CSS-like selectors
💎 No framework to study
💡 Less time spent in docs
🧰 Mangled & Extremely small CSS
🤘 No purge needed
🚀 Components, Variables, Custom selectors
📦 It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Installation

This article uses Laravel with Vite. For older versions with Webpack, check out this guide.

Install Stylify using CLI:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Add the following configuration into vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
    // You can define multiple bundles, This example uses only one for simplicity
    bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],
    // Optional - https://stylifycss.com/docs/unplugin
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    }
});

export default defineConfig(() => ({
    plugins: [
        stylifyPlugin,
        laravel({
            // Add path to generated files
            input: ['resources/js/app.js', 'resources/css/stylify.css'],
            refresh: true,
        }),
    ],
}));

Add the path to resources/css/stylify.css into the template:

<head>
    @vite('resources/css/stylify.css')
</head>

In case you define more than one bundle in stylifyVite plugin, make sure to import generated CSS files on correct pages.

Usage

Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.

So if we edit the resources/views/welcome.blade.php:

<div class="text-align:center font-size:48px color:blue">Stylify + Laravel = 🚀</div>

In production, you will get optimized CSS and mangled HTML:

<div class="a b c">Stylify + Laravel = 🚀</div>

.a{text-align:center}
.b{font-size:48px}
.c{color:blue}

Integration example

You can also check out our Laravel integration example on Github.

Configuration

The examples above don't include everything Stylify can do:

Define components
Add custom selectors
Configure your macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

Feel free to check out the docs to learn more 💎.

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Style your Angular website faster with Stylify CSS

Vladimír Macháček — Mon, 28 Nov 2022 14:26:12 +0000

Style your Angular app quickly and easily with Stylify CSS. Split CSS for large pages or create one bundle for a whole app and get extremely small CSS.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

✨ CSS-like selectors
💎 No framework to study
💡 Less time spent in docs
🧰 Mangled & Extremely small CSS
🤘 No purge needed
🚀 Components, Variables, Custom selectors
📦 It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Installation

First install the @stylify/bundler package using NPM or Yarn:

npm i -D @stylify/bundler
yarn add -D @stylify/bundler

Also for the watch mode, we need to run two paralel tasks. This can be solved using concurrently:

yarn add -D concurrently
npm i concurrently

Next, create a file, for example stylify.js:

const { Bundler } = require('@stylify/bundler');

const isDev = process.argv[process.argv.length - 1] === '--w';
const bundler = new Bundler({
  watchFiles: isDev,
  // Optional
  compiler: {
    mangleSelectors: !isDev,
    // https://stylifycss.com/docs/stylify/compiler#variables
    variables: {},
    // https://stylifycss.com/docs/stylify/compiler#macros
    macros: {},
    // https://stylifycss.com/docs/stylify/compiler#components
    components: {},
    // ...
  },
});

// This bundles all CSS into one file
// You can configure the Bundler to bundle CSS for each page separately
// See bundler link bellow
bundler.bundle([
    {
        files: ['./src/**/*.html', './src/**/*.ts'],
        outputFile: './src/styles.css',
    },

    // You can also split css for each component
    // You can map files within the components using content comment option
    // https://stylifycss.com/docs/bundler#files-content-option
    // Stylify takes that option and searches for defined files. If defined file
    // also has an option, id check also those files and so long.
    // This way it maps all files and all dependencies.
    /*
    {
        files: ['./src/app/app.component.*'],
        outputFile: './src/app/app.component.css',
    },
    */
]);

If you don't use splitting and everything will not bundled into the styles.css, then don't forget to add paths to css files.

The last step is to add scripts into the package.json:

"scripts": {
    "dev": "concurrently 'yarn stylify.dev' 'ng serve -c development'",
    "prod": "yarn stylify.build & ng serve",
    "stylify.build": "node stylify.js",
    "stylify.dev": "node stylify.js --w"
}

In production, you will get optimized CSS and mangled html:

<h1 class="font-size:24px color:#dd0031 font-family:arial">
Hello World!
</h1>

.a{font-size:24px}
.b{color:#dd0031}
.c{font-family:arial}

Stackblitz Playground

Go ahead and try Stylify CSS + Angular on Stackblitz.

Configuration

The examples above doesn't include everything Stylify can do:

Define components
Add custom selectors
Configure own macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

Feel free to checkout the docs to learn more 💎.

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will also be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.

Style your SolidJS website faster with StylifyCSS

Vladimír Macháček — Tue, 22 Nov 2022 08:21:40 +0000

Style your SolidJS app quickly and easily without CSS-in-JS using Stylify CSS CSS-like utilities.

Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

✨ CSS-like selectors
💎 No framework to study
💡 Less time spent in docs
🧰 Mangled & Extremely small CSS
🤘 No purge needed
🚀 Components, Variables, Custom selectors
📦 It can generate multiple CSS bundles

Also we have a page about what problems Stylify CSS solves and why you should give it a try!

Installation

Install Stylify using cli:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Add the following configuration into vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
    bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
    // Optional
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    },
});

export default defineConfig({
    plugins: [stylifyPlugin, solidPlugin()],
    server: {
        port: 3000,
    },
    build: {
        target: 'esnext',
    },
});

Add Stylify CSS in src/index.js:

import './stylify.css';

Usage

Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.

So if we edit the src/App.jsx:

function App() {
  return (
    <h1 class="font-size:24px margin:12px_24px">
      Hello World!
    </h1>
  );
}

export default App;

In production, you will get optimized CSS and mangled html:

<h1 class="p u">Hello World!</h1>

.p{font-size: 24px}
.u{margin: 12px 24px}

Stackblitz Playground

Go ahead and try Stylify CSS + SolidJS on Stackblitz.

Configuration

The examples above doesn't include everything Stylify can do:

Define components
Add custom selectors
Configure own macros like ml:20px for margin-left
Define custom screens
You can map nested files in the template
And a lot more

Feel free to checkout the docs to learn more 💎.

Let me know what you think!

If you like the idea, let me know that by starring Stylify repo ❤️.

I will also be happy for any feedback! The Stylify is still a new Library and there is a lot of space for improvement 🙂.