Why Tailwind, if I can create my own CSS Generator from scratch.

Deyvison Borges — Wed, 19 Jul 2023 13:34:08 +0000

No more using Tailwind!

Understand the following, Functional CSS has been around for a while...

Conceptually, Functional CSS is a technique that aims to reuse css code.
This technique consists of bringing small snippets of classes with pre-assigned selectors. Thus, you have a greater ease in working.

Example.

  .bg-red { background-color: red };
  .pb-20 { padding-bottom: 20px };

I have a utility class that when using it in my element, it will inherit its style behaviors.

So I can grow my HTML code faster.

The cool thing is that it's very semantic and sometimes you don't even need to know all the classes.
If you set it, for example, every 4 pixels, you will magically understand that pb-24 means padding-bottom: 24px.

The result would be:

<div class="pb-24 bg-red">

Are we going to create our own tool to generate Functional CSS in an intelligent way?
Let's go.
Create a project called mycss.
Inside it install the following development dependencies:

npm i typescript @types/node --save-dev

Create a file called meucss.config.ts (in object format).

This file will be responsible for having all the classes that we configure to work and, in the build process, it will only generate that css that you specified.

// meucss.config.ts

export const meuCSSConfig = {
  classes: {
    "flexd-row": "row", // flex direction row
    "flexd-column": "column", // flex direction column
    "flexa-center": "align-center" // flex align center
    "px-20": "20px", // padding horizontal
    "mr-29": "29px", // margin right
  },
}

See that I informed some usage classes. Just for us to play.
Now let's use this in a project.

I'm going to create our global theme, so we can use these classes intelligently in our code.

import { meuCSSConfig } from "./meucss.config";

export function theme(props: typeof meuCSSConfig[]) {
  const clearClasses = new Set(...props)
  return [...clearClasses].join(" ");
}

See it being applied in a React project.


import React from "react";
import styles from "./styles";

import { Flex } from "./button-group";

const MyComponent = () => {
  return (
    <div>
      {/* this is a declarative styled component */}
      <Flex moreOptions={["flexd-column", "flexa-center"]}>
        <div className={} />
      </Flex>
    </div>
  );
};

See how great our smart code turned out.

Now let's try to come up with the idea of a converter for this object, to generate our .css file from our settings.

I'll just leave a taste of how it can be and I hope you guys evolve the code, all right?

// geradorDoCss.ts
import { meuCSSConfig } from "./meucss.config";
import * as fs from 'fs';

export function convertToCSS(config: typeof meuCSSConfig): string {
  let cssRules = '';

  const classes  = config.classes

  for (const className in classes) {
    const cssValue = className;
    const cssRule = `.${className} { ${cssValue} }\n`;
    cssRules += cssRule;
  }



  fs.writeFile('styles.css', cssRules, (err) => {
    if (err) {
      console.error('Erro ao escrever o arquivo styles.css:', err);
      return;
    }
    console.log('Arquivo styles.css gerado com sucesso!');
  });

  return cssRules;
}

lets test?

// test.ts

import { convertToCSS } from "./convertToCSS";
import { meuCSSConfig } from "./meucss.config";

convertToCSS(meuCSSConfig)

Running command

npx tsc test.ts && node test.js

Completed code in:

Create Dropdown Menu with Pure HTML and CSS

Deyvison Borges — Sat, 08 Oct 2022 04:52:27 +0000

DEV Community: Deyvison Borges

Why Tailwind, if I can create my own CSS Generator from scratch.

Create Dropdown Menu with Pure HTML and CSS