common-breakpoints - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/commonjs/index.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bulmaQueries = exports.bulma = exports.picoQueries = exports.pico = exports.foundationQueries = exports.foundation = exports.muiQueries = exports.mui = exports.tailwindQueries = exports.tailwind = exports.mantineQueries = exports.mantine = exports.bootstrapQueries = exports.bootstrap = void 0;
-exports.bootstrap = {
-    sm: 540,
-    md: 720,
-    lg: 960,
-    xl: 1140,
-    xxl: 1320,
-};
-exports.default = exports.bootstrap;
-exports.bootstrapQueries = {
-    sm: '(min-width: 540px)',
-    md: '(min-width: 720px)',
-    lg: '(min-width: 960px)',
-    xl: '(min-width: 1140px)',
-    xxl: '(min-width: 1320px)',
-};
-exports.mantine = exports.bootstrap;
-exports.mantineQueries = exports.bootstrapQueries;
-exports.tailwind = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    xxl: 1536,
-};
-exports.tailwindQueries = {
-    sm: '(min-width: 640px)',
-    md: '(min-width: 768px)',
-    lg: '(min-width: 1024px)',
-    xl: '(min-width: 1280px)',
-    xxl: '(min-width: 1536px)',
-};
-exports.mui = {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536,
-};
-exports.muiQueries = {
-    xs: '(min-width: 0px)',
-    sm: '(min-width: 600px)',
-    md: '(min-width: 900px)',
-    lg: '(min-width: 1200px)',
-    xl: '(min-width: 1536px)',
-};
-exports.foundation = {
-    small: 0,
-    medium: 640,
-    large: 1024,
-};
-exports.foundationQueries = {
-    small: '(min-width: 0px)',
-    medium: '(min-width: 640px)',
-    large: '(min-width: 1024px)',
-};
-exports.pico = {
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-};
-exports.picoQueries = {
-    sm: '(min-width: 576px)',
-    md: '(min-width: 768px)',
-    lg: '(min-width: 992px)',
-    xl: '(min-width: 1200px)',
-};
-exports.bulma = {
-    mobile: 0,
-    tablet: 769,
-    desktop: 1024,
-    widescreen: 1216,
-    fullhd: 1408,
-};
-exports.bulmaQueries = {
-    mobile: '(min-width: 0px)',
-    tablet: '(min-width: 769px)',
-    desktop: '(min-width: 1024px)',
-    widescreen: '(min-width: 1216px)',
-    fullhd: '(min-width: 1408px)',
-};
+exports.bootstrapQueries = exports.bootstrap = exports.default = exports.tailwindQueries = exports.tailwind = exports.picoQueries = exports.pico = exports.muiQueries = exports.mui = exports.mantineQueries = exports.mantine = exports.foundationQueries = exports.foundation = exports.bulmaQueries = exports.bulma = void 0;
+var bulma_1 = require("./bulma");
+Object.defineProperty(exports, "bulma", { enumerable: true, get: function () { return __importDefault(bulma_1).default; } });
+Object.defineProperty(exports, "bulmaQueries", { enumerable: true, get: function () { return bulma_1.queries; } });
+var foundation_1 = require("./foundation");
+Object.defineProperty(exports, "foundation", { enumerable: true, get: function () { return __importDefault(foundation_1).default; } });
+Object.defineProperty(exports, "foundationQueries", { enumerable: true, get: function () { return foundation_1.queries; } });
+var mantine_1 = require("./mantine");
+Object.defineProperty(exports, "mantine", { enumerable: true, get: function () { return __importDefault(mantine_1).default; } });
+Object.defineProperty(exports, "mantineQueries", { enumerable: true, get: function () { return mantine_1.queries; } });
+var mui_1 = require("./mui");
+Object.defineProperty(exports, "mui", { enumerable: true, get: function () { return __importDefault(mui_1).default; } });
+Object.defineProperty(exports, "muiQueries", { enumerable: true, get: function () { return mui_1.queries; } });
+var pico_1 = require("./pico");
+Object.defineProperty(exports, "pico", { enumerable: true, get: function () { return __importDefault(pico_1).default; } });
+Object.defineProperty(exports, "picoQueries", { enumerable: true, get: function () { return pico_1.queries; } });
+var tailwind_1 = require("./tailwind");
+Object.defineProperty(exports, "tailwind", { enumerable: true, get: function () { return __importDefault(tailwind_1).default; } });
+Object.defineProperty(exports, "tailwindQueries", { enumerable: true, get: function () { return tailwind_1.queries; } });
+var bootstrap_1 = require("./bootstrap");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(bootstrap_1).default; } });
+Object.defineProperty(exports, "bootstrap", { enumerable: true, get: function () { return __importDefault(bootstrap_1).default; } });
+Object.defineProperty(exports, "bootstrapQueries", { enumerable: true, get: function () { return bootstrap_1.queries; } });
 //# sourceMappingURL=index.js.map

dist/esnext/index.js

