Stylus: Sass/SCSS support

Created on 24 May 2017  ·  74Comments  ·  Source: openstyles/stylus

With the Sass language you can write way cleaner code that is easier to manage than vanilla CSS. It was never present in Stylish, and I was surprised to see that none of the Stylish forks supported it either.

Implementing it should be pretty straight-forward. The user would write Sass or scss code in the CodeMirror editor, and on save it will compile the code and store both the Sass/scss code and the compiled css (so it won't have to be compiled on every injection, or on-the-fly, for performance reasons).

The sass.js library is licensed under the MIT license so there should be no licensing issues either.

enhancement
Source
picture HoLLy-HaCKeR
👍7

Most helpful comment

@traverseda because 99.9% of users don't need it. As for variables, you can already do that, see our wiki, by using LESS or stylus-lang syntax.

picture tophf on 22 Sep 2019
👍2

All 74 comments

It's a huge library (minified sass.js is 3.2MB), which is only beneficial to a small percentage of Stylus users, so we won't include it in the extension.

Someday we'll rewrite our editor page completely so it can use a separately installed companion extension (Stylus-coder, for example) that contains sass compiler(s), StyleLint and other huge and advanced stuff.

tophf picture tophf on 25 May 2017

I see. Any ETA on when this can be expected? In the range of weeks, months, years?

HoLLy-HaCKeR picture HoLLy-HaCKeR on 25 May 2017

I have no idea. The development so far proceeds in small unpredictable bursts. Personally, I'm only mildly interested in rewriting the editor as I no longer write userstyles.

tophf picture tophf on 25 May 2017

Stylus would be a much better solution, it's smaller and completely backwards compatible with CSS.

snowe2010 picture snowe2010 on 1 Feb 2018

Stylus preprocessor can be used in usercss styles. You can convert your existing style simply by adding the metadata header to your code in a new style editor.

tophf picture tophf on 1 Feb 2018

@tophf it does not seem to work correctly for me.

Chrome:
image

Firefox:
image

snowe2010 picture snowe2010 on 4 Feb 2018

That's not a usercss style.

tophf picture tophf on 4 Feb 2018

If you're creating it via the extension UI, click "[x] usercss" to the right of Write New Style button first.

tophf picture tophf on 4 Feb 2018

Don't know what I'm doing wrong then, because even making it a userstyle results in the same thing.
image

/* ==UserStyle==
@name Test
@description Test
@namespace test.net
@version 0.0.1
@author snowe <[email protected]> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/test
@supportURL http://github.com/snowe2010test/issues
@license MIT
@preprocessor stylus
==/UserStyle== */
snowe2010 picture snowe2010 on 4 Feb 2018

Attach the entire style code and I'll take a look.

tophf picture tophf on 4 Feb 2018

Also, CSSLint doesn't work with the stylus preprocessor, you need to switch to Stylelint. I thought it's done automatically though.

tophf picture tophf on 4 Feb 2018

Uh, yeah, it should switch automatically once you save the code.

tophf picture tophf on 4 Feb 2018

switching to stylelint helped, just one error now. "Missed semicolon"

/* ==UserStyle==
@name Jira Solarized
@description Modify new JIRA theme with Solarized Dark or Light
@namespace atlassian.net
@version 0.0.1
@author snowe <[email protected]> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/jira-solarized
@supportURL http://github.com/snowe2010/jira-solarized/issues
@license MIT
@var select solarized 'Solarized Scheme' {
    "Light": "light",
    "Dark": "dark"
}
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://promontech.atlassian.net/secure.*") {

  :root {
      --base03: #002b36;
      --base02: #073642;
      --base01: #586e75;
      --base00: #657b83;
      --base0: #839496;
      --base1: #93a1a1;
      --base2: #eee8d5;
      --base3: #fdf6e3;
      --yellow: #b58900;
      --orange: #cb4b16;
      --red: #dc322f;
      --magenta: #d33682;
      --violet: #6c71c4;
      --blue: #268bd2;
      --cyan: #2aa198;
      --green: #859900;
      /* Dark mode */
      /*
      --background: var(--base03);
      --background-highlights: var(--base02);
      --secondary-content: var(--base01);
      --primary-content: var(--base0);
      --emphasized-content: var(--base1);
      */
      /* Light Mode */
      --background: var(--base3);
      --background-highlights: var(--base2);
      --secondary-content: var(--base1);
      --primary-content: var(--base00);
      --emphasized-content: var(--base01);
  }

  /****************************************************************\
  /****************************************************************\
  /****************       Global things      **********************\
  /****************************************************************\
  /****************************************************************\
  */
  .aui-button,
  .aui-button:visited,
  a.aui-button 
      background-color: var(--background-highlights);
      color: var(--primary-content);

  .aui-button-subtle.aui-button:hover .aui-theme-default .aui-button.aui-button-subtle:hover,
  .aui-button:hover 
      background-color: var(--secondary-content);
      color: var(--emphasized-content);

  #navigation-app .iYJWvo 
      background-color: var(--background) !important;


  /* keeps forms colored even on edit */
  form.aui .text,
  form.aui .password,
  form.aui .upfile,
  form.aui .textarea,
  form.aui .select,
  form.aui .multi-select,
  form.aui .aui-select2-container 
      background-color: var(--background-highlights) !important;
      color: var(--primary-content);


  /* scrollbar stuff */
  body::-webkit-scrollbar,
  body::-webkit-scrollbar-track,
  body::-webkit-scrollbar-button,
  body::-webkit-scrollbar-track-piece,
  body::-webkit-scrollbar-thumb 
      background-color: var(--background);

  body::-webkit-scrollbar-track 
      background-color: var(--background);

  body::-webkit-scrollbar-thumb 
      background-color: var(--background);
      outline: 1px solid slategrey;


  /* Dropdown lists */
  form.aui input[type="text"] 
      color: var(--primary-content);

  .aui-dropdown2.aui-style-default,
  .aui-dropdown2.aui-style-default a 
      background-color: var(--background-highlights);
      color: var(--primary-content);

  .adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section a:hover:not([data-operation="color"]),
  .adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section li:hover :not([data-operation="color"]),
  .adg3 .aui-dropdown2.aui-style-default > ul > li a:hover:not([data-operation="color"]),
  .adg3 .aui-dropdown2.aui-style-default > ul > li li:hover :not([data-operation="color"]),
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:focus,
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label.active 
      background-color: var(--secondary-content);
      color: var(--background-highlights);

  .aui-dropdown2.aui-style-default:hover a 
      background-color: var(--background-highlights);
      color: var(--primary-content);

  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label span 
      color: var(--primary-content);


  /** End Dropdown Lists **/

  /** labels **/
  .labels,
  .labels li,
  .lozenge 
      background-color: var(--background-highlights) !important;

  .adg3 .ghx-editable:hover,
  .adg3 .ghx-editable::after,
  .adg3 .editable-field:hover,
  .adg3 .editable-field .overlay-icon.aui-iconfont-edit 
      background-color: var(--background-highlights);

  ul.labels li a.lozenge 
      background-color: var(--background-highlights);


  /****************************************************************\
  /****************************************************************\
  /****************       Navigation bar     **********************\
  /****************************************************************\
  /****************************************************************\

  /* Reverse colors in navigation-app drawer */
  .fEymd,
  .ulFTM,
  .fBYwee 
      color: var(--primary-content);

  .fjtgrF:before,
  .fjtgrF:after 
      background-color: var(--background);

  .cHbijf:before,
  .cHbijf:after,
  .idPIJS 
      background-color: var(--emphasized-content);

  .eRZMHk 
      background-color: var(--background) !important;

  #page-body,
  .issue-view,
  #issue-content,
  .issue-header-content,
  .command-bar 
      background-color: var(--background) !important;


  /** navigation expander add border on left so we know where to click */
  .eRZMHk 
      border-left: 1px solid var(--emphasized-content);

  .eRZMHk:hover::before 
      background: var(--emphasized-content);


  /* make expando button always visible  */
  .bgZnOn::before,
  .bgZnOn::after 
      background-color: var(--emphasized-content);
      opacity: 1;

  .eRZMHk button:before,
  .eRZMHk button:after,
  .bgZnOn::before,
  .bgZnOn::after 
      color: var(--emphasized-content);
      opacity: 1;

  .cSCDWK 
      background-color: var(--background);


  /******************
  *******************
      Issue Page
  *******************
  ******************/

  /**** General ****/

  /* make text readable */
  .user-content-block,
  p 
      color: var(--primary-content) !important;

  .adg3 .editable-field:hover,
  .adg3 .editable-field:hover > span 
      background-color: var(--background-highlights);


  /**** Issue Pane ****/

  /* Issue Summary / Title */
  .adg3 .aui-page-header #summary-val 
      color: var(--emphasized-content);

  .toggle-title 
      color: var(--emphasized-content);
      background-color: var(--background) !important;

  /*.aui-toolbar .toolbar-group .toolbar-trigger {
      background-color: var(--background-highlights) !important;
      color: var(--primary-content);
  }*/
  .aui-toolbar 
    .toolbar-group 
      .toolbar-trigger
        background-color: var(--background-highlights) !important;
        color: var(--primary-content);
      .toolbar-trigger:hover
        background-color: var(--background-highlights) !important;
        color: var(--emphasized-content);

  #issuedetails
      color: var(--primary-content);
  #issuedetails > .item > .wrap > strong.name
      color: var(--violet);

  #customfieldmodule .item > .wrap
      color: var(--magenta);
      border-bottom-color: var(--magenta);

  #comment-tabpanel > strong 
      color: var(--magenta);
      border-bottom-color: var(--magenta);

  #issuedetails a 
      color: var(--blue);

  /** issue links / attachments / etc **/
  .adg3 #linkingmodule .links-list dd:hover 
      background-color: var(--background-highlights);

  .issue-body-content .module > .mod-header .ops
      background-color: var(--background-highlights);

  .adg3 .mod-header ul.ops a
      color: var(--primary-content);

  .aui-button-subtle.aui-button:focus,
  .aui-button-subtle.aui-button:hover,
  .aui-button:focus,
  .aui-button:hover,
  .aui-theme-default .aui-button.aui-button-subtle:focus,
  .aui-theme-default .aui-button.aui-button-subtle:hover
      color: var(--emphasized-content);


  /**** Issue Activity ****/
  .adg3 .issue-data-block.focused,
  .adg3 .issue-data-block:hover
      background-color: var(--background-highlights);

  .action-details 
      color: var(--primary-content);

  .action-details a
      color: var(--blue);

  .tabwrap > .tabs.horizontal > li.active > a,
  .tabwrap > .tabs.horizontal > li.active > strong
      background-color: var(--background);
      color: var(--primary-content);

  .adg3 .tabwrap > ul.tabs > li.active > strong
      color: var(--magenta);

  #issue-tabs li a
      background-color: var(--background);
      color: var(--primary-content);

  #issue-tabs
      border-bottom-color: var(--secondary-content);


  /** Right pane **/
  #assignee-val,
  #reporter-val
      color: var(--primary-content);

  #vote-toggle,
  #watching-toggle
      color: var(--blue);

  #devstatus-container a
      color: var(--blue);

  time
      color: var(--primary-content) !important;

  #greenhopper-agile-issue-web-panel a
      color: var(--blue);


  /** Edit modal **/
  #edit-issue-dialog.jira-dialog,
  #create-issue-dialog .jira-dialog-heading,
  #edit-issue-dialog .jira-dialog-heading,
  #edit-issue-dialog .jira-dialog-heading h2,
  #edit-issue-dialog .jira-dialog-content .form-body
      background-color: var(--background);
      color: var(--primary-content);

  #edit-issue-dialog.jira-dialog
      border: 1px solid var(--background-highlights);

  .content .field-group .text,
  .content .field-group .select,
  .content .field-group .select option,
  .content .field-group .textarea
      background-color: var(--background-highlights);
      color: var(--primary-content);

  .content .field-group .text:hover,
  .content .field-group .select:hover,
  .content .field-group .textarea:hover
      background-color: var(--secondary-content);
      color: var(--primary-content);

  .jira-wikifield .wiki-edit-toolbar
      background-color: var(--background-highlights);
      color: var(--primary-content);

  .adg3 .aui-button.aui-dropdown2-trigger
      color: var(--primary-content);

  .aui-button.aui-button-subtle,
  .aui-theme-default .aui-button.aui-button-subtle
      color: var(--secondary-content);

  .aui-button .aui-icon,
  .ops li .aui-icon
      color: var(--primary-content);

  #create-issue-dialog .form-body,
  #create-issue-dialog .form-footer,
  #edit-issue-dialog .form-body,
  #edit-issue-dialog .form-footer
      background-color: var(--background);


  /****************************************************************\
  /****************************************************************\
  /****************       Kanban Board       **********************\
  /****************************************************************\
  /****************************************************************/
  #content #subnav-title .subnavigator-title
      color: var(--primary-content);

  #page,
  #page-body,
  #content,
  #gh,
  #ghx-content-main,
  #ghx-rabid,
  #ghx-work-wrapper,
  #ghx-work,
  #ghx-pool-column,
  #ghx-pool,
  #ghx-column-headers,
  #ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents,
  #ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents .ghx-detail-nav-menu,
  #js-detail-nav-content,
  #ghx-detail-head,
  #ghx-detail-issue,
  #ghx-detail-contents,
  #ghx-detail-view,
  .ghx-swimlane-header::after
      background-color: var(--background);
      box-shadow: none;

  .adg3 .ghx-column-headers .ghx-column,
  .adg3 .ghx-columns .ghx-column
      background-color: var(--background-highlights);

  .ghx-issue
      background-color: var(--background) !important;

  .ghx-issue *
      color: var(--primary-content) !important;

  .ghx-issue:hover
      background-color: var(--background-highlights) !important;

  .ghx-issue:hover *
      color: var(--primary-content) !important;

  .ghx-issue:hover
      border: 1px solid var(--emphasized-content);

  .ghx-swimlane-header,
  .ghx-swimlane-header-stalker,
  .ghx-column-header-group
      background-color: var(--background) !important;

  .ghx-parent-group
      background-color: var(--background-highlights) !important;
      color: var(--primary-content);
      border: 1px solid var(--emphasized-content);

  .ghx-group > .ghx-summary
      color: var(--secondary-content);


  /** Detail **/
  #ghx-detail-contents
      border: none;

  #ghx-detail-issue
      color: var(--primary-content);

  #ghx-detail-issue a
      color: var(--blue);

  #ghx-detail-issue .toggle-title
      color: var(--primary-content);


  /* color sidebar in details view */
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item,
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected
      background-color: var(--background);
      color: var(--primary-content);


  /*recolor icons */
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item span
      color: var(--primary-content);


  /* color selected icon in sidebar in details view */
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected a
      background-color: var(--background-highlights);
      color: var(--primary-content);


  /** Open issues page **/
  #page #page-body #content .aui-page-panel
      background-color: var(--background);
      color: var(--primary-content);


  /* Fix this later
  #page #page-body #content .aui-page-panel a
      background-color: var(--background);
      color: var(--blue);

  */
  .subnavigator-title
      color: var(--primary-content) !important;


  /* Search nav pane */
  .LnFvQ
      background-color: var(--background-highlights) !important;

  .LnFvQ span
      color: var(--secondary-content);

  .ipIHid
      background-color: var(--background-highlights) !important;

  .ewvMIF,
  .kNFuQa
      background-color: transparent;

  body #page #page-body h1,
  body #page #page-body h2,
  body #page #page-body h3,
  body #page #page-body h4,
  body #page #page-body h5,
  body #page #page-body h6
      color: var(--primary-content) !important;


  /******** Backlog ***************/
  #ghx-backlog,
  .ghx-backlog-container
      background-color: var(--background);

  .ghx-issue-compact,
  .ghx-issue-compact .ghx-end
      background-color: var(--background);

  .adg3 .js-issue.ghx-issue-compact:hover,
  .adg3 .js-issue.ghx-issue-compact:hover .ghx-items-container
      background-color: var(--background-highlights);

  .adg3 .js-issue.ghx-selected,
  .adg3 .js-issue.ghx-selected .ghx-items-container
         background-color: var(--background-highlights);
}

