twbs / mq4-hover-shim Goto Github PK

PostCSS is currently showing this deprecation warning:
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.

I was happy to see that this lib supports JSPM, so I tried to install and use it:

import mq4HoverShim from 'mq4-hover-shim';

Unfortunately, that fails early with this:

:3000/jspm_packages/npm/[email protected]/dist/browser/mq4-hover-shim.js:59 Uncaught TypeError: $ is not a function$ @ system.js:4
system.js:4 Uncaught Uncaught TypeError: $ is not a function
    Evaluating http://localhost:3000/jspm_packages/npm/[email protected]/dist/browser/mq4-hover-shim.js$ @ system.js:4
localhost/:1 Uncaught (in promise) Uncaught Uncaught TypeError: $ is not a function
    Evaluating http://localhost:3000/jspm_packages/npm/[email protected]/dist/browser/mq4-hover-shim.js
    Evaluating http://localhost:3000/jspm_packages/npm/[email protected]
    Error loading http://localhost:3000/boot.js

I tried to fix it with some weird overrides, but could not get it to work.
I think that system.js detects the format wrongly of the file dist/browser/mq4-hover-shim
because I see this in the header:

"format global";
"deps jquery";
'use strict';

after installing it. Any idea?

http://jamjs.org/docs#Developing_packages

https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm
https://github.com/jspm/registry

X-Ref: twbs/bootstrap#18212

Also, might need to adjust the Gruntfile of the external project that incorporates this.

Currently blocked on eslint/eslint#2134 & eslint/espree#124

Relevant API: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#addListener()

• https://github.com/postcss/postcss-plugin-boilerplate
• https://github.com/postcss/postcss/blob/master/docs/guidelines/plugin.md

This is arguably a tricky situation, as even with the real MQ4 feature this is a grey area (though I seem to remember discussions about dynamically matching this depending on what the user actually uses): on a touchscreen Win8 laptop, maxTouchPoints is usually around 10, so it will identify this as a device that does not support non-emulated hover. However, the user can obviously be using the trackpad or attached mouse. It's more of a philosophical issue of: if the device can be seen as having two equally primary input modes (touchscreen AND trackpad/mouse), which one should match?

I'm having this task for my styles:

gulp.task('styles', function () {
    return gulp.src('app/styles/scss/main.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass({
            includePaths: ['bower_components/bootstrap/scss']
        }))
        .pipe($.postcss([
            require('postcss-font-family'),
            require('postcss-merge-rules'),
            require('postcss-minify-font-weight'),
            require('postcss-normalize-url'),
            require('postcss-discard-empty'),
            require('postcss-will-change'),
            //require('mq4-hover-shim')({hoverSelectorPrefix: '.bs-true-hover '}),
            require('autoprefixer')({browsers: ['last 2 versions']}),
            require('css-mqpacker'),
            require('postcss-reporter')
        ]))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('.tmp/css'))
        .pipe(reload({stream: true}));
});

mq4-hover-shim not postcss plugin, ok. How I should use it?

There are some changes which are not yet published as new release. It would be great to also have them on npm as tagged release.