Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Michael Bøcker-Larsen
    @mblarsen
    styl is the common type/extension of stylus
    stylus-loader is the right loader for styl files. Your problem is elsewhere
    What is the problem you are seing?
    Jae Lee
    @jaequery
    Module not found: Error: Cannot resolve module 'styl-loader' in /webpack/node_modules/vue-bulma-quill/src
    Michael Bøcker-Larsen
    @mblarsen
    Change it to stylus-loader
    and ensure that you have that loader installed (npm install stylus-loader or yarn add stylus-loader)
    Jae Lee
    @jaequery
    it is installed, "stylus-loader": "^2.4.0",
    Michael Bøcker-Larsen
    @mblarsen
      module: {
        loaders: [
          {
            id: 'style',
            test: regexp.style,
            loader: 'style-loader!css-loader!stylus-loader',
            exclude: [/node_modules/]
          }
      },
    Example usage
    The value of regexp.style above is /\.(styl|css)$/
    So what happens when you've corrected the loader name?
    kevin olson
    @acidjazz
    hows it going everyone
    i think im going to create an awesome-stylus listing of everything stylus and stylus libraries
    kevin olson
    @acidjazz
    ugh nevermind there already is one
    Mihail Malo
    @qm3ster
    Herrow
    Anybody home?
    Mihail Malo
    @qm3ster
    interpolate(value_small, value_large, breakpoint_small, breakpoint_large)
      u = unit
      output_unit = u(value_small)
      unless output_unit == u(value_large) and output_unit == u(breakpoint_small) and output_unit == u(breakpoint_large)
        error('Different units')
    
      v_s = u(value_small, '')
      v_l = u(value_large, '')
      b_s = u(breakpoint_small, '')
      b_l = u(breakpoint_large, '')
      num_vw = 100 * (v_l - v_s) / (b_l - b_s)
      num_const = v_s + b_s * (v_s - v_l) / (b_l - b_s)
      return 'calc(%s + %s)' % (u(num_vw, vw) u(num_const, output_unit))
    Really, no stylus highlighter?
    weak
    Mihail Malo
    @qm3ster
    @xialvjun I am not sure what you were trying to achieve, so I also changed the 1200px (in two places) to 120px.
    responsive_block(cell_width_px, used_width_px, max_width_px)
      margin: 0 auto;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      /* width: cell_width_px; */
      for num in 1..10
        @media only screen and (min-width: used_width_px + num * cell_width_px)
          width: num * cell_width_px > max_width_px ? max_width_px : num * cell_width_px;
    
    ul
      padding: 0;
      responsive_block(120px, 0, 9999)
    
    li
      flex: none;
      display: inline-block;
      margin: 10px;
      width: 120px;
      background: #f55;
    Hum4n01d
    @Hum4n01d
    Hey I need some help
    I’m getting a Failed to compile src/renderer/styles/styles.styl: ENOENT: no such file or directory, stat '' Error: ENOENT: no such file or directory, stat ''
    for
    @import url('https://fonts.googleapis.com/css?family=Exo+2')
    
    *
      box-sizing: border-box
    
    // Colors
    tabBackgroundColor = #7cefaf
    activeTabColor = #FFF3B0
    backgroundColor = #76d2b7
    tabDividerColor = #319477
    newTabColor = #00e8a4
    titleBarColor = #219a76
    
    // Basic stuff
    body
      font-family: 'Exo 2', 'Roboto', Helvetica, Arial, sans-serif
      background-color backgroundColor
      margin: 0
      height 100vh
    
    // Hide scrollbars (not in webview)
    ::-webkit-scrollbar
        display: none
    
    // Hide webview before it loads
    .hide
      // visibility: hidden
      border: 1px solid red
    
    @import 'tabs.styl'
    @import 'header.styl'
    Gavin McFarland
    @limitlessloop
    Hi everyone. Does anyone know of a way to process styl inside style tags in a html file? I thought there might be a gulp plugin that would help but I can't find anything.
    Mihail Malo
    @qm3ster
    @sevenupcan you could use pug with a filtered block
    (pug accepts html lulz)
    Gavin McFarland
    @limitlessloop
    @qm3ster thanks, I’ll look into it
    Mihail Malo
    @qm3ster
    @sevenupcan you might want to just have separate files and inline them in your buildtool if that is what you are after, because you are sure to have better tooling support that way and won't add an extra technology you don't explicitly want.
    Gavin McFarland
    @limitlessloop
    True. For the time being I’ve just hacked a plugin which process inline postcss
    Colton Colcleasure
    @colshacol
    Why has the community around Stylus all but disappeared? =/
    Mihail Malo
    @qm3ster
    @colshacol CSS-in-js
    bruce
    @sqram
    I think i found a bug
    colors = $white #C6C6C6 #00C1A5 #00C473
    for color, i in colors
      &:nth-of-type(i)
        .front
          background color
    transpiles fine, except for the 'i' variable. it just goes out as i, instead of the intended index number
    Mihail Malo
    @qm3ster
    @sqram
    colors = $white #C6C6C6 #00C1A5 #00C473
    for color, i in colors
      &:nth-of-type({i})
        .front
          background color
    Reading the docs saves lives;
    But being a condescending douche like me saves even more.
    bruce
    @sqram
    i did read the docs
    i saw {} under hashes
    Mihail Malo
    @qm3ster
    Well actually jamming the variables into the css is covered under interpolation
    This message was deleted
    bruce
    @sqram

    I reached this example:

      body
        fonts = Impact Arial sans-serif
        for font, i in fonts
          foo i font

    in here http://stylus-lang.com/docs/iteration.html

    but good ot know when inside a css expression it needs {}. thanks
    Colton Colcleasure
    @colshacol
    @qm3ster Stylus offered so much that I love, though. One big selling point for me was the cleanliness. CSS in JS is butt ugly. I use styled-components every day, and all I can think about is how I am going to write my Webpack loader to catch styled-components and inject a Stylus compilation step first. -_-
    kevin olson
    @acidjazz
    glad to hear it @colshacol
    i wonder if theres a better way to write
    #GradientChart
      width 1200px
      &.below-viewport
        > .data > .copys > .copy, > .data > .legend > .stat > .copy, > .data > .legend > .stat > .value
          opacity 0
          transform translate(0, 50px)
    Mihail Malo
    @qm3ster
    #GradientChart
      width 1200px
      &.below-viewport > .data >
        .copys > .copy,
        .legend > .stat > .copy,
        .legend > .stat > .value
          opacity 0
          transform translate(0, 50px)
    This compiles to the same, but you probably reevaluate your markup
    Yavorski
    @yavorski
    Hello all, if you like preact i asked for stylus support in preact-cli,
    So if you are interested you could check out this issue developit/preact-cli#189
    Daniel Shuy
    @daniel-shuy

    Hi all, I have a noob question:
    If a variable is defined with multiple parameters, eg.

    $padding = 4px 10px

    How can I get the 1st parameter of the variable (in this case 4px)?