🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

tailwindcss-text-indent

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-text-indent - npm Package Compare versions

Comparing version

to
1.0.0

.travis.yml

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'])
)
})
}
}

41

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 <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; }