⚡ intial commit

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[]
+indent_style = tab
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "env": {
+    "jest": true
+  },
+  "extends": ["airbnb-base", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "prettier/prettier": ["error"],
+    "func-names": "off"
+  }
+}

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+npm-debug.log

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "arrowParens": "avoid"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Andriy Tyurnikov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,59 @@
+# @rubakas/media-responsum
+
+> Responsive breakpoints per device form-factor
+
+Install the plugin from npm:
+
+```
+$ npm install rubakas-media-responsum
+```
+
+Then add the plugin to your `tailwind.config.js` file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    // ...
+    // Optional. Your plugin might not have any options at all.
+    rubakasMediaResponsum: {
+      // ...
+      YOUR_PLUGIN_CUSTOM_OPTION: true,
+      // ...
+    },
+  },
+  variants: {
+    // ...
+    // Optional. Your plugin might not have any variants at all.
+    rubakasMediaResponsum: ['responsive'],
+    // ...
+  },
+  plugins: [
+    // ...
+    require('rubakas-media-responsum'),
+    // ...
+  ],
+};
+```
+
+This plugin will generate following CSS:
+
+```css
+/* ... */
+.example-utility-class {
+  display: block;
+}
+
+.custom-utility-class {
+  background-color: red;
+}
+/* ... */
+```
+
+## License
+
+@rubakas/media-responsum is licensed under the MIT License.
+
+## Credits
+
+Created with [create-tailwind-plugin](https://github.com/Landish/create-tailwind-plugin).

index.js

@@ -0,0 +1,51 @@
+const plugin = require('tailwindcss/plugin');
+
+const screens = {
+  // 'phone': {'raw': '(max-width: 507px) or (max-height: 507px)'},
+  // https://parsnip.io/post/ios-9-ipad-multitasking-and-ios-safari/
+  'tablet': {'raw': '(min-width: 507px) and (min-height: 507px)'},
+  'laptop': '1200px',
+  'desktop': '1537px',
+  'desktop-4k': '2049px'
+}
+
+module.exports = plugin(
+  function ({ theme }) {
+    // If your plugin requires user config,
+    // you can access these options here.
+    // Docs: https://tailwindcss.com/docs/plugins#exposing-options
+    // const options = theme('rubakasMediaResponsum');
+
+
+    // Add CSS-in-JS syntax to create utility classes.
+    // Docs: https://tailwindcss.com/docs/plugins#adding-utilities
+    // const utilities = {
+    //   '.example-utility-class': {
+    //     display: 'block',
+    //   },
+    // };
+
+    // Conditionally add utility class based on user configuration.
+    // if (options.YOUR_PLUGIN_CUSTOM_OPTION) {
+    //   utilities['.custom-utility-class'] = {
+    //     'background-color': 'red',
+    //   };
+    // }
+
+    // addUtilities(utilities, {
+    //   variants: variants('rubakasMediaResponsum'),
+    // });
+  },
+  {
+    theme: {
+      screens: {
+        ...screens
+      }
+      // Default options for your custom plugin.
+      // Docs: https://tailwindcss.com/docs/plugins#exposing-options
+      // rubakasMediaResponsum: {
+      //   YOUR_PLUGIN_CUSTOM_OPTION: false,
+      // },
+    },
+  }
+);