Hello,

Is it possible to tell to BrowserSync to check only SCSS files? I tried to set the files config in browser-sync.json but it seems to check also file in var or phtml ones.

Thanks.

Im not sure if its not finding the files or not. Here is my config.

{
  "backend": {
    "src": "../app/design/adminhtml/Magento/backend",
    "dest": "../pub/static/adminhtml/Magento/backend",
    "locale": ["en_US"],
    "lang": "less",
    "default": true,
    "area": "adminhtml",
    "vendor": "Magento",
    "name": "backend",
    "files": [
      "css/styles-old",
      "css/styles"
    ]
  },
  "blank": {
    "src": "../app/design/frontend/Magento/blank",
    "dest": "../pub/static/frontend/Magento/blank",
    "locale": ["en_US", "pl_PL"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "Magento",
    "name": "blank",
    "files": [
      "css/styles-m",
      "css/styles-l",
      "css/email",
      "css/email-inline"
    ]
  },
  "chefstoys": {
    "src": "../app/design/frontend/ChefsToys/default",
    "dest": "../pub/static/frontend/ChefsToys/default",
    "locale": ["en_US"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "ChefsToys",
    "name": "default",
    "files": [
      "css/styles-m",
      "css/styles-l"
    ]
  },
  "luma": {
    "src": "../app/design/frontend/Magento/luma",
    "dest": "../pub/static/frontend/Magento/luma",
    "locale": ["en_US"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "Magento",
    "name": "luma",
    "files": [
      "css/styles-m",
      "css/styles-l"
    ]
  },
  "demo": {
    "src": "../vendor/snowdog/theme-frontend-demo",
    "dest": "../pub/static/frontend/snowdog/demo",
    "locale": ["en_US", "pl_PL", "ru_RU"],
    "lang": "scss",
    "postcss": ["plugins.autoprefixer()"]
  }
}

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 8.3.0 of autoprefixer was just published.

The version 8.3.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of autoprefixer.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

body {
    grid-template:
        [header-left] "head head" 30px [header-right]
        [main-left]   "nav  main" 1fr  [main-right]
        [footer-left] "nav  foot" 30px [footer-right]
        / 120px repeat(4, 250px 10px);
}
header {
grid-area: head;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
@media (min-width: 1000px) {
body {
grid-template:
[header-left] "head" 30px [header-right]
[main-left]   "main" 1fr  [main-right]
[footer-left] "footer" 30px [footer-right]
/ 1fr;
}
}

a {
    background: radial-gradient(#fff, transparent) 0 0 / cover no-repeat #f0f;
}

Your Greenkeeper bot :palm_tree:

Hello,

First of all, thank you for your work, it's highly appreciated! I have upgraded the extension from ^1.4 to ^1.5 and both commands gulp dev and gulp watch doesn't work anymore. No error is raised, gulp just seems to wait but doesn't detect any change. All worked fine with the previous version.

gulp styles works perfectly.

Any thoughts?

Thanks!

I'm having an issue with CORS preventing an XHR request from loading when running through Browsersync.

From doing a bit of research, it looks like Browsersync doesn't apply rewrite rules or middleware to XHR loads, only HTML directly loaded through Browsersync.

Does anyone have any ideas around this? I've tried bypassing CORS in .htaccess and Magento but no luck.

Something that is strange is that I tried adding x-frame-options to my env.php and for the troublesome request, it has this header twice:

Not really sure how browsers handle this.

I've thought about running it through nginx on my development environment and trying to override the headers there to add Access-Control-Allow-Origin manually to requests.

Thanks.

Version 4.0.0 of cssnano was just published.

The version 4.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of cssnano.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Your Greenkeeper bot :palm_tree:

Hei, I've stucked with your new great option: "Modules" in the themes.json. Could you please advise me how to solve described below issue? Or maybe there no such functionality and I'm searching for it in vain..

My themes.json looks in such way:

"convert-lanullva": {
    "src"            : "app/design/frontend/Convert/lanullva",
    "dest"           : "pub/static/frontend/Convert/lanullva",
    "locale"         : ["nb_NO"],
    "lang"           : "scss",
    "parent"         : "convert-two",
    "disableSuffix"  : true,
    "modules": {
      "Convert_ProductSlideIn": "vendor/convert/module-product-slidein"
    },
    "postcss"        : ["plugins.autoprefixer()"]
  }

I've added modules option in themes.json and execute 'gulp inheritance' command. I see that 'gulp watch' task see my changes in the "vendor/convert/module-product-slidein" folder:

[14:13:52] Change detected. Theme: convert-lanullva File: var/view_preprocessed/frontools/frontend/Convert/lanullva/Convert_ProductSlideIn/view/frontend/styles/module/_common.scss

also I've included it in my 'convert-lanullva' theme styles.scss as : @import "../Convert_ProductSlideIn/view/frontend/web/styles/module";

but after that 'convert-lanullva' theme is not compiled automatically after changing _module.scss in 'Convert_ProductSlideIn' folder. I thought that this option were added to resolve styles inheritance during the compilation. No?

PS. Also due to this pull-request https://github.com/SnowdogApps/magento2-frontools/pull/227 I haven't realized how could I use "Modules" option in themes.config to include Foundation styles from the bower folder.

Hello,

at first I want to point out that everything works fine but don't know why I can't overwrite _cart.scss in MY-THEME/Magento_Checkout/styles/module/ when working on gulp dev. Strange is that I can overwrite _minicart.scss in this same directory then styles are compiled and BrowserSync work.

Regards Matt

If I read the code correctly, the browser should reload after LESS files are processed. But it does not.

But browser sync states

[BS] Browser Connected: Chrome, version: 52.0.2743.116

Hi,

I'm not sure if this is a bug or just my configuration. But no matter I try there is no effect in the browser. I change e.g. a background-color then save my file and I can see in the console, that gulp detects changes:

[14:47:46] Theme: banana Locale: de_DE banana_product_list.css Compiled!
[BS] 1 file changed (banana_product_list.css)
[14:47:54] Theme: banana Locale: de_DE styles-m.css Compiled!
[BS] 1 file changed (styles-m.css)
[14:47:54] Theme: banana Locale: de_DE styles-l.css Compiled!
[BS] 1 file changed (styles-l.css)

After that I see a little tooltip in my browser "inject styles-l.css". I can also register a little flashing in the browser. But then ... nothing happens. I desperately tried it with !important but again no new background-color.

I also got this error with the standard installation:

gulp-notify: [Error running Gulp] Error: variable @media-common is undefined in file ...

So I had to declare all variables inside each file but I guess that is not the best way.

Maybe it is important but I extend the porto theme with my banana theme.

The themes.json looks like this:

"banana": {
    "src": "../vendor/fruit/magento2-banana-theme-banana",
    "dest": "../pub/static/frontend/Fruit/banana",
    "locale": ["de_DE"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "Fruit",
    "name": "banana",
    "files": [
      "css/styles-m",
      "css/styles-l"
    ]

First, here is my configuration for reference.

  "kangaroo": {
    "src": "../app/design/frontend/AlanKent/kangaroo",
    "dest": "../pub/static/frontend/AlanKent/kangaroo",
    "locale": ["en_US", "en_AU"],
    "lang": "less",
    "default": true,
    "area": "frontend",
    "vendor": "AlanKent",
    "name": "kangaroo",
    "files": [
      "css/kangaroo2",
      "css/styles-m",
      "css/styles-l",
      "css/email",
      "css/email-inline"
    ]
  },

css/kangaroo2 is a .less file in the theme. When I touch this file, all of the Less files are recompiled. This is slow.

How do you suggest I achieve something like the following?

• For css/styles-l watch css/styles-l.less and **/_*.less.
• For css/styles-m watch css/styles-m.less and **/_*.less.
• For css/email watch css/email.less and **/_*.less.
• For css/email-inline watch css/email-inline.less and **/_*.less.
• For css/kangaroo2 watch **/*.less.

The first four could be merged in practice, because they all depend on the same files. So if one changes, they will all probably need recompiling. But it is important (for speed) that changes to kangaroo2.less DO NOT trigger the first 4 to recompile (and hence the **/_*.less rule - only things with leading underscore will trigger those files to recompile).

I actually don't care which way its achieved, but being able to change kangaroo2.less without compiling the other files is the important part. It goes from say 10 seconds to under 1 per file change - much nicer experience. Maybe need to be able to specify watch dependencies per file?

We've recently upgraded our 'node' docker image which brought an upgrade of npm (from version 8.1.2 to version 8.11.0). From what I can tell, there is a change that was introduced in npm version 8.6.0 which is not compatible with this module.

I've checked that I'm on the latest version of this package (tested with both version 1.12.0 and 1.12.2)

Steps to reproduce

1. Clone this repository (tested with 2a5854781c970044af38aabdce2efa1a6bf9e56e, which is tagged version 1.12.2)
2. Run docker run --rm -it -v $PWD:/app -w /app node:16 npm install

Expected result

Task completes successfully.

Actual result

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   eslint@"^8.1.0" from the root project
npm ERR!   peer eslint@">=5" from [email protected]
npm ERR!   node_modules/eslint-utils
npm ERR!     eslint-utils@"^3.0.0" from [email protected]
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" from [email protected]
npm ERR! node_modules/eslint-plugin-compat
npm ERR!   eslint-plugin-compat@"^3.13.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" from [email protected]
npm ERR!   node_modules/eslint-plugin-compat
npm ERR!     eslint-plugin-compat@"^3.13.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-07-05T11_35_35_317Z-debug-0.log

At time of writing the 'node:16' image has npm version 8.11.0. When testing with version 8.5.5 this works, and from 8.6.0 this error shows. Works: docker run --rm -it -v $PWD:/app -w /app node:16 bash -c 'npm install -g [email protected] && npm install' Error as above: docker run --rm -it -v $PWD:/app -w /app node:16 bash -c 'npm install -g [email protected] && npm install'

While trying to install on Mac M1, there's issue:

Exit code: 1
Command: node install.js
Arguments:
Directory: /var/www/html/vendor/snowdog/frontools/node_modules/phantomjs-prebuilt
Output:
PhantomJS not found on PATH
Unexpected platform or architecture: linux/arm64
It seems there is no binary available for your platform/architecture

Node v16.15.0

PhantomJS is deprecated but it's used by gulp-svg-sprite.

Temporary fix that works for me, is to change in package.json:

"gulp-svg-sprite": "svg-sprite/gulp-svg-sprite#dev"

Unfortunately new changes, that are dropping PhantomJS (in svg-sprite v2.0.0-beta1) are not released yet and working only on dev branch. https://github.com/svg-sprite/gulp-svg-sprite/commit/8b4803dfcd185749f52f4230344d559dbd483514

EDIT:

Release of new gulp-svg-sprite version dropping PhatnomJS is comming soon. https://github.com/svg-sprite/gulp-svg-sprite/issues/127#issuecomment-1141048410

Snyk has created this PR to upgrade chokidar from 3.5.2 to 3.5.3.

:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

• The recommended version is 1 version ahead of your current version.
• The recommended version was released 6 days ago, on 2022-01-18.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Snyk has created this PR to upgrade globby from 12.0.2 to 12.2.0.

:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

• The recommended version is 2 versions ahead of your current version.
• The recommended version was released 7 days ago, on 2022-01-17.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Snyk has created this PR to upgrade stylelint from 14.0.0 to 14.0.1.

:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

• The recommended version is 1 version ahead of your current version.
• The recommended version was released 14 days ago, on 2021-10-26.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs

Snyk has created this PR to upgrade eslint from 8.1.0 to 8.2.0.

:information_source: Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.

• The recommended version is 1 version ahead of your current version.
• The recommended version was released 3 days ago, on 2021-11-05.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

🧐 View latest project report

🛠 Adjust upgrade PR settings

🔕 Ignore this dependency or unsubscribe from future upgrade PRs