@@ -1,82 +0,8 @@
-export const bootstrap = {
-    sm: 540,
-    md: 720,
-    lg: 960,
-    xl: 1140,
-    xxl: 1320,
-};
-export default bootstrap;
-export const bootstrapQueries = {
-    sm: '(min-width: 540px)',
-    md: '(min-width: 720px)',
-    lg: '(min-width: 960px)',
-    xl: '(min-width: 1140px)',
-    xxl: '(min-width: 1320px)',
-};
-export const mantine = bootstrap;
-export const mantineQueries = bootstrapQueries;
-export const tailwind = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    xxl: 1536,
-};
-export const tailwindQueries = {
-    sm: '(min-width: 640px)',
-    md: '(min-width: 768px)',
-    lg: '(min-width: 1024px)',
-    xl: '(min-width: 1280px)',
-    xxl: '(min-width: 1536px)',
-};
-export const mui = {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536,
-};
-export const muiQueries = {
-    xs: '(min-width: 0px)',
-    sm: '(min-width: 600px)',
-    md: '(min-width: 900px)',
-    lg: '(min-width: 1200px)',
-    xl: '(min-width: 1536px)',
-};
-export const foundation = {
-    small: 0,
-    medium: 640,
-    large: 1024,
-};
-export const foundationQueries = {
-    small: '(min-width: 0px)',
-    medium: '(min-width: 640px)',
-    large: '(min-width: 1024px)',
-};
-export const pico = {
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-};
-export const picoQueries = {
-    sm: '(min-width: 576px)',
-    md: '(min-width: 768px)',
-    lg: '(min-width: 992px)',
-    xl: '(min-width: 1200px)',
-};
-export const bulma = {
-    mobile: 0,
-    tablet: 769,
-    desktop: 1024,
-    widescreen: 1216,
-    fullhd: 1408,
-};
-export const bulmaQueries = {
-    mobile: '(min-width: 0px)',
-    tablet: '(min-width: 769px)',
-    desktop: '(min-width: 1024px)',
-    widescreen: '(min-width: 1216px)',
-    fullhd: '(min-width: 1408px)',
-};
+export { default as bulma, queries as bulmaQueries } from './bulma';
+export { default as foundation, queries as foundationQueries, } from './foundation';
+export { default as mantine, queries as mantineQueries } from './mantine';
+export { default as mui, queries as muiQueries } from './mui';
+export { default as pico, queries as picoQueries } from './pico';
+export { default as tailwind, queries as tailwindQueries } from './tailwind';
+export { default, default as bootstrap, queries as bootstrapQueries, } from './bootstrap';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "common-breakpoints",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A package exporting common breakpoints from popular CSS frameworks for use in CSS-in-JS libraries.",
@@ -14,8 +14,6 @@ "main": "dist/commonjs/index.js",
     "check": "prettier --check src/**/*.ts",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:watch": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --watch",
     "prepack": "run-s clean build",
-    "publish:major": "np major",
-    "publish:minor": "np minor",
-    "publish:patch": "np patch"
+    "np": "np"
   },
@@ -28,3 +26,11 @@ "jest": {
       "dist"
-    ]
+    ],
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "globals": {
+      "ts-jest": {
+        "useESM": true
+      }
+    }
   },
@@ -47,2 +53,5 @@ "repository": {
     "@types/jest": "^27.4.1",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.14.23",
+    "execa": "^6.1.0",
     "jest": "^27.5.1",
@@ -49,0 +58,0 @@ "np": "^7.6.0",

README.md

@@ -36,2 +36,34 @@ # common-breakpoints
 
+### Queries Module
+
+You can also import directly from `/queries`:
+
+```ts
+// Import the mantine export
+import { mantine as queries } from 'common-breakpoints/queries';
+// Or import directly from the mantine queries
+import mantine from 'common-breakpoints/queries/mantine';
+```
+
+In any case, however you choose to import (root, `/queries`, or
+`/queries/<framework>`), tree-shaking will ensure that you end up with the same
+bundle output. Using `import { mantineQueries } from 'common-breakpoints'`, for
+instance, results in the following bundle output from [esbuild]:
+
+```js
+(() => {
+  // node_modules/common-breakpoints/queries/bootstrap.ts
+  var bootstrap_default = {
+    sm: '(min-width: 540px)',
+    md: '(min-width: 720px)',
+    lg: '(min-width: 960px)',
+    xl: '(min-width: 1140px)',
+    xxl: '(min-width: 1320px)',
+  };
+})();
+```
+
+Yes, `bootstrap.ts` is correct because the `mantine` module actually just
+re-exports the bootstrap module as they use the same breakpoints.
+
 ## License
@@ -41,3 +73,4 @@
 
+[esbuild]: https://esbuild.github.io/ 'An extremely fast JavaScript bundler'
 [tailwind]: https://tailwindcss.com/ 'Rapidly build modern websites without ever leaving your HTML.'
 [stiches]: https://stitches.dev/ 'Style your components with confidence'

tsconfig.json

 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "esnext",
     "target": "esnext",
@@ -12,3 +12,5 @@ "lib": ["esnext"],
     "esModuleInterop": true
-  }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["**/*.test.*", "**/__fixtures__/**"]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27489

increased by129.5%

Number of package files

68

increased by750%

Lines of code

307

increased by71.51%

Number of lines in readme file

75

increased by78.57%

Worsened metrics

Dev dependency count

11

increased by37.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes