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
Top comments (2)
Not sure if I got this straight. So you would need to write a class/ alias for every individual style. What is the benefit?
Through a typescript file you can create your own style sheet of your css functions.
You wouldn't need Tailwind and all its configuration.
Vode can simply arrive at the same idea, with fewer lines of code and more control.