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
};

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",
[...]

will produce the following css:

[...]
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
[...]

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

Comments

[Nicholas Stimpson]

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

[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.

[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.