@cryptic-css/prop-mq - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

dist/index.js

@@ -1,5 +0,8 @@
-import ccss, { setProps } from '@cryptic-css/core';
-import mediaQuery from '@w11r/use-breakpoint/dist/mediaQuery';
-setProps({
-  mq: input => {
+import { mediaQuery } from '@w11r/use-breakpoint';
+export default ((_ref) => {
+  let {
+    props
+  } = _ref;
+
+  props.mq = (input, prop, options) => {
     if (typeof input[0] === 'string') {
@@ -10,7 +13,7 @@ input = [input];
     for (const bpv of input) {
-      bpv[1] = ccss(bpv[1]);
+      bpv[1] = options.__ccss(bpv[1]);
     }
 
-    return mediaQuery(input);
-  }
+    return mediaQuery(input, options.outputTransformer.type);
+  };
 });

dist/test.js

@@ -1,3 +0,11 @@
-import ccss from '@cryptic-css/core';
-import '.';
+import { createCCSS, createOptions, objectOutputTransformer } from '@cryptic-css/core';
+import applyPropMq from '.';
+const options = createOptions();
+const optionsObject = createOptions({
+  outputTransformer: objectOutputTransformer
+});
+const ccss = createCCSS(options);
+const ccssObject = createCCSS(optionsObject);
+applyPropMq(options);
+applyPropMq(optionsObject);
 describe('prop-mq', () => {
@@ -14,2 +22,20 @@ it('should run ccss through values', () => {
   });
+  it('should run ccss through values:object', () => {
+    expect(ccssObject({
+      m: 1,
+      mq: [['mobile', {
+        m: 2
+      }], ['tablet', {
+        m: 3
+      }]]
+    })).toStrictEqual({
+      margin: '1rem',
+      '@media screen and (min-width: 376px) and (max-width: 639px) ': {
+        margin: '2rem'
+      },
+      '@media screen and (min-width: 640px) and (max-width: 1023px) ': {
+        margin: '3rem'
+      }
+    });
+  });
 });

package.json

 {
     "name": "@cryptic-css/prop-mq",
-    "version": "1.0.2",
+    "version": "2.0.0",
     "description": "Adds support for the `mq` prop to write media queries using `@w11r/use-breakpoint`.",
@@ -26,11 +26,11 @@ "author": "Victor Vincent <[e-mail]>",
     "dependencies": {
-        "@w11r/use-breakpoint": "^1.3.2"
+        "@w11r/use-breakpoint": "^1.4.0"
     },
     "peerDependencies": {
-        "@cryptic-css/core": "^1.0.1"
+        "@cryptic-css/core": "^1.0.2"
     },
     "devDependencies": {
-        "@cryptic-css/core": "^1.0.2"
+        "@cryptic-css/core": "^2.0.0"
     },
-    "gitHead": "6201693108f080ed447f00f8acc9684ba2c4dd07"
+    "gitHead": "d791131dcc71f4e3536e7bb4cd3e85f781a257b9"
 }

src/index.ts

@@ -1,6 +0,5 @@
-import ccss, { setProps } from '@cryptic-css/core'
-import mediaQuery from '@w11r/use-breakpoint/dist/mediaQuery'
+import { mediaQuery } from '@w11r/use-breakpoint'
 
-setProps({
-    mq: input => {
+export default ({ props }) => {
+    props.mq = (input, prop, options) => {
         if (typeof input[0] === 'string') {
@@ -10,6 +9,6 @@ input = [input]
         for (const bpv of input) {
-            bpv[1] = ccss(bpv[1])
+            bpv[1] = options.__ccss(bpv[1])
         }
-        return mediaQuery(input)
+        return mediaQuery(input, options.outputTransformer.type)
     }
-})
+}

src/test.ts

@@ -1,4 +0,13 @@
-import ccss from '@cryptic-css/core'
-import '.'
+import { createCCSS, createOptions, objectOutputTransformer } from '@cryptic-css/core'
+import applyPropMq from '.'
 
+const options = createOptions()
+const optionsObject = createOptions({
+    outputTransformer: objectOutputTransformer
+})
+const ccss = createCCSS(options)
+const ccssObject = createCCSS(optionsObject)
+applyPropMq(options)
+applyPropMq(optionsObject)
+
 describe('prop-mq', () => {
@@ -18,2 +27,20 @@ it('should run ccss through values', () => {
     })
+
+    it('should run ccss through values:object', () => {
+        expect(
+            ccssObject({
+                m: 1,
+                mq: [
+                    ['mobile', { m: 2 }],
+                    ['tablet', { m: 3 }]
+                ]
+            })
+        ).toStrictEqual({
+            margin: '1rem',
+            '@media screen and (min-width: 376px) and (max-width: 639px) ': {
+                margin: '2rem'
+            },
+            '@media screen and (min-width: 640px) and (max-width: 1023px) ': { margin: '3rem' }
+        })
+    })
 })

No alert changes

Improved metrics

Total package byte prevSize

5118

increased by20.85%

Lines of code

107

increased by2.88%

Dependency changes

• Updated@w11r/use-breakpoint@^1.4.0