Open holly-hacker opened 7 years ago
tophf
commented
7 years ago 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.
holly-hacker
commented
7 years ago I see. Any ETA on when this can be expected? In the range of weeks, months, years?
tophf
commented
7 years ago 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.
snowe2010
commented
6 years ago Stylus would be a much better solution, it's smaller and completely backwards compatible with CSS.
tophf
commented
6 years ago 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.
snowe2010
commented
6 years ago @tophf it does not seem to work correctly for me.
Chrome:
Firefox:
tophf
commented
6 years ago That's not a usercss style.
tophf
commented
6 years ago If you're creating it via the extension UI, click "[x] usercss" to the right of Write New Style button first.
snowe2010
commented
6 years ago Don't know what I'm doing wrong then, because even making it a userstyle results in the same thing.
/* ==UserStyle==
@name Test
@description Test
@namespace test.net
@version 0.0.1
@author snowe <tyler.b.thrailkill@gmail.com> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/test
@supportURL http://github.com/snowe2010test/issues
@license MIT
@preprocessor stylus
==/UserStyle== */Attach the entire style code and I'll take a look.
tophf
commented
6 years ago Also, CSSLint doesn't work with the stylus preprocessor, you need to switch to Stylelint. I thought it's done automatically though.
tophf
commented
6 years ago Uh, yeah, it should switch automatically once you save the code.
snowe2010
commented
6 years ago switching to stylelint helped, just one error now. "Missed semicolon"
snowe2010
commented
6 years ago 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 "}"Looks like stylus preprocessor doesn't understand @-moz-document, in which case it's a bug in the library. @eight04, any thoughts?
eight04
commented
6 years ago I think you can't write indent-based rules inside brace-based rules. Try to
{}) of @-moz-document.This is probably a bug of Stylus. Please file it to https://github.com/stylus/stylus/issues.
snowe2010
commented
6 years ago 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.
results in 19:3 Unknown Word
snowe2010
commented
6 years ago Using only braces seemed to work, but I can't use variables. I get the above error.
eight04
commented
6 years ago 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
snowe2010
commented
6 years ago 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.
tophf
commented
6 years ago That semicolon error doesn't prevent the style from being applied.
snowe2010
commented
6 years ago what about the Unknown word error? It doesn't seem to like stylus variables.
tophf
commented
6 years ago I don't see any unknown word errors:
.
snowe2010
commented
6 years ago 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.
Mottie
commented
6 years ago It should be var(--base3);
snowe2010
commented
6 years ago I'm trying to reference the variable I created outside of the :root scope @Mottie
snowe2010
commented
6 years ago even referencing it without using var(…) should work, but it doesn't.
tophf
commented
6 years ago 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.
snowe2010
commented
6 years ago Ok. So the stylus variable problem is not an issue with openstyles/stylus, but is an issue with stylus preprocessor?
Mottie
commented
6 years ago Oops, I meant use 03... --background: var(base03);
snowe2010
commented
6 years ago 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!
eight04
commented
6 years ago 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.
tophf
commented
6 years ago 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.
eight04
commented
6 years ago I think Stylelint should be able to parse indent-based syntax. It might be a bug in SurgarSS with pseudo selectors.
a
color: red;a:visited
color: red;Could you confirm this @Mottie ?
snowe2010
commented
6 years ago 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
Mottie
commented
6 years ago 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: redThe 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.
snowe2010
commented
6 years ago @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.
eight04
commented
6 years ago 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 sugarsstest.css
a {
color: red;
}
a:visited {
color: blue;
}I got:
1:3 × Unnecessary curly bracket CssSyntaxErrorI 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?
tophf
commented
6 years ago Linter config is global so I don't see how exposing the syntax setting would be helpful.
eight04
commented
6 years ago We can still make it customizable for users e.g.
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).
Mottie
commented
6 years ago 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.
snowe2010
commented
6 years ago 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?
tophf
commented
6 years ago Why not http://stylus-lang.com/try.html ?
snowe2010
commented
6 years ago @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.
tophf
commented
6 years ago 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
commented
6 years ago OTOH you can simply add an initalization block that translates USO variables into CSS variables:
:root {
--your-var1:/*[[uso-var1]]*/;
.....................
}yeah I'd have to convert all the stylus variables back which is really the main problem :(
snowe2010
commented
6 years ago 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
rubaboo
commented
6 years ago 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.
eight04
commented
6 years ago 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.
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.