snowe2010 picture snowe2010 on 4 Feb 2018

Which means that the userstyle won't save. as it thinks I have an unmatched brace

ParseError: stylus:824:2
820| 
821| 
822| 
823| 
824| }
---------^
825| 

unexpected "}"
snowe2010 picture snowe2010 on 4 Feb 2018

Looks like stylus preprocessor doesn't understand @-moz-document, in which case it's a bug in the library. @eight04, any thoughts?

tophf picture tophf on 4 Feb 2018

I think you can't write indent-based rules inside brace-based rules. Try to

  • Remove braces ({}) of @-moz-document.
  • Or always use braces.

This is probably a bug of Stylus. Please file it to https://github.com/stylus/stylus/issues.

eight04 picture eight04 on 5 Feb 2018

I tried that before posting @eight04. It still doesn't work. I thought it might be the :root selector, so I removed that and just tried using variables, but that breaks the linter even more. 

/* ==UserStyle==
@name Jira Solarized
@description Modify new JIRA theme with Solarized Dark or Light
@namespace atlassian.net
@version 0.0.1
@author snowe <[email protected]> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/jira-solarized
@supportURL http://github.com/snowe2010/jira-solarized/issues
@license MIT
@var select solarized 'Solarized Scheme' {
    "Light": "light",
    "Dark": "dark"
}
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://promontech.atlassian.net/secure.*")

  base03 = #002b36;
  base02 = #073642;
  base01 = #586e75;
  base00 = #657b83;
  base0 = #839496;
  base1 = #93a1a1;
  base2 = #eee8d5;
  base3 = #fdf6e3;
  yellow = #b58900;
  orange = #cb4b16;
  red = #dc322f;
  magenta = #d33682;
  violet = #6c71c4;
  blue = #268bd2;
  cyan = #2aa198;
  green = #859900;
  /* Dark mode */
  /*
  background = base03;
  background-highlights = base02;
  secondary-content = base01;
  primary-content = base0;
  emphasized-content = base1;
  */
  /* Light Mode */
  background = base3;
  background-highlights = base2;
  secondary-content = base1;
  primary-content = base00;
  emphasized-content = base01;

  /****************************************************************\
  /****************************************************************\
  /****************       Global things      **********************\
  /****************************************************************\
  /****************************************************************\
  */
  .aui-button,
  .aui-button:visited,
  a.aui-button 
      background-color: background-highlights;
      color: primary-content;

  .aui-button-subtle.aui-button:hover .aui-theme-default .aui-button.aui-button-subtle:hover,
  .aui-button:hover 
      background-color: secondary-content;
      color: emphasized-content;

  #navigation-app .iYJWvo 
      background-color: background !important;


  /* keeps forms colored even on edit */
  form.aui .text,
  form.aui .password,
  form.aui .upfile,
  form.aui .textarea,
  form.aui .select,
  form.aui .multi-select,
  form.aui .aui-select2-container 
      background-color: background-highlights !important;
      color: primary-content;


  /* scrollbar stuff */
  body::-webkit-scrollbar,
  body::-webkit-scrollbar-track,
  body::-webkit-scrollbar-button,
  body::-webkit-scrollbar-track-piece,
  body::-webkit-scrollbar-thumb 
      background-color: background;

  body::-webkit-scrollbar-track 
      background-color: background;

  body::-webkit-scrollbar-thumb 
      background-color: background;
      outline: 1px solid slategrey;


  /* Dropdown lists */
  form.aui input[type="text"] 
      color: primary-content;

  .aui-dropdown2.aui-style-default,
  .aui-dropdown2.aui-style-default a 
      background-color: background-highlights;
      color: primary-content;

  .adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section a:hover:not([data-operation="color"]),
  .adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section li:hover :not([data-operation="color"]),
  .adg3 .aui-dropdown2.aui-style-default > ul > li a:hover:not([data-operation="color"]),
  .adg3 .aui-dropdown2.aui-style-default > ul > li li:hover :not([data-operation="color"]),
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:focus,
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label.active 
      background-color: secondary-content;
      color: background-highlights;

  .aui-dropdown2.aui-style-default:hover a 
      background-color: background-highlights;
      color: primary-content;

  .aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label span 
      color: primary-content;


  /** End Dropdown Lists **/

  /** labels **/
  .labels,
  .labels li,
  .lozenge 
      background-color: background-highlights !important;

  .adg3 .ghx-editable:hover,
  .adg3 .ghx-editable::after,
  .adg3 .editable-field:hover,
  .adg3 .editable-field .overlay-icon.aui-iconfont-edit 
      background-color: background-highlights;

  ul.labels li a.lozenge 
      background-color: background-highlights;


  /****************************************************************\
  /****************************************************************\
  /****************       Navigation bar     **********************\
  /****************************************************************\
  /****************************************************************\

  /* Reverse colors in navigation-app drawer */
  .fEymd,
  .ulFTM,
  .fBYwee 
      color: primary-content;

  .fjtgrF:before,
  .fjtgrF:after 
      background-color: background;

  .cHbijf:before,
  .cHbijf:after,
  .idPIJS 
      background-color: emphasized-content;

  .eRZMHk 
      background-color: background !important;

  #page-body,
  .issue-view,
  #issue-content,
  .issue-header-content,
  .command-bar 
      background-color: background !important;


  /** navigation expander add border on left so we know where to click */
  .eRZMHk 
      border-left: 1px solid emphasized-content;

  .eRZMHk:hover::before 
      background: emphasized-content;


  /* make expando button always visible  */
  .bgZnOn::before,
  .bgZnOn::after 
      background-color: emphasized-content;
      opacity: 1;

  .eRZMHk button:before,
  .eRZMHk button:after,
  .bgZnOn::before,
  .bgZnOn::after 
      color: emphasized-content;
      opacity: 1;

  .cSCDWK 
      background-color: background;


  /******************
  *******************
      Issue Page
  *******************
  ******************/

  /**** General ****/

  /* make text readable */
  .user-content-block,
  p 
      color: primary-content !important;

  .adg3 .editable-field:hover,
  .adg3 .editable-field:hover > span 
      background-color: background-highlights;


  /**** Issue Pane ****/

  /* Issue Summary / Title */
  .adg3 .aui-page-header #summary-val 
      color: emphasized-content;

  .toggle-title 
      color: emphasized-content;
      background-color: background !important;

  /*.aui-toolbar .toolbar-group .toolbar-trigger {
      background-color: background-highlights !important;
      color: primary-content;
  }*/
  .aui-toolbar 
    .toolbar-group 
      .toolbar-trigger
        background-color: background-highlights !important;
        color: primary-content;
      .toolbar-trigger:hover
        background-color: background-highlights !important;
        color: emphasized-content;

  #issuedetails
      color: primary-content;
  #issuedetails > .item > .wrap > strong.name
      color: violet;

  #customfieldmodule .item > .wrap
      color: magenta;
      border-bottom-color: magenta;

  #comment-tabpanel > strong 
      color: magenta;
      border-bottom-color: magenta;

  #issuedetails a 
      color: blue;

  /** issue links / attachments / etc **/
  .adg3 #linkingmodule .links-list dd:hover 
      background-color: background-highlights;

  .issue-body-content .module > .mod-header .ops
      background-color: background-highlights;

  .adg3 .mod-header ul.ops a
      color: primary-content;

  .aui-button-subtle.aui-button:focus,
  .aui-button-subtle.aui-button:hover,
  .aui-button:focus,
  .aui-button:hover,
  .aui-theme-default .aui-button.aui-button-subtle:focus,
  .aui-theme-default .aui-button.aui-button-subtle:hover
      color: emphasized-content;


  /**** Issue Activity ****/
  .adg3 .issue-data-block.focused,
  .adg3 .issue-data-block:hover
      background-color: background-highlights;

  .action-details 
      color: primary-content;

  .action-details a
      color: blue;

  .tabwrap > .tabs.horizontal > li.active > a,
  .tabwrap > .tabs.horizontal > li.active > strong
      background-color: background;
      color: primary-content;

  .adg3 .tabwrap > ul.tabs > li.active > strong
      color: magenta;

  #issue-tabs li a
      background-color: background;
      color: primary-content;

  #issue-tabs
      border-bottom-color: secondary-content;


  /** Right pane **/
  #assignee-val,
  #reporter-val
      color: primary-content;

  #vote-toggle,
  #watching-toggle
      color: blue;

  #devstatus-container a
      color: blue;

  time
      color: primary-content !important;

  #greenhopper-agile-issue-web-panel a
      color: blue;


  /** Edit modal **/
  #edit-issue-dialog.jira-dialog,
  #create-issue-dialog .jira-dialog-heading,
  #edit-issue-dialog .jira-dialog-heading,
  #edit-issue-dialog .jira-dialog-heading h2,
  #edit-issue-dialog .jira-dialog-content .form-body
      background-color: background;
      color: primary-content;

  #edit-issue-dialog.jira-dialog
      border: 1px solid background-highlights;

  .content .field-group .text,
  .content .field-group .select,
  .content .field-group .select option,
  .content .field-group .textarea
      background-color: background-highlights;
      color: primary-content;

  .content .field-group .text:hover,
  .content .field-group .select:hover,
  .content .field-group .textarea:hover
      background-color: secondary-content;
      color: primary-content;

  .jira-wikifield .wiki-edit-toolbar
      background-color: background-highlights;
      color: primary-content;

  .adg3 .aui-button.aui-dropdown2-trigger
      color: primary-content;

  .aui-button.aui-button-subtle,
  .aui-theme-default .aui-button.aui-button-subtle
      color: secondary-content;

  .aui-button .aui-icon,
  .ops li .aui-icon
      color: primary-content;

  #create-issue-dialog .form-body,
  #create-issue-dialog .form-footer,
  #edit-issue-dialog .form-body,
  #edit-issue-dialog .form-footer
      background-color: background;


  /****************************************************************\
  /****************************************************************\
  /****************       Kanban Board       **********************\
  /****************************************************************\
  /****************************************************************/
  #content #subnav-title .subnavigator-title
      color: primary-content;

  #page,
  #page-body,
  #content,
  #gh,
  #ghx-content-main,
  #ghx-rabid,
  #ghx-work-wrapper,
  #ghx-work,
  #ghx-pool-column,
  #ghx-pool,
  #ghx-column-headers,
  #ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents,
  #ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents .ghx-detail-nav-menu,
  #js-detail-nav-content,
  #ghx-detail-head,
  #ghx-detail-issue,
  #ghx-detail-contents,
  #ghx-detail-view,
  .ghx-swimlane-header::after
      background-color: background;
      box-shadow: none;

  .adg3 .ghx-column-headers .ghx-column,
  .adg3 .ghx-columns .ghx-column
      background-color: background-highlights;

  .ghx-issue
      background-color: background !important;

  .ghx-issue *
      color: primary-content !important;

  .ghx-issue:hover
      background-color: background-highlights !important;

  .ghx-issue:hover *
      color: primary-content !important;

  .ghx-issue:hover
      border: 1px solid emphasized-content;

  .ghx-swimlane-header,
  .ghx-swimlane-header-stalker,
  .ghx-column-header-group
      background-color: background !important;

  .ghx-parent-group
      background-color: background-highlights !important;
      color: primary-content;
      border: 1px solid emphasized-content;

  .ghx-group > .ghx-summary
      color: secondary-content;


  /** Detail **/
  #ghx-detail-contents
      border: none;

  #ghx-detail-issue
      color: primary-content;

  #ghx-detail-issue a
      color: blue;

  #ghx-detail-issue .toggle-title
      color: primary-content;


  /* color sidebar in details view */
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item,
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected
      background-color: background;
      color: primary-content;


  /*recolor icons */
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item span
      color: primary-content;


  /* color selected icon in sidebar in details view */
  .ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected a
      background-color: background-highlights;
      color: primary-content;


  /** Open issues page **/
  #page #page-body #content .aui-page-panel
      background-color: background;
      color: primary-content;


  /* Fix this later
  #page #page-body #content .aui-page-panel a
      background-color: background;
      color: blue;

  */
  .subnavigator-title
      color: primary-content !important;


  /* Search nav pane */
  .LnFvQ
      background-color: background-highlights !important;

  .LnFvQ span
      color: secondary-content;

  .ipIHid
      background-color: background-highlights !important;

  .ewvMIF,
  .kNFuQa
      background-color: transparent;

  body #page #page-body h1,
  body #page #page-body h2,
  body #page #page-body h3,
  body #page #page-body h4,
  body #page #page-body h5,
  body #page #page-body h6
      color: primary-content !important;


  /******** Backlog ***************/
  #ghx-backlog,
  .ghx-backlog-container
      background-color: background;

  .ghx-issue-compact,
  .ghx-issue-compact .ghx-end
      background-color: background;

  .adg3 .js-issue.ghx-issue-compact:hover,
  .adg3 .js-issue.ghx-issue-compact:hover .ghx-items-container
      background-color: background-highlights;

  .adg3 .js-issue.ghx-selected,
  .adg3 .js-issue.ghx-selected .ghx-items-container
         background-color: background-highlights;

results in 19:3 Unknown Word

snowe2010 picture snowe2010 on 5 Feb 2018

Using only braces seemed to work, but I can't use variables. I get the above error.

snowe2010 picture snowe2010 on 5 Feb 2018

I tried that before posting

I'm not sure which method you tried, but I can install this style without problems:
https://gist.github.com/eight04/7c64ac6d2acfb946ce6e95b5fe06ed74

Firefox Dev 59.0b6
Stylus 1.2.7

eight04 picture eight04 on 5 Feb 2018
👍1

I get a missed semicolon error with that exact snippet using Firefox 58.0.1 and Stylus 1.2.7. I can try to upgrade to dev, though I'd rather not, because I want this code to work for those not on develop releases.

snowe2010 picture snowe2010 on 6 Feb 2018

That semicolon error doesn't prevent the style from being applied.

tophf picture tophf on 6 Feb 2018

what about the Unknown word error? It doesn't seem to like stylus variables.

snowe2010 picture snowe2010 on 6 Feb 2018

I don't see any unknown word errors:

.

tophf picture tophf on 6 Feb 2018

I don't know what is up with my machine then. Do variables work properly for you @tophf ?

You can change the regex to ^https?://(.*?).atlassian.net/(secure|browse).*

and test here. https://mycore.atlassian.net/browse/ARC-336

All I did was change the starting bit to 

@-moz-document regexp("^https?://(.*?).atlassian.net/(secure|browse).*") 
  base03 = #002b36;    /* <--- trying to use this variable here */
  :root {
      --base03: #002b36; /* <---- not this one */
      --base02: #073642;
      --base01: #586e75;
      --base00: #657b83;
      --base0: #839496;
      --base1: #93a1a1;
      --base2: #eee8d5;
      --base3: #fdf6e3;
      --yellow: #b58900;
      --orange: #cb4b16;
      --red: #dc322f;
      --magenta: #d33682;
      --violet: #6c71c4;
      --blue: #268bd2;
      --cyan: #2aa198;
      --green: #859900;
      /* Dark mode */
      /*
      --background: var(--base03);
      --background-highlights: var(--base02);
      --secondary-content: var(--base01);
      --primary-content: var(--base0);
      --emphasized-content: var(--base1);
      */
      /* Light Mode */
      --background: var(base3);
      --background-highlights: var(--base2);
      --secondary-content: var(--base1);
      --primary-content: var(--base00);
      --emphasized-content: var(--base01);
  }

and it fails to render the background the proper color.

snowe2010 picture snowe2010 on 6 Feb 2018

It should be var(--base3);

Mottie picture Mottie on 6 Feb 2018

I'm trying to reference the variable I created outside of the :root scope @Mottie

http://stylus-lang.com/docs/variables.html

snowe2010 picture snowe2010 on 6 Feb 2018

even referencing it without using var(…) should work, but it doesn't.

snowe2010 picture snowe2010 on 6 Feb 2018

I'm not familiar with the stylus preprocessor so I can't help based on your description. What I know is that it works here and that the semicolon error is also displayed on other styles with the stylus preprocessor, and can be ignored.

tophf picture tophf on 6 Feb 2018

Ok. So the stylus variable problem is not an issue with openstyles/stylus, but is an issue with stylus preprocessor?

snowe2010 picture snowe2010 on 6 Feb 2018

Oops, I meant use 03... --background: var(base03);

Mottie picture Mottie on 6 Feb 2018

hmm. I do not know why it doesn't work in my style, but it works fine in a new style tested against google, just changing the background color. Ok, well I guess I'm doing something wrong. I'll have to figure it out. Thank you!

snowe2010 picture snowe2010 on 6 Feb 2018

I've just read through the comments and have to point out.

switching to stylelint helped, just one error now. "Missed semicolon"

It doesn't actually help. "Missed semicolon" is a syntax error, which means that the linter failed to parse the code and helped nothing.

eight04 picture eight04 on 6 Feb 2018

Looks like we don't apply the preprocessor at all when linting, only inside CodeMirror (and in the background usercss parser, of course). AFAIK this is how it always has been, which is why the weird hack with disabling CSSLint was introduced in the first place. The proper solution is to actually preprocess the code before linting. We can also expose the option for classic styles so the users can edit in stylus-lang and export the final CSS to upload to userstyles.org.

OTOH I'm not sure how helpful that would be since the processed CSS will have different line numbers and structure.

tophf picture tophf on 6 Feb 2018

I think Stylelint should be able to parse indent-based syntax. It might be a bug in SurgarSS with pseudo selectors.

  • Pass:
    styl a color: red;
  • SyntaxError:
    styl a:visited color: red;
    Could you confirm this @Mottie ?
eight04 picture eight04 on 6 Feb 2018

Oh that must be it because it was only happening after using indent based syntax on a hover element selector. Here's a working v non-working example with google.com

~Also, i can't save the file if linting fails.~
Nevermind that bit, I forgot about no braces around the moz-document

snowe2010 picture snowe2010 on 6 Feb 2018

Stylelint appears to work with the pseudo selector - https://runkit.com/mottie/stylelint-test

I got it working with this CSS:

@-moz-document domain("github.com")
  a
    color: red

  a:visited
    color: red

The warning was because of the semi-columns after the definition. Remove it and no warnings show up.

Edit: Note that we are using Stylelint v8.0.0 in the extension.

Mottie picture Mottie on 6 Feb 2018

@Mottie fantastic. Removing semicolons got my code warning/error free. Thanks for all the help! It also appears that mixed tabs (or the smart indentation checkbox) causes issues with parsing as well that manifests itself with one of the above errors.

snowe2010 picture snowe2010 on 7 Feb 2018

Maybe the problem is that we are not using SugarSS in the extension.
https://github.com/openstyles/stylus/blob/e84afd9a20ffbfe04d77a9809812d9123b8268ae/vendor-overwrites/stylelint/stylelint-bundle.min.js#L1690

However, by using SugarSS against normal CSS syntax:

stylelint test.css --syntax sugarss

test.css

a {
  color: red;
}

a:visited {
  color: blue;
}

I got:

 1:3  ×  Unnecessary curly bracket   CssSyntaxError

I think it's impossible to guess which syntax is used by the user. Maybe we can expose the syntax setting to the configuration of the linter?

eight04 picture eight04 on 7 Feb 2018

Linter config is global so I don't see how exposing the syntax setting would be helpful.

tophf picture tophf on 7 Feb 2018

We can still make it customizable for users e.g.

image

Linter config is global so I don't see how exposing the syntax setting would be helpful.

Agreed. It has to be edited manually when switching from different syntax (indent-based v.s. braces).

eight04 picture eight04 on 7 Feb 2018

The only other syntax options are "scss" & "less". Neither of which we support.

Edit:

It also appears that mixed tabs (or the smart indentation checkbox) causes issues with parsing

I was going to suggest using the beautify function, but it appears to remove all indention in this case.

Mottie picture Mottie on 7 Feb 2018

I did not realize that a userstyle (with a preprocessor) would not be able to be uploaded to userstyles.org. Do any of you have some sort of solution to be able to upload to userstyles.org or do I have to compile everything manually and sub in the @vars myself?

snowe2010 picture snowe2010 on 8 Feb 2018

Why not http://stylus-lang.com/try.html ?

tophf picture tophf on 8 Feb 2018

@tophf sorry I wasn't really clear on my question. I know I can compile it, but I'll have to sub in the userstyle @vars manually and I just wondered if you guys/girls had a solution other than manually doing it.

snowe2010 picture snowe2010 on 8 Feb 2018

Well, no one did that AFAIK, but yeah you'll have to replace CSS variables with /*[[USO-variable]]*/ syntax. Something like this regexp should work: var\(--(.*?)\) -> /*[[$1]]*/.

tophf picture tophf on 8 Feb 2018

OTOH you can simply add an initalization block that translates USO variables into CSS variables:

:root {
  --your-var1:/*[[uso-var1]]*/;
.....................
}
tophf picture tophf on 8 Feb 2018

yeah I'd have to convert all the stylus variables back which is really the main problem :(

snowe2010 picture snowe2010 on 8 Feb 2018

it currently looks like this
```
@-moz-document regexp("^https?:\/\/(.?).atlassian.net\/(secure|browse|plugins).")
/* Solarized Color Scheme */
base03 = #002b36
base02 = #073642
base01 = #586e75
base00 = #657b83
base0 = #839496
base1 = #93a1a1
base2 = #eee8d5
base3 = #fdf6e3
yellow = #b58900
orange = #cb4b16
red = #dc322f
magenta = #d33682
violet = #6c71c4
blue = #268bd2
cyan = #2aa198
green = #859900

if solarized == 'Light'
background = base3
background-highlights = base2
secondary-content = base1
primary-content = base00
emphasized-content = base01
else if solarized == 'Dark'
background = base03
background-highlights = base02
secondary-content = base01
primary-content = base0
emphasized-content = base1
```

snowe2010 picture snowe2010 on 8 Feb 2018

Why keep trying to use stylelint on stylus code? It does not say anywhere that it's supported. See https://github.com/stylelint/stylelint/issues/674.

Confusingly, there is stylint - the stylus linter.

rubaboo picture rubaboo on 11 Apr 2018

Why keep trying to use stylelint on stylus code?

I suggest you open a new issue. The original purpose of this thread is to support SASS/SCSS.

eight04 picture eight04 on 11 Apr 2018

If someone builds stylint.min.js properly (there should be no extra code like fs/buffer/whatever), we can add it to Stylus. I'm not familiar with browserify or npm in general so my patience ran out after 5 minutes of fiddling. The initial attempt produced a 120kB minified js, which is ok.

tophf picture tophf on 12 Apr 2018

I don't see a reason why extension should have anything beside simple text editor for quick edits. You can easily develop in SASS or any other other language in editor of your choice (that supports it).

For example Visual Studio Code with extensions can set you up with SASS linter, formatter, highlighting, autocomplete, snippets and of course compiler that can generate css on save. Then you just open this CSS in browser with Stylus installed, hit install style if not already and tick "Live Reload". Then you can code in SASS in fully featured editor and see changes immediately applied on save.

You can then publish resulting CSS file as you normally would anywhere you want,

Xeevis picture Xeevis on 13 Dec 2018

why extension should have anything beside simple text editor for quick edits.

We support these preprocessors in order to implement usercss styles. See the wiki for more information:
https://github.com/openstyles/stylus/wiki/UserCSS

eight04 picture eight04 on 13 Dec 2018

+1 for Sass support. It would make some of this way easier for complex pages with _nested_ styles

dmrickey picture dmrickey on 20 Feb 2019

The only theoretically possible solutions are:

  1. compile SASS as a WebAssembly module, and if it's really small and fast, it can be included in Stylus.
  2. write a separate utility that runs SASS in node.js and communicates with Stylus via nativeMessaging.
  3. allow other extensions to extend Stylus via externally_connectable messaging.

All of these are doable, there's just no one interested enough to bother.

tophf picture tophf on 20 Feb 2019

It's a huge library (minified sass.js is 3.2MB), which is only beneficial to a small percentage of Stylus users, so we won't include it in the extension.

@tophf What? Why does an extra couple MB matter in this context? Allowing users to customize userscripts by editing a few variables at the top would be very useful.

traverseda picture traverseda on 21 Sep 2019

@traverseda because 99.9% of users don't need it. As for variables, you can already do that, see our wiki, by using LESS or stylus-lang syntax.

tophf picture tophf on 22 Sep 2019
👍2

You don't really know if users "need" it or not. 99.9% of users don't need something like stylus, the reason it exists is because it can make it easier for power users to customize their experiences.

SCSS is ostensibly easier to write, and it lets you do things like define variables at the top of the file so end users and customize user styles they've downloaded. It's a powerful feature that makes it a lot easier for end users to customize their own experiences, which is ultimately the goal of stylus.

traverseda picture traverseda on 22 Sep 2019

so end users and customize user styles they've downloaded

Like this?

options

narcolepticinsomniac picture narcolepticinsomniac on 22 Sep 2019
👍1

Yep, that looks like the solutions.

For people seeing this issue going forward please note that stylus supports/prefers their own preprocessor and less over scss, but there is a preprocessor available.

traverseda picture traverseda on 22 Sep 2019

99.9% is close enough, I don't need to really know the exact number, I'm just being reasonable based on the fact we already offer preprocessors with a convenient UI to configure the variables, as well as an ability to edit files with the external editor that supports SASS/SCSS so the rest 0.01% who really need it can write in that syntax and feed the output to our extension.

tophf picture tophf on 22 Sep 2019
👍1

I agree, it wasn't clear to me using the extension or reading through this thread that LESS/variables were properly supported. My apologies.

traverseda picture traverseda on 22 Sep 2019

I have a question. Why does the site for this extension say "[Feature] Sass/SCSS support" in the Features section and even links to this issue if there isn't actually built-in Sass/SCSS support (if I understand correctly after reading through this thread)?

apollolux picture apollolux on 2 Oct 2019

Hi @apollolux! I think you might have mis-read that. Please share a link if it does exist so we can correct it.

This extension only supports LESS & Stylus language. We don't have support for SASS because the stand-alone version is over 3 MB in size, which is almost 3x larger than this extension.

Mottie picture Mottie on 2 Oct 2019

The page at https://add0n.com/stylus.html in the "Features" section at the top has a "load requested features from GitHub" link which includes this (probably sources from the 'enhancement' label). "Requested features" inside a "Features" section is probably a slight bit misleading and would better serve in its own explicitly called out section or folded into the FAQs segued from a question like "I would like to see X in Stylus..." or something.

apollolux picture apollolux on 2 Oct 2019

Well let's fix that by getting this issue closed.

WontFix, the existing css variable/preprocessor system should be good enough.

traverseda picture traverseda on 2 Oct 2019

"Requested features" inside a "Features" section is probably a slight bit misleading

There's a dividing line, not to mention, if I see "requested features" being pulled from Github, I assume that means these issues are still open and therefore probably not implemented.

Well let's fix that by getting this issue closed... WontFix

I don't consider this is a WontFix. There's reasonable ways to accomplish this, so if anybody is willing to put in the effort, they're welcome to. Obviously, it hasn't been a high priority to anybody so far, but maybe it will be to someone who comes along.

narcolepticinsomniac picture narcolepticinsomniac on 2 Oct 2019

I don't consider this is a WontFix. There's reasonable ways to accomplish this, so if anybody is willing to put in the effort, they're welcome to.

That's really not how you came across. The "it's a huge library at 3.2MB" with no guidelines on what a reasonable size is really makes it seem like this just isn't going to happen.

If you'd be willing to accept third-party pull requests for this I think you really need to outline exactly what your requirements are. I'm surprised that "use nodejs and native messaging" is even a part of that list honestly. That really doesn't seem like a reasonable solution compared to just adding 3.2MB to the project.

traverseda picture traverseda on 2 Oct 2019

We should probably just lock this thread (maybe also hide/delete most comments) since people don't want to read anything above the first/last few comments. As for a reasonable solution, see this comment, and there were probably more above that, I just don't remember.

tophf picture tophf on 2 Oct 2019

@tophf I guess the 64 thousand dollar question here is, what would be a reasonable size, if someone could manage to pull it off? Then we could lock it and hide irrelevant comments.

narcolepticinsomniac picture narcolepticinsomniac on 2 Oct 2019

The size constraint is only present in one of the proposed solutions - using the built-in WASM module. Hopefully it can become much smaller than the JS library.

tophf picture tophf on 2 Oct 2019

The size constraint is only present in one of the proposed solutions - using the built-in WASM module.

Understood. Seems like the challenge most likely to be accepted though, for whatever reason.

Hopefully it can become much smaller than the JS library.

Yeah, but what'd be a rough estimate of what might fall into the possible/acceptable range. Gotta have a goal, at least.

narcolepticinsomniac picture narcolepticinsomniac on 2 Oct 2019

Stylus extension itself: ~800kB
Translated text/messages: ~1150kB

library | size, kB
---|------
CodeMirror | 900
Stylelint | 865
CSSLint | 237
Stylus-lang | 176
LESS | 140

  • The only essential library is CodeMirror.
  • CSSLint is used to parse the compiled userCSS but we can do it via the built-in CSSStyleSheet parser (or a <style> element's sheet property in the older browsers) by substituting @-moz-document with a numbered @media and restoring later (example). Still, with CSSLint we can deliver meaningful hints and error messages so it's quite useful. It'd be nice if someone extends it to support other CSS syntax flavors (maybe via the plugins we already have for CodeMirror) so we can ditch Stylelint.
  • Stylelint is outrageously huge compared to the others and I suspect it's because it still contains a lot of code that's never needed, or its developers just don't care since their target environment is node.js where there is no such concern.

So evidently the reasonable size is 150k - 250k.

tophf picture tophf on 2 Oct 2019

Asked for an estimate, and now there is one. Not sure how realistic it is, but it's a number. If anyone wants to implement any of the suggested solutions, they're welcome to submit a PR. I'll lock this issue and hide most of the irrelevant comments.

narcolepticinsomniac picture narcolepticinsomniac on 2 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

darkred picture darkred  ·  58Comments
saxamaphone69 picture saxamaphone69  ·  64Comments
kristofferR picture kristofferR  ·  24Comments
catcat520 picture catcat520  ·  26Comments
Athari picture Athari  ·  25Comments