Media Fix

- replace this usage with null for partial application to fix undefined "this" error
- update media exports to export all query constants by name in artifak and @artifak/media
- set sideEffects to false for media pkg

packages/artifak/src/index.tsx

@@ -23,4 +23,31 @@ export { TypographyBaseProps } from '@artifak/typography';
 
 export { Imagery, ImageryBase, ImageryProps } from '@artifak/imagery';
 
-export { media } from '@artifak/media';
+export {
+  media,
+  all,
+  screen,
+  onlyScreen,
+  speech,
+  onlySpeech,
+  print,
+  onlyPrint,
+  anyHover,
+  anyHoverNone,
+  hover,
+  hoverNone,
+  anyPointer,
+  anyPointerNone,
+  pointer,
+  pointerNone,
+  displayBrowser,
+  displayFullScreen,
+  displayMinUI,
+  displayStandalone,
+  landscape,
+  portrait,
+  darkColorScheme,
+  lightColorScheme,
+  reducedMotion,
+  reducedMotionAny
+} from '@artifak/media';

packages/media/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@artifak/media",
   "version": "1.0.0",
-  "description": "Artifak media query library",
+  "description": "Artifak media query mixin",
   "keywords": [],
   "author": "Julian Low",
   "license": "MIT",
   "module": "dist/media.esm.js",
   "main": "dist/media.cjs.js",
   "src": "src/index.ts",
   "types": "dist/src/index.d.ts",
+  "sideEffects": false,
   "directories": {
     "src": "src",
     "test": "__tests__"

packages/media/src/index.ts

@@ -1,9 +1,36 @@
 export { media } from './media';
 export { mediaBounds } from './mediaBoundaries';
-export type { Media } from './typings';
+export { Media } from './typings';
 export { MediaBoundaries } from './mediaBoundaries';
 export { MediaInputQueries } from './mediaInput';
 export { MediaTypes } from './mediaTypes';
 export { MediaAccessibilityQueries } from './mediaAccessibilty';
 export { MediaDisplayQueries } from './mediaDisplay';
-export * as queries from './constants';
+
+export {
+  all,
+  screen,
+  onlyScreen,
+  speech,
+  onlySpeech,
+  print,
+  onlyPrint,
+  anyHover,
+  anyHoverNone,
+  hover,
+  hoverNone,
+  anyPointer,
+  anyPointerNone,
+  pointer,
+  pointerNone,
+  displayBrowser,
+  displayFullScreen,
+  displayMinUI,
+  displayStandalone,
+  landscape,
+  portrait,
+  darkColorScheme,
+  lightColorScheme,
+  reducedMotion,
+  reducedMotionAny
+} from './constants';

packages/media/src/mediaBoundaries.ts

@@ -60,8 +60,8 @@ export function createBoundaryString(
 const OPERATOR_REGEX = /(?:[(>|<)=)]+)/g;
 const VALUE_REGEX = /((\d{1,}\/\d{1,})|(\d{1,}(r|em)|px|vh|vw))+/g;
 
-export const extractValues = extractByRegex.bind(this, VALUE_REGEX);
-export const extractOperators = extractByRegex.bind(this, OPERATOR_REGEX);
+export const extractValues = extractByRegex.bind(null, VALUE_REGEX);
+export const extractOperators = extractByRegex.bind(null, OPERATOR_REGEX);
 
 export function extractByRegex(REGEX: RegExp, value: string): string[] {
   return isNonEmptyString(value) ? value.match(REGEX) : [];