Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

babel-plugin-tailwind-components

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-tailwind-components - npm Package Compare versions

Comparing version 0.5.10 to 1.0.0-alpha.0

utils.umd.js

1130

macro.js

@@ -1,2 +0,1130 @@

var e={"bg-bottom":{backgroundPosition:"bottom"},"bg-center":{backgroundPosition:"center"},"bg-left":{backgroundPosition:"left"},"bg-left-bottom":{backgroundPosition:"left bottom"},"bg-left-top":{backgroundPosition:"left top"},"bg-right":{backgroundPosition:"right"},"bg-right-bottom":{backgroundPosition:"right bottom"},"bg-right-top":{backgroundPosition:"right-top"},"bg-top":{backgroundPosition:"top"},"bg-repeat":{backgroundRepeat:"repeat"},"bg-no-repeat":{backgroundRepeat:"no-repeat"},"bg-repeat-x":{backgroundRepeat:"repeat-x"},"bg-repeat-y":{backgroundRepeat:"repeat-y"},"bg-fixed":{backgroundAttachment:"fixed"},"bg-local":{backgroundAttachment:"local"},"bg-scroll":{backgroundAttachment:"scroll"},"border-solid":{borderStyle:"solid"},"border-dashed":{borderStyle:"dashed"},"border-dotted":{borderStyle:"dotted"},"border-none":{borderStyle:"none"},block:{display:"block"},"inline-block":{display:"inline-block"},inline:{display:"inline"},table:{display:"table"},"table-row":{display:"table-row"},"table-cell":{display:"table-cell"},hidden:{display:"none"},flex:{display:"flex"},"inline-flex":{display:"inline-flex"},"flex-row":{flexDirection:"row"},"flex-row-reverse":{flexDirection:"row-reverse"},"flex-col":{flexDirection:"column"},"flex-col-reverse":{flexDirection:"column-reverse"},"flex-no-wrap":{flexWrap:"nowrap"},"flex-wrap":{flexWrap:"wrap"},"flex-wrap-reverse":{flexWrap:"wrap-reverse"},"justify-start":{justifyContent:"flex-start"},"justify-center":{justifyContent:"center"},"justify-end":{justifyContent:"flex-end"},"justify-between":{justifyContent:"space-between"},"justify-around":{justifyContent:"space-around"},"items-stretch":{alignItems:"flex-stretch"},"items-start":{alignItems:"flex-start"},"items-center":{alignItems:"center"},"items-end":{alignItems:"flex-end"},"items-baseline":{alignItems:"baseline"},"content-start":{alignContent:"flex-start"},"content-center":{alignContent:"center"},"content-end":{alignContent:"flex-end"},"content-between":{alignContent:"space-between"},"content-around":{alignContent:"space-around"},"self-auto":{alignSelf:"auto"},"self-start":{alignSelf:"flex-start"},"self-center":{alignSelf:"center"},"self-end":{alignSelf:"flex-end"},"self-stretch":{alignSelf:"stretch"},"flex-initial":{flex:"initial"},"flex-1":{flex:1},"flex-auto":{flex:"auto"},"flex-none":{flex:"none"},"flex-grow":{flexGrow:1},"flex-shrink":{flexShrink:1},"flex-no-grow":{flexGrow:0},"flex-no-shrink":{flexShrink:0},"float-right":{float:"right"},"float-left":{float:"left"},"float-none":{float:"none"},clearfix:{"::after":{content:'""',display:"table",clear:"both"}},"appearance-none":{appearance:"none"},"cursor-auto":{cursor:"auto"},"cursor-default":{cursor:"default"},"cursor-pointer":{cursor:"pointer"},"cursor-wait":{cursor:"wait"},"cursor-move":{cursor:"move"},"cursor-not-allowed":{cursor:"not-allowed"},"resize-none":{resize:"none"},resize:{resize:"both"},"resize-y":{resize:"vertical"},"resize-x":{resize:"horizontal"},"pointer-events-none":{pointerEvents:"none"},"pointer-events-auto":{pointerEvents:"auto"},"select-none":{userSelect:"none"},"select-text":{userSelect:"text"},"list-reset":{listStyle:"none",padding:0},"overflow-auto":{overflow:"auto"},"overflow-hidden":{overflow:"hidden"},"overflow-visible":{overflow:"visible"},"overflow-scroll":{overflow:"scroll"},"overflow-x-auto":{overflowX:"auto"},"overflow-y-auto":{overflowY:"auto"},"overflow-x-hidden":{overflowX:"hidden"},"overflow-y-hidden":{overflowY:"hidden"},"overflow-x-visible":{overflowX:"visible"},"overflow-y-visible":{overflowY:"visible"},"overflow-x-scroll":{overflowX:"scroll"},"overflow-y-scroll":{overflowY:"scroll"},"scrolling-touch":{webkitOverflowScrolling:"touch"},"scrolling-auto":{webkitOverflowScrolling:"auto"},static:{position:"static"},fixed:{position:"fixed"},absolute:{position:"absolute"},relative:{position:"relative"},sticky:{position:"sticky"},"pin-t":{top:0},"pin-r":{right:0},"pin-b":{bottom:0},"pin-l":{left:0},"pin-y":{top:0,bottom:0},"pin-x":{right:0,left:0},pin:{top:0,right:0,bottom:0,left:0},"pin-none":{top:"auto",right:"auto",bottom:"auto",left:"auto"},"text-left":{textAlign:"left"},"text-center":{textAlign:"center"},"text-right":{textAlign:"right"},"text-justify":{textAlign:"justify"},italic:{fontStyle:"italic"},roman:{fontStyle:"normal"},uppercase:{textTransform:"uppercase"},lowercase:{textTransform:"lowercase"},capitalize:{textTransform:"capitalize"},"normal-case":{textTransform:"none"},underline:{textDecoration:"underline"},"line-through":{textDecoration:"line-through"},"no-underline":{textDecoration:"none"},antialiased:{webkitFontSmoothing:"antialiased",mozOsxFontSmoothing:"grayscale"},"subpixel-antialiased":{webkitFontSmoothing:"auto",mozOsxFontSmoothing:"auto"},"whitespace-normal":{whiteSpace:"normal"},"whitespace-no-wrap":{whiteSpace:"nowrap"},"whitespace-pre":{whiteSpace:"pre"},"whitespace-pre-line":{whiteSpace:"pre-line"},"whitespace-pre-wrap":{whiteSpace:"pre-wrap"},"break-words":{wordWrap:"break-word"},"break-normal":{wordWrap:"normal"},truncate:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},"align-baseline":{verticalAlign:"baseline"},"align-top":{verticalAlign:"top"},"align-middle":{verticalAlign:"middle"},"align-bottom":{verticalAlign:"bottom"},"align-text-top":{verticalAlign:"text-top"},"align-text-bottom":{verticalAlign:"text-bottom"},visible:{visibility:"visible"},invisible:{visibility:"hidden"},"border-collapse":{borderCollapse:"collapse"},"border-separate":{borderCollapse:"separate"},"table-auto":{tableLayout:"auto"},"table-fixed":{tableLayout:"fixed"},"outline-none":{outline:0}},r={bg:[{prop:"backgroundColor",config:"backgroundColors"},{prop:"backgroundSize",config:"backgroundSize"}],"border-t":{prop:"borderTopWidth",config:"borderWidths"},"border-b":{prop:"borderBottomWidth",config:"borderWidths"},"border-l":{prop:"borderLeftWidth",config:"borderWidths"},"border-r":{prop:"borderRightWidth",config:"borderWidths"},border:[{prop:"borderWidth",config:"borderWidths"},{prop:"borderColor",config:"borderColors"}],"rounded-t":{prop:"borderTopRadius",config:"borderRadius"},"rounded-r":{prop:"borderRightRadius",config:"borderRadius"},"rounded-b":{prop:"borderBottomRadius",config:"borderRadius"},"rounded-l":{prop:"borderLeftRadius",config:"borderRadius"},"rounded-tl":{prop:"borderTopLeftRadius",config:"borderRadius"},"rounded-tr":{prop:"borderTopRightRadius",config:"borderRadius"},"rounded-br":{prop:"borderBottomRightRadius",config:"borderRadius"},"rounded-bl":{prop:"borderBottomLeftRadius",config:"borderRadius"},rounded:{prop:"borderRadius",config:"borderRadius"},opacity:{prop:"opacity",config:"opacity"},shadow:{prop:"boxShadow",config:"shadows"},w:{prop:"width",config:"width"},"min-w":{prop:"minWidth",config:"minWidth"},"max-w":{prop:"maxWidth",config:"maxWidth"},h:{prop:"height",config:"height"},"min-h":{prop:"minHeight",config:"minHeight"},"max-h":{prop:"maxHeight",config:"maxHeight"},pt:{prop:"paddingTop",config:"padding"},pr:{prop:"paddingRight",config:"padding"},pb:{prop:"paddingBottom",config:"padding"},pl:{prop:"paddingLeft",config:"padding"},px:{prop:["paddingLeft","paddingRight"],config:"padding"},py:{prop:["paddingTop","paddingBottom"],config:"padding"},p:{prop:"padding",config:"padding"},mt:{prop:"marginTop",config:"margin"},mr:{prop:"marginRight",config:"margin"},mb:{prop:"marginBottom",config:"margin"},ml:{prop:"marginLeft",config:"margin"},mx:{prop:["marginLeft","marginRight"],config:"margin"},my:{prop:["marginTop","marginBottom"],config:"margin"},m:{prop:"margin",config:"margin"},"-mt":{prop:"marginTop",config:"negativeMargin",pre:'"-"+'},"-mr":{prop:"marginRight",config:"negativeMargin",pre:'"-"+'},"-mb":{prop:"marginBottom",config:"negativeMargin",pre:'"-"+'},"-ml":{prop:"marginLeft",config:"negativeMargin",pre:'"-"+'},"-mx":{prop:["marginLeft","marginRight"],config:"negativeMargin",pre:'"-"+'},"-my":{prop:["marginTop","marginBottom"],config:"negativeMargin",pre:'"-"+'},"-m":{prop:"margin",config:"negativeMargin",pre:'"-"+'},fill:{prop:"fill",config:"svgFill"},stroke:{prop:"stroke",config:"svgStroke"},font:[{prop:"fontWeight",config:"fontWeights"},{prop:"fontFamily",config:"fonts",preDev:"(",postDev:" || []).map(x => '\"' + x + '\"').join(', ')",format:function(e){return e.map(function(e){return'"'+e+'"'}).join(", ")}}],text:[{prop:"color",config:"textColors"},{prop:"fontSize",config:"textSizes"}],leading:{prop:"lineHeight",config:"leading"},tracking:{prop:"letterSpacing",config:"tracking"},z:{prop:"zIndex",config:"zIndex"}};function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var o=require("@babel/parser"),n=require("@babel/generator").default;function i(i){var c,g,u=i.path,b=i.t,m=i.configPath,h="production"===process.env.NODE_ENV,v=!h,x="StringLiteral"===u.node.type?"object":i.outputFormat;if(!x||"auto"===x){var w=u.findParent(function(e){return e.isJSXElement()});x=w&&"style"===w.node.openingElement.name.name?"string":"object"}var y,k,S,j=("StringLiteral"===u.node.type?u.node.value:u.node.quasi.quasis[0].value.cooked).match(/\S+/g)||[],R=u.find(function(e){return e.isProgram()});"production"===process.env.NODE_ENV?y=require(m):(k=R.scope.generateUidIdentifier("tailwind"),R.unshiftContainer("body",b.importDeclaration([b.importDefaultSpecifier(k)],b.stringLiteral(m)))),"StringLiteral"===u.node.type&&(S=R.scope.generateUidIdentifier("css"),R.unshiftContainer("body",b.importDeclaration([b.importSpecifier(S,b.identifier("css"))],b.stringLiteral("emotion"))));var W=j.reduce(function(o,n,i){for(var s,u,b=[];null!==s;)(s=n.match(/^([a-z-_]+):/i))&&(n=n.substr(s[0].length),b.push(s[1]));if(b=b.map(function(e){return"hover"===e||"focus"===e||"active"===e?":"+e:h?"@media (min-width: "+y.screens[e]+")":"`@media (min-width: ${"+k.name+'.screens["'+e+'"]})`'}),e[n])return b.length?(f(o,b,p(d(o,b,{}),e[n])),o):p(o,e[n]);if(Object.keys(r).some(function(e){if(n.startsWith(e+"-")||n===e)return u=e,!0}),u){var m,w=n.substr(u.length+1);if(""===w&&(w="default"),Array.isArray(r[u])){var S=r[u].map(function(e){var r=l(e,v),t=r.pre,o=r.post;if(!h||void 0!==y[e.config][w]){var n=e.format?e.format:function(e){return e};return h?((c={})[e.prop]=t||o?t+n(y[e.config][w])+o:n(y[e.config][w]),c):"string"===x?"['"+a(e.prop)+"', "+t+k.name+"."+e.config+'["'+w+'"]'+o+"]":"{"+e.prop+":"+t+k.name+"."+e.config+'["'+w+'"]'+o+"}"}});h?m=S.filter(function(e){return void 0!==e})[0]:"string"===x?(S="["+S.join(",")+"].filter(x => typeof x[1] !== 'undefined' && x[1] !== '')[0].join(':')",(m={})["__spread__"+i]=S):(S="["+S.join(",")+'].filter(x => typeof x[Object.keys(x)[0]] !== "undefined" && x[Object.keys(x)[0]] !== "")[0]',(m={})["__spread__"+i]=S)}else{m=Array.isArray(r[u].prop)?r[u].prop:[r[u].prop];var j=l(r[u],v),R=j.pre,W=j.post,L=r[u].format?r[u].format:function(e){return e};m=m.reduce(function(e,o){return function(e){for(var r=arguments,o=1;o<arguments.length;o++){var n=null!=r[o]?r[o]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),i.forEach(function(r){t(e,r,n[r])})}return e}({},e,((g={})[o]=h?R+L(y[r[u].config][w])+W:"$"+R+k.name+"."+r[u].config+'["'+w+'"]'+W,g))},{})}return b.length?(f(o,b,p(d(o,b,{}),m)),o):p(o,m)}return o},{}),L=s(W,b);if("string"===x){var O=function e(r,t){void 0===t&&(t=!1);var o=t?"/**/":"";return Object.keys(r).reduce(function(t,n){var i=r[n];if(n.startsWith("__spread__"))return t+"${"+i+"};"+o;if("string"==typeof i)return"$"===i[0]&&(i="${"+i.substr(1)+"}"),t+a(n)+":"+i+";"+o;i=e(i);var l=":"===n[0]?"&"+n:n;return l="`"===l[0]?l.substr(1,l.length-2):l,t+a(l)+"{"+i+"};"+o},"")}(W,v),z=u.parentPath;if(z.isTemplateLiteral()){var P=z.get("expressions").indexOf(u),E=z.get("quasis")[P],A=z.get("quasis")[P+1];A.node.value.raw=E.node.value.raw+O+A.node.value.raw,A.node.value.cooked=E.node.value.cooked+O+A.node.value.cooked,E.remove(),u.remove();var C=o.parseExpression(n(z.node).code);z.replaceWith(C)}else{u.replaceWith(o.parseExpression("`"+O+"`"))}}else u.replaceWith("StringLiteral"===u.node.type?b.callExpression(S,[L]):L)}function a(e){return e.replace(/[A-Z]/g,"-$&").toLowerCase().replace(/^(ms|o|moz|webkit)-/,"-$1-")}function l(e,r){var t="",o="";return r&&e.preDev?t=e.preDev:e.pre&&(t=e.pre),r&&e.postDev?o=e.postDev:e.post&&(o=e.post),{pre:t,post:o}}function p(e,r){return Object.assign({},e,r)}function s(e,r){if(null===e)return r.nullLiteral();switch(typeof e){case"function":var t=o.parse(e.toString(),{allowReturnOutsideFunction:!0,allowSuperOutsideMethod:!0});return traverse.removeProperties(t);case"number":return r.numericLiteral(e);case"string":return e.startsWith("$")?o.parseExpression(e.substr(1)):r.stringLiteral(e);case"boolean":return r.booleanLiteral(e);case"undefined":return r.unaryExpression("void",r.numericLiteral(0),!0);default:if(Array.isArray(e))return r.arrayExpression(e.map(function(e){return s(e,r)}));try{return r.objectExpression(c(e,r,"spreadElement"))}catch(t){return r.objectExpression(c(e,r,"spreadProperty"))}}}function c(e,r,t){return Object.keys(e).filter(function(r){return void 0!==e[r]}).map(function(n){if(n.startsWith("__spread__"))return r[t](o.parseExpression(e[n]));var i=n.startsWith("`"),a=i?o.parseExpression(n):r.stringLiteral(n);return r.objectProperty(a,s(e[n],r),i)})}function f(e,r,t){r.split&&(r=r.split("."));for(var o,n=0,i=r.length,a=e;n<i;++n)o=a[r[n]],a=a[r[n]]=n===i-1?t:null==o?{}:o}function d(e,r,t,o){for(o=0,r=r.split?r.split("."):r;e&&o<r.length;)e=e[r[o++]];return void 0===e||o<r.length?t:e}var g=require("babel-plugin-macros").createMacro,u=require("path"),b=g(function(e){var r=e.babel.types,t=e.references,o=e.config,n=u.resolve(e.state.file.opts.sourceRoot||".",o&&o.config||"./tailwind.js");t.default.forEach(function(e){i({path:e.parentPath,t:r,configPath:n,outputFormat:o&&o.format})})},{configName:"tailwind"});module.exports=b;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var babelPluginMacros = require('babel-plugin-macros');
var path = require('path');
var dset = _interopDefault(require('dset'));
var babylon = _interopDefault(require('@babel/parser'));
var dlv = _interopDefault(require('dlv'));
var resolveConfig = _interopDefault(require('tailwindcss/lib/util/resolveConfig.js'));
var defaultTailwindConfig = _interopDefault(require('tailwindcss/stubs/defaultConfig.stub.js'));
function findIdentifier(ref) {
var program = ref.program;
var mod = ref.mod;
var name = ref.name;
var identifier = null;
program.traverse({
ImportDeclaration: function ImportDeclaration(path$$1) {
if (path$$1.node.source.value !== mod) { return; }
path$$1.node.specifiers.some(function (specifier) {
if (specifier.type === 'ImportDefaultSpecifier') {
if (name === 'default') {
identifier = specifier.local;
return true;
}
} else if (specifier.imported.name === name) {
identifier = specifier.local;
return true;
}
return false;
});
}
});
return identifier;
}
function parseTte(ref) {
var path$$1 = ref.path;
var t = ref.types;
var styledIdentifier = ref.styledIdentifier;
var state = ref.state;
var cloneNode = t.cloneNode || t.cloneDeep;
if (path$$1.node.tag.type !== 'Identifier' && path$$1.node.tag.type !== 'MemberExpression' && path$$1.node.tag.type !== 'CallExpression') { return null; }
var str = path$$1.get('quasi').get('quasis')[0].node.value.cooked;
if (path$$1.node.tag.type === 'CallExpression') {
path$$1.get('tag').get('callee').replaceWith(cloneNode(styledIdentifier));
state.shouldImportStyled = true;
} else if (path$$1.node.tag.type === 'MemberExpression') {
path$$1.get('tag').replaceWith(t.callExpression(cloneNode(styledIdentifier), [t.stringLiteral(path$$1.node.tag.property.name)]));
state.shouldImportStyled = true;
}
if (path$$1.node.tag.type === 'CallExpression' || path$$1.node.tag.type === 'MemberExpression') {
path$$1.replaceWith(t.callExpression(cloneNode(path$$1.node.tag), [t.identifier('placeholder'), t.arrowFunctionExpression([t.identifier('p')], t.memberExpression(t.identifier('p'), t.identifier('tw')))]));
path$$1 = path$$1.get('arguments')[0];
}
return {
str: str,
path: path$$1
};
}
var staticStyles = {
// https://tailwindcss.com/docs/display
block: {
display: 'block'
},
'inline-block': {
display: 'inline-block'
},
inline: {
display: 'inline'
},
flex: {
display: 'flex'
},
'inline-flex': {
display: 'inline-flex'
},
table: {
display: 'table'
},
'table-row': {
display: 'table-row'
},
'table-cell': {
display: 'table-cell'
},
hidden: {
display: 'none'
},
// https://tailwindcss.com/docs/float
'float-right': {
float: 'right'
},
'float-left': {
float: 'left'
},
'float-none': {
float: 'none'
},
clearfix: {
'::after': {
content: '""',
display: 'table',
clear: 'both'
}
},
// https://tailwindcss.com/docs/object-fit
'object-contain': {
objectFit: 'contain'
},
'object-cover': {
objectFit: 'cover'
},
'object-fill': {
objectFit: 'fill'
},
'object-none': {
objectFit: 'none'
},
'object-scale-down': {
objectFit: 'scale-down'
},
// https://tailwindcss.com/docs/overflow
'overflow-auto': {
overflow: 'auto'
},
'overflow-hidden': {
overflow: 'hidden'
},
'overflow-visible': {
overflow: 'visible'
},
'overflow-scroll': {
overflow: 'scroll'
},
'overflow-x-auto': {
overflowX: 'auto'
},
'overflow-y-auto': {
overflowY: 'auto'
},
'overflow-x-hidden': {
overflowX: 'hidden'
},
'overflow-y-hidden': {
overflowY: 'hidden'
},
'overflow-x-visible': {
overflowX: 'visible'
},
'overflow-y-visible': {
overflowY: 'visible'
},
'overflow-x-scroll': {
overflowX: 'scroll'
},
'overflow-y-scroll': {
overflowY: 'scroll'
},
'scrolling-touch': {
WebkitOverflowScrolling: 'touch'
},
'scrolling-auto': {
WebkitOverflowScrolling: 'auto'
},
// https://tailwindcss.com/docs/position
static: {
position: 'static'
},
fixed: {
position: 'fixed'
},
absolute: {
position: 'absolute'
},
relative: {
position: 'relative'
},
sticky: {
position: 'sticky'
},
// https://tailwindcss.com/docs/visibility
visible: {
visibility: 'visible'
},
invisible: {
visibility: 'hidden'
},
// https://tailwindcss.com/docs/list-style-position
'list-inside': {
listStylePosition: 'inside'
},
'list-outside': {
listStylePosition: 'outside'
},
// https://tailwindcss.com/docs/text-style
italic: {
fontStyle: 'italic'
},
'not-italic': {
fontStyle: 'normal'
},
uppercase: {
textTransform: 'uppercase'
},
lowercase: {
textTransform: 'lowercase'
},
capitalize: {
textTransform: 'capitalize'
},
'normal-case': {
textTransform: 'none'
},
underline: {
textDecoration: 'underline'
},
'line-through': {
textDecoration: 'line-through'
},
'no-underline': {
textDecoration: 'none'
},
antialiased: {
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale'
},
'subpixel-antialiased': {
WebkitFontSmoothing: 'auto',
MozOsxFontSmoothing: 'auto'
},
// https://tailwindcss.com/docs/text-align
'text-left': {
textAlign: 'left'
},
'text-center': {
textAlign: 'center'
},
'text-right': {
textAlign: 'right'
},
'text-justify': {
textAlign: 'justify'
},
// https://tailwindcss.com/docs/vertical-align
'align-baseline': {
verticalAlign: 'baseline'
},
'align-top': {
verticalAlign: 'top'
},
'align-middle': {
verticalAlign: 'middle'
},
'align-bottom': {
verticalAlign: 'bottom'
},
'align-text-top': {
verticalAlign: 'text-top'
},
'align-text-bottom': {
verticalAlign: 'text-bottom'
},
// https://tailwindcss.com/docs/whitespace
'whitespace-normal': {
whiteSpace: 'normal'
},
'whitespace-no-wrap': {
whiteSpace: 'nowrap'
},
'whitespace-pre': {
whiteSpace: 'pre'
},
'whitespace-pre-line': {
whiteSpace: 'pre-line'
},
'whitespace-pre-wrap': {
whiteSpace: 'pre-wrap'
},
// https://tailwindcss.com/docs/word-break
'break-normal': {
wordBreak: 'normal',
overflowWrap: 'normal'
},
'break-words': {
wordWrap: 'break-word'
},
'break-all': {
wordBreak: 'normal'
},
truncate: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
// https://tailwindcss.com/docs/background-attachment
'bg-fixed': {
backgroundAttachment: 'fixed'
},
'bg-local': {
backgroundAttachment: 'local'
},
'bg-scroll': {
backgroundAttachment: 'scroll'
},
// https://tailwindcss.com/docs/background-repeat
'bg-repeat': {
backgroundRepeat: 'repeat'
},
'bg-no-repeat': {
backgroundRepeat: 'no-repeat'
},
'bg-repeat-x': {
backgroundRepeat: 'repeat-x'
},
'bg-repeat-y': {
backgroundRepeat: 'repeat-y'
},
// https://tailwindcss.com/docs/border-style
'border-solid': {
borderStyle: 'solid'
},
'border-dashed': {
borderStyle: 'dashed'
},
'border-dotted': {
borderStyle: 'dotted'
},
'border-none': {
borderStyle: 'none'
},
// https://tailwindcss.com/docs/flexbox-direction
'flex-row': {
flexDirection: 'row'
},
'flex-row-reverse': {
flexDirection: 'row-reverse'
},
'flex-col': {
flexDirection: 'column'
},
'flex-col-reverse': {
flexDirection: 'column-reverse'
},
// https://tailwindcss.com/docs/flex-wrap
'flex-no-wrap': {
flexWrap: 'nowrap'
},
'flex-wrap': {
flexWrap: 'wrap'
},
'flex-wrap-reverse': {
flexWrap: 'wrap-reverse'
},
// https://tailwindcss.com/docs/align-items
'items-stretch': {
alignItems: 'flex-stretch'
},
'items-start': {
alignItems: 'flex-start'
},
'items-center': {
alignItems: 'center'
},
'items-end': {
alignItems: 'flex-end'
},
'items-baseline': {
alignItems: 'baseline'
},
// https://tailwindcss.com/docs/align-content
'content-start': {
alignContent: 'flex-start'
},
'content-center': {
alignContent: 'center'
},
'content-end': {
alignContent: 'flex-end'
},
'content-between': {
alignContent: 'space-between'
},
'content-around': {
alignContent: 'space-around'
},
// https://tailwindcss.com/docs/align-self
'self-auto': {
alignSelf: 'auto'
},
'self-start': {
alignSelf: 'flex-start'
},
'self-center': {
alignSelf: 'center'
},
'self-end': {
alignSelf: 'flex-end'
},
'self-stretch': {
alignSelf: 'stretch'
},
// https://tailwindcss.com/docs/justify-content
'justify-start': {
justifyContent: 'flex-start'
},
'justify-center': {
justifyContent: 'center'
},
'justify-end': {
justifyContent: 'flex-end'
},
'justify-between': {
justifyContent: 'space-between'
},
'justify-around': {
justifyContent: 'space-around'
},
// https://tailwindcss.com/docs/border-collapse
'border-collapse': {
borderCollapse: 'collapse'
},
'border-separate': {
borderCollapse: 'separate'
},
// https://tailwindcss.com/docs/table-layout
'table-auto': {
tableLayout: 'auto'
},
'table-fixed': {
tableLayout: 'fixed'
},
// https://tailwindcss.com/docs/appearance
'appearance-none': {
appearance: 'none'
},
// https://tailwindcss.com/docs/outline
'outline-none': {
outline: 0
},
// https://tailwindcss.com/docs/pointer-events
'pointer-events-none': {
pointerEvents: 'none'
},
'pointer-events-auto': {
pointerEvents: 'auto'
},
// https://tailwindcss.com/docs/resize
'resize-none': {
resize: 'none'
},
resize: {
resize: 'both'
},
'resize-y': {
resize: 'vertical'
},
'resize-x': {
resize: 'horizontal'
},
// https://tailwindcss.com/docs/user-select
'select-none': {
userSelect: 'none'
},
'select-text': {
userSelect: 'text'
}
};
var dynamicStyles = {
// https://tailwindcss.com/docs/background-color
// https://tailwindcss.com/docs/background-size
bg: [{
prop: 'backgroundColor',
config: 'backgroundColor'
}, {
prop: 'backgroundSize',
config: 'backgroundSize'
}, {
prop: 'backgroundPosition',
config: 'backgroundPosition'
}],
// https://tailwindcss.com/docs/border-width
'border-t': {
prop: 'borderTopWidth',
config: 'borderWidth'
},
'border-b': {
prop: 'borderBottomWidth',
config: 'borderWidth'
},
'border-l': {
prop: 'borderLeftWidth',
config: 'borderWidth'
},
'border-r': {
prop: 'borderRightWidth',
config: 'borderWidth'
},
// https://tailwindcss.com/docs/border-color
border: [{
prop: 'borderWidth',
config: 'borderWidth'
}, {
prop: 'borderColor',
config: 'borderColor'
}],
// https://tailwindcss.com/docs/border-radius
'rounded-tl': {
prop: 'borderTopLeftRadius',
config: 'borderRadius'
},
'rounded-tr': {
prop: 'borderTopRightRadius',
config: 'borderRadius'
},
'rounded-br': {
prop: 'borderBottomRightRadius',
config: 'borderRadius'
},
'rounded-bl': {
prop: 'borderBottomLeftRadius',
config: 'borderRadius'
},
'rounded-t': {
prop: ['borderTopLeftRadius', 'borderTopRightRadius'],
config: 'borderRadius'
},
'rounded-r': {
prop: ['borderTopRightRadius', 'borderBottomRightRadius'],
config: 'borderRadius'
},
'rounded-b': {
prop: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
config: 'borderRadius'
},
'rounded-l': {
prop: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
config: 'borderRadius'
},
rounded: {
prop: 'borderRadius',
config: 'borderRadius'
},
// https://tailwindcss.com/docs/opacity
opacity: {
prop: 'opacity',
config: 'opacity'
},
// https://tailwindcss.com/docs/shadows
shadow: {
prop: 'boxShadow',
config: 'boxShadow'
},
// https://tailwindcss.com/docs/width
w: {
prop: 'width',
config: 'width'
},
// https://tailwindcss.com/docs/min-width
'min-w': {
prop: 'minWidth',
config: 'minWidth'
},
// https://tailwindcss.com/docs/max-width
'max-w': {
prop: 'maxWidth',
config: 'maxWidth'
},
// https://tailwindcss.com/docs/height
h: {
prop: 'height',
config: 'height'
},
// https://tailwindcss.com/docs/min-height
'min-h': {
prop: 'minHeight',
config: 'minHeight'
},
// https://tailwindcss.com/docs/max-height
'max-h': {
prop: 'maxHeight',
config: 'maxHeight'
},
// https://tailwindcss.com/docs/spacing
pt: {
prop: 'paddingTop',
config: 'padding'
},
pr: {
prop: 'paddingRight',
config: 'padding'
},
pb: {
prop: 'paddingBottom',
config: 'padding'
},
pl: {
prop: 'paddingLeft',
config: 'padding'
},
px: {
prop: ['paddingLeft', 'paddingRight'],
config: 'padding'
},
py: {
prop: ['paddingTop', 'paddingBottom'],
config: 'padding'
},
p: {
prop: 'padding',
config: 'padding'
},
mt: {
prop: 'marginTop',
config: 'margin'
},
mr: {
prop: 'marginRight',
config: 'margin'
},
mb: {
prop: 'marginBottom',
config: 'margin'
},
ml: {
prop: 'marginLeft',
config: 'margin'
},
mx: {
prop: ['marginLeft', 'marginRight'],
config: 'margin'
},
my: {
prop: ['marginTop', 'marginBottom'],
config: 'margin'
},
m: {
prop: 'margin',
config: 'margin'
},
'-mt': {
prop: 'marginTop',
config: 'negativeMargin',
pre: '"-"+'
},
'-mr': {
prop: 'marginRight',
config: 'negativeMargin',
pre: '"-"+'
},
'-mb': {
prop: 'marginBottom',
config: 'negativeMargin',
pre: '"-"+'
},
'-ml': {
prop: 'marginLeft',
config: 'negativeMargin',
pre: '"-"+'
},
'-mx': {
prop: ['marginLeft', 'marginRight'],
config: 'negativeMargin',
pre: '"-"+'
},
'-my': {
prop: ['marginTop', 'marginBottom'],
config: 'negativeMargin',
pre: '"-"+'
},
'-m': {
prop: 'margin',
config: 'negativeMargin',
pre: '"-"+'
},
// https://tailwindcss.com/docs/svg
fill: {
prop: 'fill',
config: 'fill'
},
stroke: {
prop: 'stroke',
config: 'stroke'
},
// https://tailwindcss.com/docs/fonts
font: [{
prop: 'fontWeight',
config: 'fontWeight'
}, {
prop: 'fontFamily',
config: 'fontFamily'
}],
text: [{
prop: 'color',
config: 'textColor'
}, {
prop: 'fontSize',
config: 'fontSize'
}],
// https://tailwindcss.com/docs/line-height
leading: {
prop: 'lineHeight',
config: 'lineHeight'
},
// https://tailwindcss.com/docs/letter-spacing
tracking: {
prop: 'letterSpacing',
config: 'letterSpacing'
},
// https://tailwindcss.com/docs/z-index
z: {
prop: 'zIndex',
config: 'zIndex'
},
cursor: {
prop: 'cursor',
config: 'cursor'
},
object: {
prop: 'objectPosition',
config: 'objectPosition'
},
flex: {
prop: 'flex',
config: 'flex'
},
'flex-grow': {
prop: 'flexGrow',
config: 'flexGrow'
},
'flex-shrink': {
prop: 'flexShrink',
config: 'flexShrink'
},
list: {
prop: 'listStyleType',
config: 'listStyleType'
},
top: {
prop: 'top',
config: 'inset'
},
right: {
prop: 'right',
config: 'inset'
},
bottom: {
prop: 'bottom',
config: 'inset'
},
left: {
prop: 'left',
config: 'inset'
},
'inset-x': {
prop: ['left', 'right'],
config: 'inset'
},
'inset-y': {
prop: ['top', 'bottom'],
config: 'inset'
},
inset: {
prop: ['top', 'right', 'bottom', 'left'],
config: 'inset'
}
};
function astify(literal, t) {
if (literal === null) {
return t.nullLiteral();
}
switch (typeof literal) {
case 'function':
var ast = babylon.parse(literal.toString(), {
allowReturnOutsideFunction: true,
allowSuperOutsideMethod: true
});
return traverse.removeProperties(ast);
case 'number':
return t.numericLiteral(literal);
case 'string':
if (literal.startsWith('__computed__')) {
return babylon.parseExpression(literal.substr(12));
}
return t.stringLiteral(literal);
case 'boolean':
return t.booleanLiteral(literal);
case 'undefined':
return t.unaryExpression('void', t.numericLiteral(0), true);
default:
if (Array.isArray(literal)) {
return t.arrayExpression(literal.map(function (x) { return astify(x, t); }));
}
try {
return t.objectExpression(objectExpressionElements(literal, t, 'spreadElement'));
} catch (err) {
return t.objectExpression(objectExpressionElements(literal, t, 'spreadProperty'));
}
}
}
function objectExpressionElements(literal, t, spreadType) {
return Object.keys(literal).filter(function (k) {
return typeof literal[k] !== 'undefined';
}).map(function (k) {
if (k.startsWith('__spread__')) {
return t[spreadType](babylon.parseExpression(literal[k]));
} else {
var computed = k.startsWith('__computed__');
var key = computed ? babylon.parseExpression(k.substr(12)) : t.stringLiteral(k);
return t.objectProperty(key, astify(literal[k], t), computed);
}
});
}
function stringifyScreen(config, screen) {
screen = config.theme.screens[screen];
if (typeof screen === 'string') { return ("@media (min-width: " + screen + ")"); }
if (typeof screen.raw === 'string') {
return ("@media " + (screen.raw));
}
var str = (Array.isArray(screen) ? screen : [screen]).map(function (range) {
return [typeof range.min === 'string' ? ("(min-width: " + (range.min) + ")") : null, typeof range.max === 'string' ? ("(max-width: " + (range.max) + ")") : null].filter(Boolean).join(' and ');
}).join(', ');
return str ? ("@media " + str) : '';
}
function resolveStyle(config, opts, key) {
var obj, obj$1;
for (var i = 0, list = opts; i < list.length; i += 1) {
var opt = list[i];
if (['backgroundColor', 'borderColor', 'textColor', 'fill', 'stroke'].includes(opt.config)) {
var colors = flattenColors(dlv(config, ['theme', opt.config], {}));
if (typeof colors[key] !== 'undefined') {
return ( obj = {}, obj[opt.prop] = colors[key], obj );
}
} else {
var value = dlv(config, ['theme', opt.config, key]);
if (typeof value !== 'undefined') {
if (opt.config === 'fontFamily' && Array.isArray(value)) {
value = value.join(', ');
}
return ( obj$1 = {}, obj$1[opt.prop] = value, obj$1 );
}
}
}
return {};
}
function flattenColors(colors) {
var result = {};
for (var color in colors) {
if (colors[color] === Object(colors[color])) {
for (var key in colors[color]) {
var suffix = key === 'default' ? '' : ("-" + key);
result[("" + color + suffix)] = colors[color][key];
}
} else {
result[color] = colors[color];
}
}
return result;
}
function transformString(ref) {
var path$$1 = ref.path;
var str = ref.str;
var state = ref.state;
var t = ref.types;
var classNames = str.match(/\S+/g) || [];
var styles = classNames.reduce(function (acc, className, index) {
var obj$1;
var modifiers = [];
var modifier;
while (modifier !== null) {
modifier = className.match(/^([a-z-_]+):/i);
if (modifier) {
className = className.substr(modifier[0].length);
modifiers.push(modifier[1]);
}
}
modifiers = modifiers.map(function (mod) {
if (['hover', 'focus', 'active', 'focus-within'].includes(mod)) {
return (":" + mod);
}
if (mod === 'group') {
return '.group &';
}
if (mod === 'group-hover') {
return '.group:hover &';
}
if (state.isDev) {
state.shouldImportConfig = true;
}
return state.isProd ? stringifyScreen(state.config, mod) : '__computed__' + state.tailwindUtilsIdentifier.name + '.stringifyScreen(' + state.tailwindConfigIdentifier.name + ', "' + mod + '")';
});
if (staticStyles[className]) {
if (modifiers.length) {
dset(acc, modifiers, Object.assign({}, dlv(acc, modifiers, {}),
staticStyles[className]));
return acc;
} else {
return Object.assign({}, acc,
staticStyles[className]);
}
}
var prefix;
Object.keys(dynamicStyles).some(function (k) {
if (className.startsWith(k + '-') || className === k) {
prefix = k;
return true;
}
});
if (prefix) {
if (state.isDev) {
state.shouldImportConfig = true;
}
var key = className.substr(prefix.length + 1);
if (key === '') { key = 'default'; }
var obj;
if (Array.isArray(dynamicStyles[prefix])) {
obj = state.isProd ? resolveStyle(state.config, dynamicStyles[prefix], key) : ( obj$1 = {}, obj$1['__spread__' + index] = state.tailwindUtilsIdentifier.name + '.resolveStyle(' + state.tailwindConfigIdentifier.name + ', ' + JSON.stringify(dynamicStyles[prefix]) + ',"' + key + '")', obj$1 );
} else {
var props = Array.isArray(dynamicStyles[prefix].prop) ? dynamicStyles[prefix].prop : [dynamicStyles[prefix].prop];
obj = props.reduce(function (a, c) {
var obj, obj$1;
var pre = dynamicStyles[prefix].config === 'negativeMargin' ? '-' : '';
if (pre && state.isDev) {
pre = "\"" + pre + "\" + ";
}
return state.isProd ? Object.assign({}, a,
( obj = {}, obj[c] = pre + state.config.theme[dynamicStyles[prefix].config][key], obj )) : Object.assign({}, a,
( obj$1 = {}, obj$1[c] = '__computed__' + pre + state.tailwindConfigIdentifier.name + '.theme.' + dynamicStyles[prefix].config + '["' + key + '"]', obj$1 ));
}, {});
}
if (modifiers.length) {
dset(acc, modifiers, Object.assign({}, dlv(acc, modifiers, {}),
obj));
return acc;
} else {
return Object.assign({}, acc,
obj);
}
}
return acc;
}, {});
var ast = astify(styles, t);
if (state.isDev) {
ast = assignify(ast, t);
}
path$$1.replaceWith(ast);
}
function assignify(objAst, t) {
if (objAst.type !== 'ObjectExpression') { return objAst; }
var cloneNode = t.cloneNode || t.cloneDeep;
var currentChunk = [];
var chunks = [];
objAst.properties.forEach(function (property) {
if (property.type === 'SpreadElement') {
if (currentChunk.length) {
chunks.push(cloneNode(t.objectExpression(currentChunk)));
currentChunk.length = 0;
}
chunks.push(cloneNode(property.argument));
} else {
property.value = assignify(property.value, t);
currentChunk.push(property);
}
});
if (chunks.length === 0) { return objAst; }
if (currentChunk.length) {
chunks.push(cloneNode(t.objectExpression(currentChunk)));
}
return t.callExpression(t.memberExpression(t.identifier('Object'), t.identifier('assign')), chunks);
}
function addImport(ref) {
var t = ref.types;
var program = ref.program;
var mod = ref.mod;
var name = ref.name;
var identifier = ref.identifier;
if (name === 'default') {
program.unshiftContainer('body', t.importDeclaration([t.importDefaultSpecifier(identifier)], t.stringLiteral(mod)));
} else {
program.unshiftContainer('body', t.importDeclaration([t.importSpecifier(identifier, t.identifier(name))], t.stringLiteral(mod)));
}
}
var macro = babelPluginMacros.createMacro(function (ref) {
var t = ref.babel.types;
var references = ref.references;
var state = ref.state;
var config = ref.config;
var sourceRoot = state.file.opts.sourceRoot || '.';
var configFile = config && config.config;
var configPath = path.resolve(sourceRoot, configFile || './tailwind.config.js');
state.tailwindConfigIdentifier = state.file.path.scope.generateUidIdentifier('tailwindConfig');
state.tailwindUtilsIdentifier = state.file.path.scope.generateUidIdentifier('tailwindUtils');
state.isProd = process.env.NODE_ENV === 'production';
state.isDev = !state.isProd;
if (state.isProd) {
state.config = resolveConfig([require(configPath), defaultTailwindConfig]);
}
var styledImport = config && config.styled ? {
import: config.styled.import || 'default',
from: config.styled.from || config.styled
} : {
import: 'default',
from: '@emotion/styled'
};
state.existingStyledIdentifier = false;
state.styledIdentifier = findIdentifier({
program: state.file.path,
mod: styledImport.from,
name: styledImport.import
});
if (state.styledIdentifier === null) {
state.styledIdentifier = state.file.path.scope.generateUidIdentifier('styled');
} else {
state.existingStyledIdentifier = true;
}
references.default.forEach(function (path$$1) {
var parent = path$$1.findParent(function (x) { return x.isTaggedTemplateExpression(); });
if (!parent) { return; }
var parsed = parseTte({
path: parent,
types: t,
styledIdentifier: state.styledIdentifier,
state: state
});
if (!parsed) { return; }
transformString({
path: parsed.path,
str: parsed.str,
types: t,
state: state
});
return;
visit({
path: parsed.path,
str: parsed.str,
t: t,
configPath: configPath,
outputFormat: config && config.format,
state: state
});
});
if (state.shouldImportStyled && !state.existingStyledIdentifier) {
addImport({
types: t,
program: state.file.path,
mod: styledImport.from,
name: styledImport.import,
identifier: state.styledIdentifier
});
}
if (state.shouldImportConfig) {
var configImportPath = './' + path.relative(path.dirname(state.file.opts.filename), configPath);
var originalConfigIdentifier = state.file.path.scope.generateUidIdentifier('tailwindConfig');
state.file.path.unshiftContainer('body', t.variableDeclaration('const', [t.variableDeclarator(state.tailwindConfigIdentifier, t.callExpression(t.memberExpression(state.tailwindUtilsIdentifier, t.identifier('resolveConfig')), [originalConfigIdentifier]))]));
state.file.path.unshiftContainer('body', t.importDeclaration([t.importDefaultSpecifier(originalConfigIdentifier)], t.stringLiteral(configImportPath)));
state.file.path.unshiftContainer('body', t.importDeclaration([t.importDefaultSpecifier(state.tailwindUtilsIdentifier)], t.stringLiteral('tailwind.macro/utils.umd.js')));
}
}, {
configName: 'tailwind'
});
module.exports = macro;
//# sourceMappingURL=macro.js.map

30

package.json
{
"name": "babel-plugin-tailwind-components",
"version": "0.5.10",
"version": "1.0.0-alpha.0",
"description": "Use Tailwind with any CSS-in-JS library",
"main": "dist/index.js",
"main": "macro.js",
"scripts": {
"babel": "babel --plugins=@babel/plugin-proposal-object-rest-spread --no-babelrc -d build src",
"build": "npm run -s babel && microbundle -i build/index.js -f cjs && microbundle -i build/macro.js -f cjs -o ./macro.js",
"build": "microbundle -i src/macro.js -f cjs -o ./macro.js --target node && microbundle -i src/utils.js -f umd -o ./utils.js",
"test": "npm run build && jest",
"prepublish": "npm run build"

@@ -23,4 +23,4 @@ },

"files": [
"dist",
"macro.js"
"macro.js",
"utils.umd.js"
],

@@ -34,13 +34,15 @@ "author": "Brad Cornes <bradlc41@gmail.com>",

"dependencies": {
"@babel/generator": "^7.0.0",
"@babel/parser": "^7.0.0",
"babel-plugin-macros": "^2.1.0"
"@babel/parser": "^7.4.2",
"babel-plugin-macros": "^2.5.1",
"dlv": "^1.1.2",
"dset": "^2.0.1",
"tailwindcss": "^1.0.0-beta.4"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"microbundle": "^0.4.3"
"babel-plugin-tester": "^6.0.1",
"glob-all": "^3.1.0",
"jest": "^24.5.0",
"microbundle": "^0.11.0",
"prettier": "^1.16.4"
}
}
dist/index.js
dist/index.js.map
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc