tailwindcss-text-indent
Advanced tools
Comparing version
72
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']) | ||
) | ||
}) | ||
} | ||
} |
{ | ||
"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 <nestorvera@me.com> (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": "nestorvera@me.com", | ||
"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" | ||
} | ||
} |
@@ -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; } |
Major refactor
Supply chain riskPackage 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
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
116153
4855.33%6
50%187
1600%0
-100%59
22.92%2
100%4
Infinity%1
Infinity%+ Added
+ Added
+ Added
Updated