Beginners help compiling Sass for blank theme

[Bartek Igielski]

You can write own toolset or extend Frontools. Both ways have pros and cons, it's up to you.

Only thing to remember, is to not keep files that shouldn't be compiled, inside theme directory, b/c support for 3rd party modules from NPM / JSPM / Bower etc. is still "work in progress" (https://github.com/SnowdogApps/magento2-frontools/issues/46)

[realchriswells]

OK, thats good to know.

I have looked at MY styles task in my gulpfile.js and found that I'm really only using postCss (besides some linting and gulp_plumber) so how do I go about adding those postCss bits in to the themes.json file so that frontools knows about them?

I've got this definition now:

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  },
  "mysite": {
    "src": "app/design/frontend/Mycompany/mysite",
    "dest": "pub/static/frontend/Mycompany/mysite",
    "stylesDir": "web/css",
    "locale": ["en_US"],
    "parent": "blank",
    "postcss": ["plugins.autoprefixer({ browsers: ['last 2 versions'] })", "plugins.cassnano({ discardComments: { removeAll: true }, minimiseWhitespace: true, discardDuplicates: true, colormin: true, discardOverridden: true, functionOptimiser: true }), plugins.cssnext"]
  }
}

I'm not sure where I would need to pull these files from, or does Frontools pull these plugins down itself?

EDIT: I suppose I'm asking about the best practice for extending frontools for adding my own plugins for postcss and other node_modules such as sass-breakpoint

[Bartek Igielski]

You have to fork Frontools and add necessary plugins to package.json (and update yarn.lock). Unfortunately there is no way to extend package.json.

Mapping will be handled automagically in Frontools - package name from package.json are taken as plugin name (you can add custom mapping in gulpfile.js).

BTW. Looks like you need only cssnext, b/c autoprefixer and cssnano are already in use.

[realchriswells]

I will just fix the version number of Frontools so that it doesn't update and add them to the package.json then.

Were my definitions ok for the postcss stuff?

Would it be considered best practice to put the node_modules directory, gulpfile.js, package.json (for my theme) in the Mycompany directory (one level up from where they are now?)

I probably can't put them in the root of the site in case package.json gets updated by Magento - unless I'm thinking incorrectly?

[Bartek Igielski]

I prefer to stick with the module like approach, so keeping tools lvl upper than theme, sounds too hacky for me.

You can keep them in the project root, b/c M2 by default store here only package.json.sample (AFAIK up from v2.1).

About PostCSS setup:

It should looks exactly the same as in JS file, b/c this code is wrapped in eval() - https://github.com/SnowdogApps/magento2-frontools/blob/master/helper/scss.js#L12

[realchriswells]

So I'd need to add any modules for my workflow to the M2 package.json file?

If so, that's fine - but it does seem a little strange should Magento update it for some reason. But then thinking about it I'm not sure if they do update this as it's not in /vendor.

I'll have a play around with this and see if I can get it working. Thanks for your help.

[Bartek Igielski]

There is no package.json file in project root, there is only package.json.sample (up from some 2.1.x release), so you can place here whatever want.

[realchriswells]

That's interesting - I have one on mine containing all the grunt modules. I've added to it anyway.

One more thing before I leave you alone for a while, I'm getting this error:

gulp-notify: [Error running Gulp] Error: Cannot read property 'postcss' of undefined

when I run gulp styles.

Here is my config:

{
  "blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["en_US"]
  },
  "mysite": {
    "src": "../app/design/frontend/Mycompany/mysite",
    "dest": "../pub/static/frontend/Mycompany/mysite",
    "stylesDir": "web/css",
    "locale": ["en_US"],
    "parent": "blank",
    "postcss": ["plugins.autoprefixer({ browsers: ['last 2 versions'] })","plugins.cssnano({ discardComments: { removeAll: true }, minimiseWhitespace: true, discardDuplicates: true, colormin: true, discardOverridden: true, functionOptimiser: true })","plugins.cssnext"]
  }
}

It looks OK to me and inline with the example on the github page.

[Bartek Igielski]

Check if you use recent version of Magento, b/c as you can see 2.1 contains this files for a while (Feb 9, 2016)
https://github.com/magento/magento2/blob/2.1/package.json.sample
https://github.com/magento/magento2/blob/2.1/Gruntfile.js.sample

I need a full stack trace, not just an error message parsed by gulp-notify.

BTW. It looks like you have a project inside project... Why did you have "vendor" with "Blank" theme catalog on a different level than "app" and have two "pub" directories? It's definitely not Magento way and I'm even wondering that's not a "wise" way at all.

[realchriswells]

I'm using Magento 2.1.4.

That was just a snafu on my part. I have corrected paths now. I can guarantee you I don't have two pub files directories.

Is this what you need, or is there a more verbose version you would need to see?

Chris-iMac-2:tools ChrisWells$ gulp styles
[15:38:34] Using gulpfile /Applications/MAMP/htdocs/NewSite/vendor/snowdog/frontools/gulpfile.js
[15:38:34] Starting 'styles'...
[15:38:34] Starting 'inheritance'...
[15:38:34] Finished 'inheritance' after 472 ms
Error in plugin 'sass'
Message:
    ../../../var/view_preprocessed/frontools/frontend/Mycompany/mysite/web/css/styles.scss
Error: File to import not found or unreadable: ../../../../../../../node_modules/breakpoint-sass/stylesheets/breakpoint.
       Parent style sheet: /Applications/MAMP/htdocs/NewSite/var/view_preprocessed/frontools/frontend/Mycompany/mysite/web/css/styles.scss
        on line 1 of ../../../var/view_preprocessed/frontools/frontend/Mycompany/mysite/web/css/styles.scss
>> @import "../../../../../../../node_modules/breakpoint-sass/stylesheets/breakpo
   ^

[15:38:36] gulp-notify: [Error running Gulp] Error: ../../../var/view_preprocessed/frontools/frontend/Mycompany/mysite/web/css/styles.scss
Error: File to import not found or unreadable: ../../../../../../../node_modules/breakpoint-sass/stylesheets/breakpoint.
       Parent style sheet: /Applications/MAMP/htdocs/NewSite/var/view_preprocessed/frontools/frontend/Mycompany/mysite/web/css/styles.scss
        on line 1 of ../../../var/view_preprocessed/frontools/frontend/Mycompany/mysite/web/css/styles.scss
>> @import "../../../../../../../node_modules/breakpoint-sass/stylesheets/breakpo
   ^

[15:38:36] Theme: mysite print.css Compiled!
[15:38:36] Theme: mysite styles.css Compiled!
[15:38:36] Theme: blank print.css Compiled!
[15:38:36] Theme: blank styles.css Compiled!
[15:38:36] Finished 'styles' after 2.66 s

The issue seems to have changed in that I'm trying to .@import breakpoint and susy from /node_modules (in the root, where I've provisioned it) from a file held in /app/design/frontend/Mycompany/mysite/web/css/styles.scss (hence the lot of "../")