@aparajita/tailwind-ionic - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

index.d.ts

+declare interface TailWindIonicOptions {
+  theme?: string
+  abbreviateVariants?: boolean
+}
+
+type TailwindIonicPlugin = (options?: string | TailWindIonicOptions) => void
+
+declare const plugin: TailwindIonicPlugin
+export = plugin

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [1.1.0](https://github.com/aparajita/tailwind-ionic/compare/v1.0.0...v1.1.0) (2022-07-22)
+
+
+### Features
+
+* add abbreviated variant support ([50d3c21](https://github.com/aparajita/tailwind-ionic/commit/50d3c21131b58e70024847376c3c82705a0f4226))
+* add types ([a16eb7c](https://github.com/aparajita/tailwind-ionic/commit/a16eb7cdacceb419ee617bf1d69eb29715c8e7f9))
+
 ## 1.0.0 (2022-07-21)
@@ -7,0 +15,0 @@

index.js

@@ -18,6 +18,13 @@ const fs = require('fs')
 
-function addVariants(add) {
-  variants.forEach((variant) => {
+function addVariants(add, options) {
+  const abbreviate = options?.abbreviateVariants
+
+  for (const variant of variants) {
     const parts = variant.split(':')
-    const name = `ion-${parts[0]}`
+    let variantName = parts[0]
+
+    if (!abbreviate) {
+      variantName = 'ion-' + variantName
+    }
+
     let selector = `${parts[1] || parts[0]}`
@@ -31,10 +38,17 @@
 
-    add(name, selector)
-  })
+    add(variantName, selector)
+  }
 }
 
-function getThemeColors(themePath) {
+function getThemeColors(options) {
   const vars = new Set()
+  let themePath = ''
 
-  if (typeof themePath === 'string') {
+  if (typeof options === 'string') {
+    themePath = options
+  } else if (typeof options === 'object') {
+    themePath = options.theme ?? ''
+  }
+
+  if (themePath) {
     try {
@@ -70,26 +84,30 @@ const theme = fs.readFileSync(themePath, 'utf8')
 module.exports = plugin.withOptions(
-  function () {
+  function (options) {
     return function ({ addVariant }) {
-      addVariants(addVariant)
+      addVariants(addVariant, options)
     }
   },
-  function (themePath) {
+  function (options) {
+    const variantOrder = [
+      'plt-desktop',
+      'plt-mobile',
+      'plt-mobileweb',
+      'plt-native',
+      'plt-ios',
+      'plt-android',
+      'ios',
+      'md'
+    ].map((variant) =>
+      options?.abbreviateVariants ? variant : 'ion-' + variant
+    )
+
     return {
       theme: {
         extend: {
-          colors: themePath ? getThemeColors(themePath) : {}
+          colors: options ? getThemeColors(options) : {}
         }
       },
-      variantOrder: [
-        'ion-plt-desktop',
-        'ion-plt-mobile',
-        'ion-plt-mobileweb',
-        'ion-plt-native',
-        'ion-plt-ios',
-        'ion-plt-android',
-        'ion-ios',
-        'ion-md'
-      ]
+      variantOrder
     }
   }
 )

package.json

 {
   "name": "@aparajita/tailwind-ionic",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Tailwind utilities for Ionic",
@@ -8,2 +8,3 @@ "author": "Aparajita Fishman",
   "main": "index.js",
+  "types": "index.d.ts",
   "engines": {
@@ -10,0 +11,0 @@ "node": ">=16.16.0"

README.md

@@ -12,4 +12,2 @@ <div class="markdown-body">
 
-First install the plugin in your project.
-
 ```shell
@@ -19,3 +17,3 @@ pnpm add @aparajita/tailwind-ionic
 
-Then require the plugin in your `tailwind.config.js` file:
+If you only want the default variants and no Ionic theme colors, add the plugin to your `tailwind.config.js` file:
 
@@ -28,10 +26,4 @@ ```javascript
 
-If you want to convert Ionic CSS theme variables into Tailwind colors, pass the path to the file containing the theme variables.
+If you want to configure the behavior, read on.
 
-```javascript
-module.exports = {
-  plugins: [require('@aparajita/tailwind-ionic')('src/theme/variables.css')]
-}
-```
-
 ## Usage
@@ -46,3 +38,3 @@
 | Variant           | Target                                               |
-| :---------------- | :--------------------------------------------------- |
+|:------------------|:-----------------------------------------------------|
 | ion-plt-desktop   | Desktop mode                                         |
@@ -57,5 +49,21 @@ | ion-plt-mobile    | Mobile-like device (including browser simulations)   |
 
+#### Variant options
+
+By default the full variant names as shown above are used. If you would like to use abbreviated variant names without the `ion-` prefix, pass an options object to the plugin:
+
+```javascript
+const ionic = require('@aparajita/tailwind-ionic')
+
+module.exports = {
+  plugins: [ionic({
+    abbreviatedVariants: true
+  })]
+}
+```
+
+#### Examples (with abbreviated variant names)
+
 ```html
 <!-- BAD. Can't combine these variants with others directly. -->
-<ion-label class="ion-plt-native:ion-plt-ios:text-ion-color-primary" />
+<ion-label class="plt-native:plt-ios:text-ion-color-primary" />
 
@@ -69,5 +77,5 @@ <!--
   class="
-  ion-plt-native:font-bold
-  ion-plt-ios:text-blue-500
-  ion-plt-android:text-yellow-500
+  plt-native:font-bold
+  plt-ios:text-blue-500
+  plt-android:text-yellow-500
 "
@@ -77,3 +85,3 @@ />
 <!-- GOOD. More specific variant overrides. On a real iOS device, red color. -->
-<ion-label class="ion-plt-native:text-blue-500 ion-plt-ios:text-red-500" />
+<ion-label class="plt-native:text-blue-500 plt-ios:text-red-500" />
 ```
@@ -83,4 +91,29 @@
 
-If passed a valid path to a CSS file containing Ionic theme variables, they are converted into Tailwind theme colors. For example, if the file `variables.css` is this:
+If you pass the plugin a valid path to a CSS file containing Ionic theme variables, they are converted into Tailwind theme colors.
 
+```javascript
+const ionic = require('@aparajita/tailwind-ionic')
+
+module.exports = {
+  plugins: [ionic('src/theme/variables.css')]
+}
+```
+
+You may also pass the path as a `.theme` property of an options object, which you will need to do if you also want to set the `abbreviatedVariant` option. 
+
+```javascript
+const ionic = require('@aparajita/tailwind-ionic')
+
+module.exports = {
+  plugins: [ionic({
+    theme: 'src/theme/variables.css',
+    abbreviatedVariants: true
+  })]
+}
+```
+
+#### Example
+
+If the file `variables.css` is this:
+
 ```css
@@ -101,3 +134,3 @@ /** Ionic CSS Variables **/
 
- then your effective Tailwind config ends up being this:
+then your effective Tailwind config ends up being this:
 
@@ -104,0 +137,0 @@ ```js

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74460

2.26%

Number of package files

20

5.26%

Lines of code

116

20.83%

Number of lines in readme file

162

25.58%

No dependency changes