tailwindcss-text-indent - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

index.js

 const _ = require('lodash')
+const flatten = require('flat')
 
-module.exports = function ({ indents, variants }) {
-  return function ({ addUtilities, e }) {
-    const utilities = _.map(indents, (size, name) => ({
-      [`.${size.charAt(0) === '-' ? '-' : ''}indent-${name}`]: {
-        textIndent: size,
-      },
-    }))
 
-    addUtilities(utilities, variants)
+const FLATTEN_CONFIG = { delimiter: '-', maxDepth: 2 }
+const handleName = (name, className) => {
+  const split = name.split(`${className}-`)
+  const prefixedName = `${split[0]}${prefixNegativeModifiers(className, split[1])}`
+
+  return prefixedName.split('-default').join('')
+}
+const prefixNegativeModifiers = function(base, modifier) {
+  return _.startsWith(modifier, '-')
+    ? `-${base}-${modifier.slice(1)}`
+    : `${base}-${modifier}`
+}
+
+
+module.exports = function () {
+  return function ({
+    addUtilities, addComponents, addBase, addVariant,
+    e, prefix, theme, variants, config,
+  }) {
+    const buildConfig = (themeKey, ...fallbackKeys) => {
+      return buildConfigFromTheme(themeKey, ...fallbackKeys) || buildConfigFromArray(themeKey)
+    }
+    const buildConfigFromTheme = (themeKey, ...fallbackKeys) => {
+      const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ]
+      const getThemeSettings = (themeKey, fallbackKeys) => {
+        const [newThemeKey, ...newFallbackKeys] = fallbackKeys || []
+
+        return theme(themeKey, false) || (fallbackKeys.length && getThemeSettings(newThemeKey, [...newFallbackKeys]))
+      }
+
+      const themeSettings = getThemeSettings(themeKey, fallbackKeys)
+      const themeObject = _.isArray(themeSettings) ? _.zipObject(themeSettings, themeSettings) : themeSettings
+      const themeEntries = themeSettings && Object
+        .entries(flatten(themeObject, FLATTEN_CONFIG))
+        .map(entry => buildObject(entry))
+
+      return themeSettings ? _.fromPairs(themeEntries) : false
+    }
+    const buildConfigFromArray = (property) => {
+      const defaultSettings = defaultValues[property]
+      const defaultEntries = defaultSettings && defaultSettings
+        .map((value) => ([value, { [property]: value }]))
+
+      return defaultSettings ? _.fromPairs(defaultEntries) : false
+    }
+
+    const defaultValues = {}
+    const pluginUtilities = {
+      'indent': buildConfig('textIndent'),
+    }
+
+    Object.entries(pluginUtilities)
+      .filter(([ modifier, values ]) => !_.isEmpty(values))
+      .forEach(([ modifier, values ]) => {
+        const className = _.kebabCase(modifier)
+        const variantName = Object.keys(Object.entries(values)[0][1])[0]
+        const utilities = flatten({ [`.${e(`${className}`)}`]: values }, FLATTEN_CONFIG)
+
+        addUtilities(
+          _.mapKeys(utilities, (value, key) => handleName(key, className)),
+          variants(variantName, ['responsive'])
+        )
+      })
   }
 }

package.json

 {
   "name": "tailwindcss-text-indent",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Text-indent utilities for Tailwind CSS.",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hacknug/tailwindcss-text-indent.git"
-  },
   "keywords": [
+    "plugin",
     "tailwind",
+    "tailwind css",
     "tailwindcss",
-    "tailwind css",
-    "tailwindcss-plugin",
-    "plugin"
+    "tailwindcss-plugin"
   ],
-  "author": "Nestor Vera <[e-mail]> (https://nestor.rip)",
-  "license": "MIT",
+  "homepage": "https://github.com/hacknug/tailwindcss-text-indent#readme",
   "bugs": {
     "url": "https://github.com/hacknug/tailwindcss-text-indent/issues"
   },
-  "homepage": "https://github.com/hacknug/tailwindcss-text-indent#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hacknug/tailwindcss-text-indent.git"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Nestor Vera",
+    "email": "[e-mail]",
+    "url": "https://nestor.rip/"
+  },
+  "main": "index.js",
+  "scripts": {
+    "dev": "jest --watchAll",
+    "test": "jest"
+  },
   "dependencies": {
-    "lodash": "^4.17.10"
+    "flat": "^4.1.0",
+    "lodash": "^4.17.11"
+  },
+  "devDependencies": {
+    "jest": "^24.8.0",
+    "jest-matcher-css": "^1.0.3",
+    "postcss": "^7.0.16",
+    "tailwindcss": "^1.0.1"
   }
 }

readme.md

@@ -10,2 +10,5 @@ # Tailwind CSS Text Indent Plugin
 ```bash
+# Install using pnpm
+pnpm install --save-dev tailwindcss-text-indent
+
 # Install using npm
@@ -20,21 +23,28 @@ npm install --save-dev tailwindcss-text-indent
 
-Because the plugin preprends a dash to the class name when the value is negative, if you want both positive and negative classes to share the same name, you'll have to require the plugin twice. If you have a better idea on how to deal with this, feel free to open an issue to discuss it.
-
 ```js
-require('tailwindcss-text-indent')({
-  indents: {
-    'sm': '2rem',
-    'md': '3rem',
-    'lg': '4rem',
+// tailwind.config.js
+{
+  theme: { // defaults to these values
+    textIndent: (theme, { negative }) => ({
+      ...{
+        // sm: '120px',
+        // md: '240px',
+        // lg: '360px',
+      },
+      ...negative({
+        // sm: '120px',
+        // md: '240px',
+        // lg: '360px',
+      }),
+    }),
   },
-  variants: ['responsive'],
-})
-require('tailwindcss-text-indent')({
-  indents: {
-    'sm': '-2rem',
-    'md': '-3rem',
-    'lg': '-4rem',
+
+  variants: { // all the following default to ['responsive']
+    textIndent: ['responsive'],
   },
-  variants: ['responsive'],
-})
+
+  plugins: [
+    require('tailwindcss-text-indent')(), // no options to configure
+  ],
+}
 ```
@@ -46,2 +56,3 @@
 .indent-lg { text-indent: 4rem; }
+
 .-indent-sm { text-indent: -2rem; }
@@ -48,0 +59,0 @@ .-indent-md { text-indent: -3rem; }

New alerts

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116153

4855.33%

Number of package files

6

50%

Lines of code

187

1600%

Number of low quality alerts

0

-100%

Number of lines in readme file

59

22.92%

Worsened metrics

Dependency count

2

100%

Dev dependency count

4

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  flat@^4.1.0

• + Added

  flat@4.1.1
  (transitive)

• + Added

  is-buffer@2.0.5
  (transitive)

• Updated

  lodash@^4.17.11