variables.styl and mixins.styl were imported three times

zoxon / gulp-front

Frontend boilerplate and framework based on gulp, pug, stylus and babel

https://zoxon.github.io/gulp-front

MIT License

262 stars 58 forks source link

variables.styl and mixins.styl were imported three times #58

Closed rolojf closed 6 years ago

rolojf commented 6 years ago

Description

When ready to develop I found that the stylus files were included multiple times.

The change I made to the link where normalize.css file is, didn't work. So I changed back to how it was. I don't know yet if it is working correctly as it was. I didn't find the normalize.css where the reset.styl is. But no error was reported. So I don't know if there is a process at compilation time that moves it or something.

Motivation and Context

I think that:

it is best that reset.styl should include only reset, normalize and a base font
everything else should go in mail.styl

There is no need to include @import variables.styl given that the stylesheets were already included in the pug's head mixin.

How Has This Been Tested?

I ran $npm start on both the demo and also after clean. Worked ok.

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) None of the above

Checklist:

[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.

rolojf commented 6 years ago

Found a problem to consider:

As it is now, the content inside of the style element with the :stylus filter in the index.pug file is executed before the rest of the head mixin.

So, it is not a good place to @import stylesheets for specific elements, because it will become overidden with the stylesheets linked in the head that are read after.

rolojf commented 6 years ago

I had to move all the style :stylus @import statements to static/styles/common.styl in there I have access to all the stylus variables and also the spritesheet variables. Would this be the right way to do add the additional *.styl files ?

zoxon commented 6 years ago

Hi @rolojf and thank you for help, but you are not quite right.

normalize.css take forom node_modules folder and install by npm
From every file in /soure/static/styles create new css file.
Css code split on two files reset.css and main.css. Files started from _ not generate new file.
In reset.css has global typograpy styles specialy for connecting this file to CRM WYSIWYG editor. In reset.css take critical minimum styles. Anyway you can do everyting what you want in your current project.
variables and mixins import globaly to every target css file. If remove this imports all css code should be rewrite
In index.pug globals not use, but everyting can change
Using :stylus filter for pug not best idea, because system will be rebuild all templates (it's longer than stylus compiling)

zoxon commented 6 years ago

@rolojf if you want to benefit the project, you can create pull request for opened issues