JSSheet - A javascript to css parser
#javascript#gulp#css#github
Nicola

Nicola @nicolalc

About: Sr. Frontend Software Engineer, creating user interfaces for Game and Web applications. UX and design passionate.

Location:
Italy
Joined:
Aug 5, 2019

JSSheet - A javascript to css parser

Publish Date: Aug 7 '19
5 3

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

Comments 3 total

  • Nicholas Stimpson
    Nicholas StimpsonAug 7, 2019

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

    • Nicola
      NicolaAug 7, 2019

      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
      NicolaAug 7, 2019

      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.

Add comment