NAXCSS_CACHE styles inverted?

[baptistecs]

Hi,

Thanks a lot for this library!

I don't know if I did something wrong but it seems that NAXCSS_CACHE is inverted (at least it is on my project 🙃).

I have to do something like this to get the styles in the right order:

let styles = ''
Array.from(NAXCSS_CACHE).reverse().forEach(c => (styles += c[1].css))

[baptistecs]

Actually the order of the styles are not respected inside the groups (even in reverse order as the reverse order only reverse the groups and not the styles inside them):

globalCss('projectZ', {
    '*': {
        '-webkit-tap-highlight-color': 'transparent',
    },
    'a, body': {
        fontFamily: 'Arial, sans-serif',
        fontSize: '16px',
        fontWeight: 400,
        margin: 0,
        color: '#000',
    },
    'h1, main, footer small': {
        margin: '8px',
        minHeight: '48px',
        display: 'flex',
        alignItems: 'center',
    },
    button: {
        cursor: 'pointer',
    }
})

css({
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    background: '#468',
    color: '#fff',
    marginBottom: '8px',
    minHeight: '48px',
    '& p': {
        margin: 0,
        padding: '0 8px',
    },
    '& button': {
        width: '48px',
        height: '48px',
        border: 0,
        background: 'none',
        color: '#fff',
        fontSize: '24px',
    }
})

css({
    margin: '8px 0',
    '& a': {
        textDecoration: 'none',
        padding: '0 8px',
    },
    '&, & ul': {
        display: 'flex',
        listStyle: 'none',
        margin: 0,
        gap: '8px',
        position: 'relative',
        lineHeight: '48px',
        borderRadius: '4px',
        padding: '0',
        flexGrow: 1,
    },
    '& ul': {
        '& a': {
            display: 'inline-block',
            padding: '0',
        },
    },
    '& #nav-btn': {
        display: 'none',
        marginLeft: 'auto',
        overflow: 'hidden',
        '& .bar1, & .bar2, & .bar3': {
            width: '21px',
            height: '3px',
            backgroundColor: '#000',
            margin: '4px 0',
            transition: '.6s, opacity 1.2s',
        },
        '&.nav-btn--open': {
            '& .bar1': {
                transform: 'translate(2px, 7px) rotate(-45deg)',
            },
            '& .bar2': {
                transform: 'translate(21px, 0)',
                transition: 'opacity 0s',
                opacity: 0,
            },
            '& .bar3': {
                transform: 'translate(2px, -7px) rotate(45deg)',
            },
        },
    },

let styles = ''
NAXCSS_CACHE.forEach(c => {
    styles += c.css
    console.log('HERE', c.css)
})

gives both inverted order of groups of styles and unordered styles in the groups:

HERE .css-pe3pet{margin:8px 0;}.css-pe3pet #nav-btn{display:none;margin-left:auto;overflow:hidden;}.css-pe3pet #nav-btn.nav-btn--open .bar3{transform:translate(2px, -7px) rotate(45deg);}.css-pe3pet #nav-btn.nav-btn--open .bar2{transform:translate(21px, 0);transition:opacity 0s;opacity:0;}.css-pe3pet #nav-btn.nav-btn--open .bar1{transform:translate(2px, 7px) rotate(-45deg);}.css-pe3pet #nav-btn .bar1, .css-pe3pet #nav-btn .bar2, .css-pe3pet #nav-btn .bar3{width:21px;height:3px;background-color:#000;margin:4px 0;transition:.6s, opacity 1.2s;}.css-pe3pet ul a{display:inline-block;padding:0;}.css-pe3pet, .css-pe3pet ul{display:flex;list-style:none;margin:0px;gap:8px;position:relative;line-height:48px;border-radius:4px;padding:0;flex-grow:1;}.css-pe3pet a{text-decoration:none;padding:0 8px;}

HERE .css-1c1oeta{display:flex;justify-content:space-between;align-items:center;background:#468;color:#fff;margin-bottom:8px;min-height:48px;}.css-1c1oeta button{width:48px;height:48px;border:0px;background:none;color:#fff;font-size:24px;}.css-1c1oeta p{margin:0px;padding:0 8px;}

HERE *{-webkit-tap-highlight-color:transparent;}a, body{font-family:Arial, sans-serif;font-size:16px;font-weight:400;margin:0px;color:#000;}h1, main, footer small{margin:8px;min-height:48px;display:flex;align-items:center;}button{cursor:pointer;}

let styles = ''
Array.from(NAXCSS_CACHE).reverse().forEach(c => {
    styles += c[1].css
    console.log('HERE', c[1].css)
 })

gives unordered styles in the groups as previously shown:

HERE *{-webkit-tap-highlight-color:transparent;}a, body{font-family:Arial, sans-serif;font-size:16px;font-weight:400;margin:0px;color:#000;}h1, main, footer small{margin:8px;min-height:48px;display:flex;align-items:center;}button{cursor:pointer;}

HERE .css-1c1oeta{display:flex;justify-content:space-between;align-items:center;background:#468;color:#fff;margin-bottom:8px;min-height:48px;}.css-1c1oeta button{width:48px;height:48px;border:0px;background:none;color:#fff;font-size:24px;}.css-1c1oeta p{margin:0px;padding:0 8px;}

HERE .css-pe3pet{margin:8px 0;}.css-pe3pet #nav-btn{display:none;margin-left:auto;overflow:hidden;}.css-pe3pet #nav-btn.nav-btn--open .bar3{transform:translate(2px, -7px) rotate(45deg);}.css-pe3pet #nav-btn.nav-btn--open .bar2{transform:translate(21px, 0);transition:opacity 0s;opacity:0;}.css-pe3pet #nav-btn.nav-btn--open .bar1{transform:translate(2px, 7px) rotate(-45deg);}.css-pe3pet #nav-btn .bar1, .css-pe3pet #nav-btn .bar2, .css-pe3pet #nav-btn .bar3{width:21px;height:3px;background-color:#000;margin:4px 0;transition:.6s, opacity 1.2s;}.css-pe3pet ul a{display:inline-block;padding:0;}.css-pe3pet, .css-pe3pet ul{display:flex;list-style:none;margin:0px;gap:8px;position:relative;line-height:48px;border-radius:4px;padding:0;flex-grow:1;}.css-pe3pet a{text-decoration:none;padding:0 8px;}

I use version 2.5.2

[baptistecs]

The group order was because of my import order but the order of the styles inside the groups are not respected

[baptistecs]

I found a library even more lighter and compatible with media queries (goober.js), unfortunately I won't use naxcss for this project