DEV Community

Nicola
Nicola

Posted on

2

JSSheet - A javascript to css parser

Hi to all!

I'm working on my free time on a personal project called jssheet.

This project was created to learn how to use gulp and how to create a custom css precompiled stylesheet using javascript.

You can take a look to a realtime demo here:
https://nicolalc.github.io/jssheet/

Currently this is still a WIP but I think this could be really useful in the future.

The goal is: I want to write logic and style with the same language .

JSSheet has this purpose, use JavaScript for styling and logic.

This is an example of implementation:

const { fonts, layout, colors } = require("../variables");
const headersProps = {
    margin: layout.itemsMargin,
    color: colors.secondary,
    fontFamily: fonts.secondary,
}
const generics = [
    {
        selector: "h1",
        display: 'block',
        whiteSpace: 'pre-wrap',
        fontSize: fonts.sizes.h1,
        ...headersProps,
        transition: "all .1s ease-out",
        children: [
            {
                selector: ":hover",
                letterSpacing: `.5rem`,
                cursor: "default"
            }
        ]
    },
    {
        selector: "h2",
        fontSize: fonts.sizes.h2,
        ...headersProps
    },
    {
        selector: "h3",
        fontSize: fonts.sizes.h3,
        ...headersProps
    },
    {
        selector: "::-webkit-scrollbar",
        width: ".25rem",
        height: ".25rem",
    },
    {
        selector: "::-webkit-scrollbar-thumb",
        background: colors.tertiary
    },
    {
        selector: "p",
        fontSize: fonts.sizes.p,
        fontFamily: fonts.secondary,
        margin: layout.itemsMargin
    },
    {
        selector: "pre",
        background: colors.dark,
        color: "white",
        margin: 0,
        maxWidth: '95%',
        padding: layout.itemsPadding,
        borderRadius: layout.borderRadius,
        fontFamily: fonts.main,
        children: [
            {
                selector: "b",
                color: colors.secondary
            },
            {
                selector: "code",
                fontFamily: fonts.main,
                display: 'block',
                whiteSpace: 'pre-wrap'
            }
        ]
    },
    {
        selector: "ul",
        padding: 0,
        margin: 0,
        children: [
            {
            selector: "li",
            padding: 0,
            margin: 0
            }
        ]
    },
    {
        selector: 'a',
        color: colors.secondary,
        textDecoration: 'none'
    }
];

module.exports = {
    generics
};
Enter fullscreen mode Exit fullscreen mode

As you can see, using Javascript we can reuse portions of css for different selectors, or define global shared variables wich could include static or dinamic values.

The coolest feature I've added in this project is the "align" property, with a single line of code you can create complex flexbox layouts.

For example the following:

[...]
align: "center column",
[...]
Enter fullscreen mode Exit fullscreen mode

will produce the following css:

[...]
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
[...]
Enter fullscreen mode Exit fullscreen mode

So it's a cool shortcut to handle flexbox layout and to prototype your website layout fast!

Remember, this is a early WIP project so it's not completed, the documentation is pretty missing.

Feel free to give advice, tips and opinions, and if you want to collaborate just fork this github: https://github.com/NicolaLC/js-sheet

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (3)

Collapse
 
alohci profile image
Nicholas Stimpson

Nice start. Any idea how you'll add media queries?

Collapse
 
nicolalc profile image
Nicola

I'm still thinking about a solution.
The first idea in my mind is the following:

Add a mediaQuery property for an object:

{
  [...]
  mediaQuery: [
    selector: 'screen and (max-width: 600px)',
    ...props
  ]
}

So this will render a @media rule for each object.

What do you think about this proposal?

Another solution is to create a separate jss file (e.g. body-600.js) wich defines the media query for the body partial.

Collapse
 
nicolalc profile image
Nicola

I've done it, you can find the new mq management here:
github.com/NicolaLC/js-sheet/commi...

Now if yout take a look to the website ( nicolalc.github.io/jssheet/ ) you will see a MediaQuery helper at the bottom right side of the window, wich will change with the screen size.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more