Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 06 22:02
    MadLittleMods closed #103
  • Oct 06 22:02
    MadLittleMods commented #103
  • Oct 06 22:01
    MadLittleMods edited #103
  • Oct 06 22:00
    MadLittleMods commented #102
  • Oct 06 21:56
    MadLittleMods commented #107
  • Oct 06 21:54
    MadLittleMods commented #108
  • Oct 06 21:53
    MadLittleMods edited #108
  • Sep 27 18:55
    runar commented #109
  • Sep 27 18:07
    MadLittleMods commented #109
  • Sep 27 18:07
    MadLittleMods commented #109
  • Sep 27 17:59
    runar commented #109
  • Sep 27 17:50
    MadLittleMods commented #109
  • Sep 27 17:49
    MadLittleMods closed #109
  • Sep 27 17:49
    MadLittleMods commented #109
  • Sep 27 17:46
    runar commented #109
  • Sep 27 17:45
    runar edited #109
  • Sep 27 17:43
    MadLittleMods commented #109
  • Sep 27 17:43
    MadLittleMods commented #109
  • Sep 27 17:42
    runar opened #109
  • Sep 27 12:00
    fredrikekelund commented #92
Eric Eastwood
@MadLittleMods
:wave:
Isiah Meadows
@isiahmeadows
Hi. Found it! :smile:
Eric Eastwood
@MadLittleMods
Heya, very late for me
Isiah Meadows
@isiahmeadows
Me, too (3:42 AM)
Isiah Meadows
@isiahmeadows

I've just had tons of things going on lately making it impossible to meet:

  • June 7 (yesterday): we get 2 new kittens when we were planning on getting them yesterday.
  • June 6: releasing a new version of Thallium, but accidentally screwing up things with npm.
  • June 5: my little brother's birthday.
  • June 4: Independence Day (I live in the US)
  • June 3: working on fixing a broken part of Thallium, pushing the broken version gated with .npmignore and comments.

All this while periodically keeping tabs on this, where I'm an active Mithril contributor and committer. Well...let's just say my brain's fried now. :sweat_smile:


I'll try to drop by here in the next couple days to talk about #36, though, if I can get any sort of free time.

Eric Eastwood
@MadLittleMods
@isiahmeadows Sounds good, I'll be here (both US based so hours are pretty good to match up)
Nikos
@QuantumInformation
Hi, how do I declare this in my config?
module.exports = {
  plugins: [
    require('postcss-smart-import')({ /* ...options */ }),
    require('precss')({ /* ...options */ }),
    require('autoprefixer')({ /* ...options */ })
  ]
}
Nikos
@QuantumInformation
I just done this, not sure if its the best order:
module.exports = {
  plugins: [
    require('postcss-smart-import')({ /* ...options */ }),
    require('postcss-css-variables')({ /* ...options */ }),
    require('precss')({ /* ...options */ }),
    require('autoprefixer')({ /* ...options */ })
  ]
}
Eric Eastwood
@MadLittleMods

@QuantumInformation Have you got this figured out now?

The order seems fine. It just depends on the order you want things executed in. I might put precss before so the $blue type variables are expanded out first

Nikos
@QuantumInformation
$blue type variables?
@MadLittleMods
Eric Eastwood
@MadLittleMods
@QuantumInformation The variables supported by precss
Nikos
@QuantumInformation
I see, I defo don't want to include sass like stuff, I thought we were trying to move to vanilla css. If we use sass like stuff in our pcss wan't be portable, no?
Eric Eastwood
@MadLittleMods
@QuantumInformation It's up to you. You're using precss, so I gave the reason I might switch the plugin order
Nikos
@QuantumInformation
sorry just realised this is the wrong repo
htmlstrap
@ui-coder

CSS Variable: More CSS Mixins - dimension

Hello everyone! I was thinking of how to write a CSS mixin like element-size with--size-x and --size-y and this is what I came up with as an idea.
I thought it'd be nice if the following worked.

/* More CSS Mixins - dimension */
/* :root,  */
* {
    --border-style: solid #555;

    --element-size: var(--size-x)
                    var(--size-y);
          --size-x: initial;
          --size-y: initial;

-webkit-element-size: var(--element-size);
        element-size: var(--element-size);
}

div.block { 
       border: 1px var(--border-style);
       element-size: 25px 40px;
}

Is there any approach to do this? Thanks a lot!

Eric Eastwood
@MadLittleMods

@ui-coder :/ It seems like a bug with variables depending on other variables. We have some tests covering this but not this case :open_mouth: - Mind creating an issue?

For example, I think this should work (doesn't currently),

.block {
    --size-x: initial;
    --size-y: initial;
    --element-size: var(--size-x) var(--size-y);

    element-size: var(--element-size);
}

.block:hover {
       --size-x: 25px;
       --size-y: 40px;
}

If things worked, your example would be,

* {
    --size-x: initial;
    --size-y: initial;
    --element-size: var(--size-x) var(--size-y);

    element-size: var(--element-size);
}

.block {
       --size-x: 25px;
       --size-y: 40px;
}
htmlstrap
@ui-coder
Hmmm! That's not what I'm trying to discover but thanks anyway. I appreciate it.
Eric Eastwood
@MadLittleMods
@ui-coder If you can clarify, I can probably help. Currently your use case won't work because variables depending on other variables has a bug
htmlstrap
@ui-coder
I'm trying to create a --sizeX and --sizeY (width/height) snippet with --variables: if possible (with pure css). One declaration with two values as a shorthand. Thanks!
Eric Eastwood
@MadLittleMods

@ui-coder It still seems like you are after the following if it actually worked (matches the functionality of your original example).

* {
    --size-x: initial;
    --size-y: initial;
    --element-size: var(--size-x) var(--size-y);

    element-size: var(--element-size);
}

.block {
       --size-x: 25px;
       --size-y: 40px;
}

The usage in your original example is more like a mixin, not a cascading variable

Nikos
@QuantumInformation
How can I get it not to use static?
I want to change the var at runtime
Nikos
@QuantumInformation
See how here you can change the var https://codepen.io/wesbos/pen/adQjoY
Eric Eastwood
@MadLittleMods
@QuantumInformation postcss-css-variables statically compiles the values. You could use the preserve option to also keep the variables in place though, https://github.com/MadLittleMods/postcss-css-variables#preserve-default-false
Nikos
@QuantumInformation
thx!
brmc
@brmc
anyone around?
Eric Eastwood
@MadLittleMods
@brmc :wave: