StylishThemes / GitHub-Dark

:octocat: Dark GitHub style
https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/github-dark.user.css
BSD 2-Clause "Simplified" License
9.67k stars 655 forks source link

The .css outcome of custom theme has several lines with invalid css syntax #998

Closed danhgit closed 4 years ago

danhgit commented 5 years ago

I create a custom theme using default build.json from the repo by below code snippet

$ node -v
v10.8.0
$ git clone git@github.com:StylishThemes/GitHub-Dark.git ghd
$ cd ghd
$ git checkout 93168d98 # it's v1.22.88
$ npm i
$ node ./node_modules/.bin/grunt

Then I have new file github-dark-twilight-cf6a4c.build.css whose content is at https://gist.github.com/danhnguyen30041975/11f85960f47b84c12bab1fc87eb9efa6. There are several problems on the generated css file which causes compiling error when the file is used as input for css processors less or sass

  1. The character } at line 8518 is redundant. There should no } at that line
  2. The css for --bg-custom at line 5 has invalid syntax, it should have a default value like --bg-custom: /*[[bg-custom]]*/ #fff;
  3. At line 8501, the --ghd-code-color: miss final ;. It should be like --ghd-code-color:#ccc;}.

Could you help fix these problems ?

the-j0k3r commented 5 years ago

@danhnguyen30041975 you may want to try with node 12

https://github.com/StylishThemes/GitHub-Dark/blob/93168d98f1c3810881cfa84c9b84c1153c37ac0e/package.json#L9

Then I have new file github-dark-twilight-cf6a4c.build.css whose content is at https://gist.github.com/danhnguyen30041975/11f85960f47b84c12bab1fc87eb9efa6. There are several problems on the generated css file which causes compiling error when the file is used as input for css processors less or sass

Im not sure where you get this file from, the only files you should count on for after generation for usage are github-dark.css and github-dark.user.css

node ./node_modules/.bin/grunt

Please see our valid scripts at https://github.com/StylishThemes/GitHub-Dark#development

I may have missed something as Im a bit confused with that output file you say you end up with, maybe someone else has a better insight.

the-j0k3r commented 5 years ago

I notice that by running grunt as advertised in build scripts you end up with a file that has no -moz rules, that could explain the extra closing brackets and other errors.

I never really used this so @silverwind or @Mottie can explain why this file is broken.

danhgit commented 5 years ago

Thanks @the-j0k3r

you may want to try with node 12

I tried and the problem is still there

I notice that by running grunt as advertised in build scripts you

It was documented at Wiki (https://github.com/StylishThemes/GitHub-Dark/wiki/Build), and the grunt code also works as that way

Thanks for replying, again

D

the-j0k3r commented 5 years ago

@silverwind please have a look, this looks broken to me and no idea how to fix.

silverwind commented 5 years ago

I think at this point we're better off removing support for build.json. There's no need for it with usercss variables and it's more of a relic of the past right now.

the-j0k3r commented 5 years ago

Yes, lets.

danhgit commented 5 years ago

Thanks @the-j0k3r for following-up

Hi @silverwind

I think at this point we're better off removing support for build.json.

Removing build.json means there is no customization for existing themes in github-dark. Is it correct ? Is there any alternative support like build.json in new github-dark ?

the-j0k3r commented 5 years ago

I think you can still customize the style just by editing the usercss template in tools and the github-dark.css and build a new theme based on that, The new github dark, lets not jump that far ahead of the horses, its not been worked on for a long time and shouldn't be used by anyone at this time.

Perhaps if you tell us what youre trying to achieve, we can make some more pertinent suggestions on how to achieve it?

danhgit commented 5 years ago

Hi @the-j0k3r,

I want to have some "themes" (different colors) in github pages on my browser. The approach I follow is: I use custom build from github-dark, with little customization (with less), and paste the final css output into Stylish.

It've been useful approach till now when I have full customization on the dark theme.

It's great if we have alternative customization like build.json having valid css

the-j0k3r commented 5 years ago

Just fork and customize till your hearts content in a commit or two, then to keep it up to date rebase your changes ontop of ours so yours are always at the top.

the-j0k3r commented 5 years ago

@danhnguyen30041975 you may want to consider Stylus https://add0n.com/stylus.html instead of stylish, Stylish doest care about your privacy.

the-j0k3r commented 4 years ago

this has been removed in https://github.com/StylishThemes/GitHub-Dark/commit/878658480c45acbdd42f43bcd6c0674fb2ab09f1