diff --git a/.gitignore b/.gitignore index 3dbcd5b..42aadb4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ /node_modules /coverage package-lock.json +.idea diff --git a/README.md b/README.md index b2e73ee..f32f630 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,17 @@ The utility classes are transformed to valid object names and are all children o ```jsx harmony import { t } from 'react-native-tailwindcss'; - + ``` +or if you want to use `tailwind's` class name instead. +```jsx harmony +import { c } from 'react-native-tailwindcss'; + + +``` +(Both above examples are same). + Use the `tailwind.config.js` file you know and love, to customize your styles or just use default tailwind styles. In react native, sometimes you only need a color value. We've got you covered. @@ -69,6 +77,50 @@ const SView = styled(View)` ``` +## :monocle_face: Hmmm... You need custom configs +```javascript +import { Tailwind } from 'react-native-tailwindcss/tailwind'; + +const tailwind = new Tailwind(yourCustomConfig); +const t = tailwind.style; + + + +// OR +const c = tailwind.converter; + +``` + +### Using in Hooks +```javascript +import {View} from 'react-native'; +import {useDarkMode} from 'react-native-dynamic' +import { Tailwind } from 'react-native-tailwindcss/tailwind'; + +const useTailwindCss = () => { + const isDarkMode = useDarkMode(); + + const tailwind = new Tailwind({ + theme: { + extend: { + colors: { + primary: isDarkMode? '#FFFFFF' : '#000000' + } + } + } + }); + + return tailwind.converter; +}; + +const MyComponent = () => { + const c = useTailwindCss(); + + return + +}; +``` + ## General Conventions Every 'class' uses the *camelCase* naming convention instead of tailwindCSS's *kebab-case*. diff --git a/__tests__/adjustable.test.js b/__tests__/adjustable.test.js index a785948..96c1f21 100644 --- a/__tests__/adjustable.test.js +++ b/__tests__/adjustable.test.js @@ -1,6 +1,5 @@ -import color from '../color'; import generator from '../util/generator'; -import theme from './fixtures/testConfigHandler'; +import {theme} from './fixtures/testConfigHandler'; test('custom colors', () => { const result = generator.generate('text', 'color', generator.generateColors(theme.colors)); diff --git a/__tests__/color.test.js b/__tests__/color.test.js index ec08759..26ff920 100644 --- a/__tests__/color.test.js +++ b/__tests__/color.test.js @@ -1,5 +1,5 @@ -import color from '../color'; +import {colors} from '../index'; test('default colors', () => { - expect(color).toEqual(require('./fixtures/outputs/color/color-output')); + expect(colors).toEqual(require('./fixtures/outputs/color/color-output')); }); diff --git a/__tests__/configHandler.test.js b/__tests__/configHandler.test.js index 8831c84..9dceb94 100644 --- a/__tests__/configHandler.test.js +++ b/__tests__/configHandler.test.js @@ -1,4 +1,4 @@ -import theme from '../util/configHandler'; +import {theme} from '../index'; test('resolving default config file when no config file is present', () => { expect(theme.flexShrink).toEqual({ diff --git a/__tests__/converter.js b/__tests__/converter.js new file mode 100644 index 0000000..dddaf09 --- /dev/null +++ b/__tests__/converter.js @@ -0,0 +1,19 @@ +import {c, t} from '../index'; + +test('class name should match normal style', () => { + expect(c('bg-blue-500')).toEqual(t.bgBlue500); + expect(c('-mx-10')).toEqual(t._mx10); + expect(c('w-1/2')).toEqual(t.w1_2); + expect(c('shadow-md')).toEqual(t.shadowMd); +}); + +test('flatten classes', () => { + let style = {}; + [t.bgBlue500, t.bgBlack, t._mx10, t.w1_2, t.shadowMd].map( + x => { + style = { ...style, ...x } + } + ); + + expect(c('bg-blue-500 bg-black -mx-10 w-1/2 shadow-md')).toEqual(style); +}); diff --git a/__tests__/fixtures/outputs/tailwind/margin.js b/__tests__/fixtures/outputs/tailwind/margin.js index d0a1ce3..81b22a2 100644 --- a/__tests__/fixtures/outputs/tailwind/margin.js +++ b/__tests__/fixtures/outputs/tailwind/margin.js @@ -16,154 +16,154 @@ module.exports = { _m6: {margin: -24}, _m64: {margin: -256}, _m8: {margin: -32}, - _mB1: {marginBottom: -4}, - _mB10: {marginBottom: -40}, - _mB12: {marginBottom: -48}, - _mB16: {marginBottom: -64}, - _mB2: {marginBottom: -8}, - _mB20: {marginBottom: -80}, - _mB24: {marginBottom: -96}, - _mB3: {marginBottom: -12}, - _mB32: {marginBottom: -128}, - _mB4: {marginBottom: -16}, - _mB40: {marginBottom: -160}, - _mB48: {marginBottom: -192}, - _mB5: {marginBottom: -20}, - _mB56: {marginBottom: -224}, - _mB6: {marginBottom: -24}, - _mB64: {marginBottom: -256}, - _mB8: {marginBottom: -32}, - _mBPx: {marginBottom: -1}, - _mL1: {marginLeft: -4}, - _mL10: {marginLeft: -40}, - _mL12: {marginLeft: -48}, - _mL16: {marginLeft: -64}, - _mL2: {marginLeft: -8}, - _mL20: {marginLeft: -80}, - _mL24: {marginLeft: -96}, - _mL3: {marginLeft: -12}, - _mL32: {marginLeft: -128}, - _mL4: {marginLeft: -16}, - _mL40: {marginLeft: -160}, - _mL48: {marginLeft: -192}, - _mL5: {marginLeft: -20}, - _mL56: {marginLeft: -224}, - _mL6: {marginLeft: -24}, - _mL64: {marginLeft: -256}, - _mL8: {marginLeft: -32}, - _mLPx: {marginLeft: -1}, + _mb1: {marginBottom: -4}, + _mb10: {marginBottom: -40}, + _mb12: {marginBottom: -48}, + _mb16: {marginBottom: -64}, + _mb2: {marginBottom: -8}, + _mb20: {marginBottom: -80}, + _mb24: {marginBottom: -96}, + _mb3: {marginBottom: -12}, + _mb32: {marginBottom: -128}, + _mb4: {marginBottom: -16}, + _mb40: {marginBottom: -160}, + _mb48: {marginBottom: -192}, + _mb5: {marginBottom: -20}, + _mb56: {marginBottom: -224}, + _mb6: {marginBottom: -24}, + _mb64: {marginBottom: -256}, + _mb8: {marginBottom: -32}, + _mbPx: {marginBottom: -1}, + _ml1: {marginLeft: -4}, + _ml10: {marginLeft: -40}, + _ml12: {marginLeft: -48}, + _ml16: {marginLeft: -64}, + _ml2: {marginLeft: -8}, + _ml20: {marginLeft: -80}, + _ml24: {marginLeft: -96}, + _ml3: {marginLeft: -12}, + _ml32: {marginLeft: -128}, + _ml4: {marginLeft: -16}, + _ml40: {marginLeft: -160}, + _ml48: {marginLeft: -192}, + _ml5: {marginLeft: -20}, + _ml56: {marginLeft: -224}, + _ml6: {marginLeft: -24}, + _ml64: {marginLeft: -256}, + _ml8: {marginLeft: -32}, + _mlPx: {marginLeft: -1}, _mPx: {margin: -1}, - _mR1: {marginRight: -4}, - _mR10: {marginRight: -40}, - _mR12: {marginRight: -48}, - _mR16: {marginRight: -64}, - _mR2: {marginRight: -8}, - _mR20: {marginRight: -80}, - _mR24: {marginRight: -96}, - _mR3: {marginRight: -12}, - _mR32: {marginRight: -128}, - _mR4: {marginRight: -16}, - _mR40: {marginRight: -160}, - _mR48: {marginRight: -192}, - _mR5: {marginRight: -20}, - _mR56: {marginRight: -224}, - _mR6: {marginRight: -24}, - _mR64: {marginRight: -256}, - _mR8: {marginRight: -32}, - _mRPx: {marginRight: -1}, - _mT1: {marginTop: -4}, - _mT10: {marginTop: -40}, - _mT12: {marginTop: -48}, - _mT16: {marginTop: -64}, - _mT2: {marginTop: -8}, - _mT20: {marginTop: -80}, - _mT24: {marginTop: -96}, - _mT3: {marginTop: -12}, - _mT32: {marginTop: -128}, - _mT4: {marginTop: -16}, - _mT40: {marginTop: -160}, - _mT48: {marginTop: -192}, - _mT5: {marginTop: -20}, - _mT56: {marginTop: -224}, - _mT6: {marginTop: -24}, - _mT64: {marginTop: -256}, - _mT8: {marginTop: -32}, - _mTPx: {marginTop: -1}, + _mr1: {marginRight: -4}, + _mr10: {marginRight: -40}, + _mr12: {marginRight: -48}, + _mr16: {marginRight: -64}, + _mr2: {marginRight: -8}, + _mr20: {marginRight: -80}, + _mr24: {marginRight: -96}, + _mr3: {marginRight: -12}, + _mr32: {marginRight: -128}, + _mr4: {marginRight: -16}, + _mr40: {marginRight: -160}, + _mr48: {marginRight: -192}, + _mr5: {marginRight: -20}, + _mr56: {marginRight: -224}, + _mr6: {marginRight: -24}, + _mr64: {marginRight: -256}, + _mr8: {marginRight: -32}, + _mrPx: {marginRight: -1}, + _mt1: {marginTop: -4}, + _mt10: {marginTop: -40}, + _mt12: {marginTop: -48}, + _mt16: {marginTop: -64}, + _mt2: {marginTop: -8}, + _mt20: {marginTop: -80}, + _mt24: {marginTop: -96}, + _mt3: {marginTop: -12}, + _mt32: {marginTop: -128}, + _mt4: {marginTop: -16}, + _mt40: {marginTop: -160}, + _mt48: {marginTop: -192}, + _mt5: {marginTop: -20}, + _mt56: {marginTop: -224}, + _mt6: {marginTop: -24}, + _mt64: {marginTop: -256}, + _mt8: {marginTop: -32}, + _mtPx: {marginTop: -1}, - _mS1: {marginStart: -4}, - _mS10: {marginStart: -40}, - _mS12: {marginStart: -48}, - _mS16: {marginStart: -64}, - _mS2: {marginStart: -8}, - _mS20: {marginStart: -80}, - _mS24: {marginStart: -96}, - _mS3: {marginStart: -12}, - _mS32: {marginStart: -128}, - _mS4: {marginStart: -16}, - _mS40: {marginStart: -160}, - _mS48: {marginStart: -192}, - _mS5: {marginStart: -20}, - _mS56: {marginStart: -224}, - _mS6: {marginStart: -24}, - _mS64: {marginStart: -256}, - _mS8: {marginStart: -32}, - _mSPx: {marginStart: -1}, + _ms1: {marginStart: -4}, + _ms10: {marginStart: -40}, + _ms12: {marginStart: -48}, + _ms16: {marginStart: -64}, + _ms2: {marginStart: -8}, + _ms20: {marginStart: -80}, + _ms24: {marginStart: -96}, + _ms3: {marginStart: -12}, + _ms32: {marginStart: -128}, + _ms4: {marginStart: -16}, + _ms40: {marginStart: -160}, + _ms48: {marginStart: -192}, + _ms5: {marginStart: -20}, + _ms56: {marginStart: -224}, + _ms6: {marginStart: -24}, + _ms64: {marginStart: -256}, + _ms8: {marginStart: -32}, + _msPx: {marginStart: -1}, - _mE1: {marginEnd: -4}, - _mE10: {marginEnd: -40}, - _mE12: {marginEnd: -48}, - _mE16: {marginEnd: -64}, - _mE2: {marginEnd: -8}, - _mE20: {marginEnd: -80}, - _mE24: {marginEnd: -96}, - _mE3: {marginEnd: -12}, - _mE32: {marginEnd: -128}, - _mE4: {marginEnd: -16}, - _mE40: {marginEnd: -160}, - _mE48: {marginEnd: -192}, - _mE5: {marginEnd: -20}, - _mE56: {marginEnd: -224}, - _mE6: {marginEnd: -24}, - _mE64: {marginEnd: -256}, - _mE8: {marginEnd: -32}, - _mEPx: {marginEnd: -1}, + _me1: {marginEnd: -4}, + _me10: {marginEnd: -40}, + _me12: {marginEnd: -48}, + _me16: {marginEnd: -64}, + _me2: {marginEnd: -8}, + _me20: {marginEnd: -80}, + _me24: {marginEnd: -96}, + _me3: {marginEnd: -12}, + _me32: {marginEnd: -128}, + _me4: {marginEnd: -16}, + _me40: {marginEnd: -160}, + _me48: {marginEnd: -192}, + _me5: {marginEnd: -20}, + _me56: {marginEnd: -224}, + _me6: {marginEnd: -24}, + _me64: {marginEnd: -256}, + _me8: {marginEnd: -32}, + _mePx: {marginEnd: -1}, - _mX1: {marginHorizontal: -4}, - _mX10: {marginHorizontal: -40}, - _mX12: {marginHorizontal: -48}, - _mX16: {marginHorizontal: -64}, - _mX2: {marginHorizontal: -8}, - _mX20: {marginHorizontal: -80}, - _mX24: {marginHorizontal: -96}, - _mX3: {marginHorizontal: -12}, - _mX32: {marginHorizontal: -128}, - _mX4: {marginHorizontal: -16}, - _mX40: {marginHorizontal: -160}, - _mX48: {marginHorizontal: -192}, - _mX5: {marginHorizontal: -20}, - _mX56: {marginHorizontal: -224}, - _mX6: {marginHorizontal: -24}, - _mX64: {marginHorizontal: -256}, - _mX8: {marginHorizontal: -32}, - _mXPx: {marginHorizontal: -1}, - _mY1: {marginVertical: -4}, - _mY10: {marginVertical: -40}, - _mY12: {marginVertical: -48}, - _mY16: {marginVertical: -64}, - _mY2: {marginVertical: -8}, - _mY20: {marginVertical: -80}, - _mY24: {marginVertical: -96}, - _mY3: {marginVertical: -12}, - _mY32: {marginVertical: -128}, - _mY4: {marginVertical: -16}, - _mY40: {marginVertical: -160}, - _mY48: {marginVertical: -192}, - _mY5: {marginVertical: -20}, - _mY56: {marginVertical: -224}, - _mY6: {marginVertical: -24}, - _mY64: {marginVertical: -256}, - _mY8: {marginVertical: -32}, - _mYPx: {marginVertical: -1}, + _mx1: {marginHorizontal: -4}, + _mx10: {marginHorizontal: -40}, + _mx12: {marginHorizontal: -48}, + _mx16: {marginHorizontal: -64}, + _mx2: {marginHorizontal: -8}, + _mx20: {marginHorizontal: -80}, + _mx24: {marginHorizontal: -96}, + _mx3: {marginHorizontal: -12}, + _mx32: {marginHorizontal: -128}, + _mx4: {marginHorizontal: -16}, + _mx40: {marginHorizontal: -160}, + _mx48: {marginHorizontal: -192}, + _mx5: {marginHorizontal: -20}, + _mx56: {marginHorizontal: -224}, + _mx6: {marginHorizontal: -24}, + _mx64: {marginHorizontal: -256}, + _mx8: {marginHorizontal: -32}, + _mxPx: {marginHorizontal: -1}, + _my1: {marginVertical: -4}, + _my10: {marginVertical: -40}, + _my12: {marginVertical: -48}, + _my16: {marginVertical: -64}, + _my2: {marginVertical: -8}, + _my20: {marginVertical: -80}, + _my24: {marginVertical: -96}, + _my3: {marginVertical: -12}, + _my32: {marginVertical: -128}, + _my4: {marginVertical: -16}, + _my40: {marginVertical: -160}, + _my48: {marginVertical: -192}, + _my5: {marginVertical: -20}, + _my56: {marginVertical: -224}, + _my6: {marginVertical: -24}, + _my64: {marginVertical: -256}, + _my8: {marginVertical: -32}, + _myPx: {marginVertical: -1}, m0: {margin: 0}, m1: {margin: 4}, m10: {margin: 40}, @@ -183,168 +183,168 @@ module.exports = { m64: {margin: 256}, m8: {margin: 32}, mAuto: {margin: 'auto'}, - mB0: {marginBottom: 0}, - mB1: {marginBottom: 4}, - mB10: {marginBottom: 40}, - mB12: {marginBottom: 48}, - mB16: {marginBottom: 64}, - mB2: {marginBottom: 8}, - mB20: {marginBottom: 80}, - mB24: {marginBottom: 96}, - mB3: {marginBottom: 12}, - mB32: {marginBottom: 128}, - mB4: {marginBottom: 16}, - mB40: {marginBottom: 160}, - mB48: {marginBottom: 192}, - mB5: {marginBottom: 20}, - mB56: {marginBottom: 224}, - mB6: {marginBottom: 24}, - mB64: {marginBottom: 256}, - mB8: {marginBottom: 32}, - mBAuto: {marginBottom: 'auto'}, - mBPx: {marginBottom: 1}, - mL0: {marginLeft: 0}, - mL1: {marginLeft: 4}, - mL10: {marginLeft: 40}, - mL12: {marginLeft: 48}, - mL16: {marginLeft: 64}, - mL2: {marginLeft: 8}, - mL20: {marginLeft: 80}, - mL24: {marginLeft: 96}, - mL3: {marginLeft: 12}, - mL32: {marginLeft: 128}, - mL4: {marginLeft: 16}, - mL40: {marginLeft: 160}, - mL48: {marginLeft: 192}, - mL5: {marginLeft: 20}, - mL56: {marginLeft: 224}, - mL6: {marginLeft: 24}, - mL64: {marginLeft: 256}, - mL8: {marginLeft: 32}, - mLAuto: {marginLeft: 'auto'}, - mLPx: {marginLeft: 1}, + mb0: {marginBottom: 0}, + mb1: {marginBottom: 4}, + mb10: {marginBottom: 40}, + mb12: {marginBottom: 48}, + mb16: {marginBottom: 64}, + mb2: {marginBottom: 8}, + mb20: {marginBottom: 80}, + mb24: {marginBottom: 96}, + mb3: {marginBottom: 12}, + mb32: {marginBottom: 128}, + mb4: {marginBottom: 16}, + mb40: {marginBottom: 160}, + mb48: {marginBottom: 192}, + mb5: {marginBottom: 20}, + mb56: {marginBottom: 224}, + mb6: {marginBottom: 24}, + mb64: {marginBottom: 256}, + mb8: {marginBottom: 32}, + mbAuto: {marginBottom: 'auto'}, + mbPx: {marginBottom: 1}, + ml0: {marginLeft: 0}, + ml1: {marginLeft: 4}, + ml10: {marginLeft: 40}, + ml12: {marginLeft: 48}, + ml16: {marginLeft: 64}, + ml2: {marginLeft: 8}, + ml20: {marginLeft: 80}, + ml24: {marginLeft: 96}, + ml3: {marginLeft: 12}, + ml32: {marginLeft: 128}, + ml4: {marginLeft: 16}, + ml40: {marginLeft: 160}, + ml48: {marginLeft: 192}, + ml5: {marginLeft: 20}, + ml56: {marginLeft: 224}, + ml6: {marginLeft: 24}, + ml64: {marginLeft: 256}, + ml8: {marginLeft: 32}, + mlAuto: {marginLeft: 'auto'}, + mlPx: {marginLeft: 1}, mPx: {margin: 1}, - mR0: {marginRight: 0}, - mR1: {marginRight: 4}, - mR10: {marginRight: 40}, - mR12: {marginRight: 48}, - mR16: {marginRight: 64}, - mR2: {marginRight: 8}, - mR20: {marginRight: 80}, - mR24: {marginRight: 96}, - mR3: {marginRight: 12}, - mR32: {marginRight: 128}, - mR4: {marginRight: 16}, - mR40: {marginRight: 160}, - mR48: {marginRight: 192}, - mR5: {marginRight: 20}, - mR56: {marginRight: 224}, - mR6: {marginRight: 24}, - mR64: {marginRight: 256}, - mR8: {marginRight: 32}, - mRAuto: {marginRight: 'auto'}, - mRPx: {marginRight: 1}, - mT0: {marginTop: 0}, - mT1: {marginTop: 4}, - mT10: {marginTop: 40}, - mT12: {marginTop: 48}, - mT16: {marginTop: 64}, - mT2: {marginTop: 8}, - mT20: {marginTop: 80}, - mT24: {marginTop: 96}, - mT3: {marginTop: 12}, - mT32: {marginTop: 128}, - mT4: {marginTop: 16}, - mT40: {marginTop: 160}, - mT48: {marginTop: 192}, - mT5: {marginTop: 20}, - mT56: {marginTop: 224}, - mT6: {marginTop: 24}, - mT64: {marginTop: 256}, - mT8: {marginTop: 32}, - mTAuto: {marginTop: 'auto'}, - mTPx: {marginTop: 1}, + mr0: {marginRight: 0}, + mr1: {marginRight: 4}, + mr10: {marginRight: 40}, + mr12: {marginRight: 48}, + mr16: {marginRight: 64}, + mr2: {marginRight: 8}, + mr20: {marginRight: 80}, + mr24: {marginRight: 96}, + mr3: {marginRight: 12}, + mr32: {marginRight: 128}, + mr4: {marginRight: 16}, + mr40: {marginRight: 160}, + mr48: {marginRight: 192}, + mr5: {marginRight: 20}, + mr56: {marginRight: 224}, + mr6: {marginRight: 24}, + mr64: {marginRight: 256}, + mr8: {marginRight: 32}, + mrAuto: {marginRight: 'auto'}, + mrPx: {marginRight: 1}, + mt0: {marginTop: 0}, + mt1: {marginTop: 4}, + mt10: {marginTop: 40}, + mt12: {marginTop: 48}, + mt16: {marginTop: 64}, + mt2: {marginTop: 8}, + mt20: {marginTop: 80}, + mt24: {marginTop: 96}, + mt3: {marginTop: 12}, + mt32: {marginTop: 128}, + mt4: {marginTop: 16}, + mt40: {marginTop: 160}, + mt48: {marginTop: 192}, + mt5: {marginTop: 20}, + mt56: {marginTop: 224}, + mt6: {marginTop: 24}, + mt64: {marginTop: 256}, + mt8: {marginTop: 32}, + mtAuto: {marginTop: 'auto'}, + mtPx: {marginTop: 1}, - mS0: {marginStart: 0}, - mS1: {marginStart: 4}, - mS10: {marginStart: 40}, - mS12: {marginStart: 48}, - mS16: {marginStart: 64}, - mS2: {marginStart: 8}, - mS20: {marginStart: 80}, - mS24: {marginStart: 96}, - mS3: {marginStart: 12}, - mS32: {marginStart: 128}, - mS4: {marginStart: 16}, - mS40: {marginStart: 160}, - mS48: {marginStart: 192}, - mS5: {marginStart: 20}, - mS56: {marginStart: 224}, - mS6: {marginStart: 24}, - mS64: {marginStart: 256}, - mS8: {marginStart: 32}, - mSAuto: {marginStart: 'auto'}, - mSPx: {marginStart: 1}, + ms0: {marginStart: 0}, + ms1: {marginStart: 4}, + ms10: {marginStart: 40}, + ms12: {marginStart: 48}, + ms16: {marginStart: 64}, + ms2: {marginStart: 8}, + ms20: {marginStart: 80}, + ms24: {marginStart: 96}, + ms3: {marginStart: 12}, + ms32: {marginStart: 128}, + ms4: {marginStart: 16}, + ms40: {marginStart: 160}, + ms48: {marginStart: 192}, + ms5: {marginStart: 20}, + ms56: {marginStart: 224}, + ms6: {marginStart: 24}, + ms64: {marginStart: 256}, + ms8: {marginStart: 32}, + msAuto: {marginStart: 'auto'}, + msPx: {marginStart: 1}, - mE0: {marginEnd: 0}, - mE1: {marginEnd: 4}, - mE10: {marginEnd: 40}, - mE12: {marginEnd: 48}, - mE16: {marginEnd: 64}, - mE2: {marginEnd: 8}, - mE20: {marginEnd: 80}, - mE24: {marginEnd: 96}, - mE3: {marginEnd: 12}, - mE32: {marginEnd: 128}, - mE4: {marginEnd: 16}, - mE40: {marginEnd: 160}, - mE48: {marginEnd: 192}, - mE5: {marginEnd: 20}, - mE56: {marginEnd: 224}, - mE6: {marginEnd: 24}, - mE64: {marginEnd: 256}, - mE8: {marginEnd: 32}, - mEAuto: {marginEnd: 'auto'}, - mEPx: {marginEnd: 1}, + me0: {marginEnd: 0}, + me1: {marginEnd: 4}, + me10: {marginEnd: 40}, + me12: {marginEnd: 48}, + me16: {marginEnd: 64}, + me2: {marginEnd: 8}, + me20: {marginEnd: 80}, + me24: {marginEnd: 96}, + me3: {marginEnd: 12}, + me32: {marginEnd: 128}, + me4: {marginEnd: 16}, + me40: {marginEnd: 160}, + me48: {marginEnd: 192}, + me5: {marginEnd: 20}, + me56: {marginEnd: 224}, + me6: {marginEnd: 24}, + me64: {marginEnd: 256}, + me8: {marginEnd: 32}, + meAuto: {marginEnd: 'auto'}, + mePx: {marginEnd: 1}, - mX0: {marginHorizontal: 0}, - mX1: {marginHorizontal: 4}, - mX10: {marginHorizontal: 40}, - mX12: {marginHorizontal: 48}, - mX16: {marginHorizontal: 64}, - mX2: {marginHorizontal: 8}, - mX20: {marginHorizontal: 80}, - mX24: {marginHorizontal: 96}, - mX3: {marginHorizontal: 12}, - mX32: {marginHorizontal: 128}, - mX4: {marginHorizontal: 16}, - mX40: {marginHorizontal: 160}, - mX48: {marginHorizontal: 192}, - mX5: {marginHorizontal: 20}, - mX56: {marginHorizontal: 224}, - mX6: {marginHorizontal: 24}, - mX64: {marginHorizontal: 256}, - mX8: {marginHorizontal: 32}, - mXAuto: {marginHorizontal: 'auto'}, - mXPx: {marginHorizontal: 1}, - mY0: {marginVertical: 0}, - mY1: {marginVertical: 4}, - mY10: {marginVertical: 40}, - mY12: {marginVertical: 48}, - mY16: {marginVertical: 64}, - mY2: {marginVertical: 8}, - mY20: {marginVertical: 80}, - mY24: {marginVertical: 96}, - mY3: {marginVertical: 12}, - mY32: {marginVertical: 128}, - mY4: {marginVertical: 16}, - mY40: {marginVertical: 160}, - mY48: {marginVertical: 192}, - mY5: {marginVertical: 20}, - mY56: {marginVertical: 224}, - mY6: {marginVertical: 24}, - mY64: {marginVertical: 256}, - mY8: {marginVertical: 32}, - mYAuto: {marginVertical: 'auto'}, - mYPx: {marginVertical: 1}, + mx0: {marginHorizontal: 0}, + mx1: {marginHorizontal: 4}, + mx10: {marginHorizontal: 40}, + mx12: {marginHorizontal: 48}, + mx16: {marginHorizontal: 64}, + mx2: {marginHorizontal: 8}, + mx20: {marginHorizontal: 80}, + mx24: {marginHorizontal: 96}, + mx3: {marginHorizontal: 12}, + mx32: {marginHorizontal: 128}, + mx4: {marginHorizontal: 16}, + mx40: {marginHorizontal: 160}, + mx48: {marginHorizontal: 192}, + mx5: {marginHorizontal: 20}, + mx56: {marginHorizontal: 224}, + mx6: {marginHorizontal: 24}, + mx64: {marginHorizontal: 256}, + mx8: {marginHorizontal: 32}, + mxAuto: {marginHorizontal: 'auto'}, + mxPx: {marginHorizontal: 1}, + my0: {marginVertical: 0}, + my1: {marginVertical: 4}, + my10: {marginVertical: 40}, + my12: {marginVertical: 48}, + my16: {marginVertical: 64}, + my2: {marginVertical: 8}, + my20: {marginVertical: 80}, + my24: {marginVertical: 96}, + my3: {marginVertical: 12}, + my32: {marginVertical: 128}, + my4: {marginVertical: 16}, + my40: {marginVertical: 160}, + my48: {marginVertical: 192}, + my5: {marginVertical: 20}, + my56: {marginVertical: 224}, + my6: {marginVertical: 24}, + my64: {marginVertical: 256}, + my8: {marginVertical: 32}, + myAuto: {marginVertical: 'auto'}, + myPx: {marginVertical: 1}, }; diff --git a/__tests__/fixtures/outputs/tailwind/padding.js b/__tests__/fixtures/outputs/tailwind/padding.js index 7081ef7..a9db0de 100644 --- a/__tests__/fixtures/outputs/tailwind/padding.js +++ b/__tests__/fixtures/outputs/tailwind/padding.js @@ -17,157 +17,157 @@ module.exports = { p6: {padding: 24}, p64: {padding: 256}, p8: {padding: 32}, - pB0: {paddingBottom: 0}, - pB1: {paddingBottom: 4}, - pB10: {paddingBottom: 40}, - pB12: {paddingBottom: 48}, - pB16: {paddingBottom: 64}, - pB2: {paddingBottom: 8}, - pB20: {paddingBottom: 80}, - pB24: {paddingBottom: 96}, - pB3: {paddingBottom: 12}, - pB32: {paddingBottom: 128}, - pB4: {paddingBottom: 16}, - pB40: {paddingBottom: 160}, - pB48: {paddingBottom: 192}, - pB5: {paddingBottom: 20}, - pB56: {paddingBottom: 224}, - pB6: {paddingBottom: 24}, - pB64: {paddingBottom: 256}, - pB8: {paddingBottom: 32}, - pBPx: {paddingBottom: 1}, - pL0: {paddingLeft: 0}, - pL1: {paddingLeft: 4}, - pL10: {paddingLeft: 40}, - pL12: {paddingLeft: 48}, - pL16: {paddingLeft: 64}, - pL2: {paddingLeft: 8}, - pL20: {paddingLeft: 80}, - pL24: {paddingLeft: 96}, - pL3: {paddingLeft: 12}, - pL32: {paddingLeft: 128}, - pL4: {paddingLeft: 16}, - pL40: {paddingLeft: 160}, - pL48: {paddingLeft: 192}, - pL5: {paddingLeft: 20}, - pL56: {paddingLeft: 224}, - pL6: {paddingLeft: 24}, - pL64: {paddingLeft: 256}, - pL8: {paddingLeft: 32}, - pLPx: {paddingLeft: 1}, + pb0: {paddingBottom: 0}, + pb1: {paddingBottom: 4}, + pb10: {paddingBottom: 40}, + pb12: {paddingBottom: 48}, + pb16: {paddingBottom: 64}, + pb2: {paddingBottom: 8}, + pb20: {paddingBottom: 80}, + pb24: {paddingBottom: 96}, + pb3: {paddingBottom: 12}, + pb32: {paddingBottom: 128}, + pb4: {paddingBottom: 16}, + pb40: {paddingBottom: 160}, + pb48: {paddingBottom: 192}, + pb5: {paddingBottom: 20}, + pb56: {paddingBottom: 224}, + pb6: {paddingBottom: 24}, + pb64: {paddingBottom: 256}, + pb8: {paddingBottom: 32}, + pbPx: {paddingBottom: 1}, + pl0: {paddingLeft: 0}, + pl1: {paddingLeft: 4}, + pl10: {paddingLeft: 40}, + pl12: {paddingLeft: 48}, + pl16: {paddingLeft: 64}, + pl2: {paddingLeft: 8}, + pl20: {paddingLeft: 80}, + pl24: {paddingLeft: 96}, + pl3: {paddingLeft: 12}, + pl32: {paddingLeft: 128}, + pl4: {paddingLeft: 16}, + pl40: {paddingLeft: 160}, + pl48: {paddingLeft: 192}, + pl5: {paddingLeft: 20}, + pl56: {paddingLeft: 224}, + pl6: {paddingLeft: 24}, + pl64: {paddingLeft: 256}, + pl8: {paddingLeft: 32}, + plPx: {paddingLeft: 1}, pPx: {padding: 1}, - pR0: {paddingRight: 0}, - pR1: {paddingRight: 4}, - pR10: {paddingRight: 40}, - pR12: {paddingRight: 48}, - pR16: {paddingRight: 64}, - pR2: {paddingRight: 8}, - pR20: {paddingRight: 80}, - pR24: {paddingRight: 96}, - pR3: {paddingRight: 12}, - pR32: {paddingRight: 128}, - pR4: {paddingRight: 16}, - pR40: {paddingRight: 160}, - pR48: {paddingRight: 192}, - pR5: {paddingRight: 20}, - pR56: {paddingRight: 224}, - pR6: {paddingRight: 24}, - pR64: {paddingRight: 256}, - pR8: {paddingRight: 32}, - pRPx: {paddingRight: 1}, - pT0: {paddingTop: 0}, - pT1: {paddingTop: 4}, - pT10: {paddingTop: 40}, - pT12: {paddingTop: 48}, - pT16: {paddingTop: 64}, - pT2: {paddingTop: 8}, - pT20: {paddingTop: 80}, - pT24: {paddingTop: 96}, - pT3: {paddingTop: 12}, - pT32: {paddingTop: 128}, - pT4: {paddingTop: 16}, - pT40: {paddingTop: 160}, - pT48: {paddingTop: 192}, - pT5: {paddingTop: 20}, - pT56: {paddingTop: 224}, - pT6: {paddingTop: 24}, - pT64: {paddingTop: 256}, - pT8: {paddingTop: 32}, - pTPx: {paddingTop: 1}, - pE0: {paddingEnd: 0}, - pE1: {paddingEnd: 4}, - pE10: {paddingEnd: 40}, - pE12: {paddingEnd: 48}, - pE16: {paddingEnd: 64}, - pE2: {paddingEnd: 8}, - pE20: {paddingEnd: 80}, - pE24: {paddingEnd: 96}, - pE3: {paddingEnd: 12}, - pE32: {paddingEnd: 128}, - pE4: {paddingEnd: 16}, - pE40: {paddingEnd: 160}, - pE48: {paddingEnd: 192}, - pE5: {paddingEnd: 20}, - pE56: {paddingEnd: 224}, - pE6: {paddingEnd: 24}, - pE64: {paddingEnd: 256}, - pE8: {paddingEnd: 32}, - pEPx: {paddingEnd: 1}, - pS0: {paddingStart: 0}, - pS1: {paddingStart: 4}, - pS10: {paddingStart: 40}, - pS12: {paddingStart: 48}, - pS16: {paddingStart: 64}, - pS2: {paddingStart: 8}, - pS20: {paddingStart: 80}, - pS24: {paddingStart: 96}, - pS3: {paddingStart: 12}, - pS32: {paddingStart: 128}, - pS4: {paddingStart: 16}, - pS40: {paddingStart: 160}, - pS48: {paddingStart: 192}, - pS5: {paddingStart: 20}, - pS56: {paddingStart: 224}, - pS6: {paddingStart: 24}, - pS64: {paddingStart: 256}, - pS8: {paddingStart: 32}, - pSPx: {paddingStart: 1}, - pX0: {paddingHorizontal: 0}, - pX1: {paddingHorizontal: 4}, - pX10: {paddingHorizontal: 40}, - pX12: {paddingHorizontal: 48}, - pX16: {paddingHorizontal: 64}, - pX2: {paddingHorizontal: 8}, - pX20: {paddingHorizontal: 80}, - pX24: {paddingHorizontal: 96}, - pX3: {paddingHorizontal: 12}, - pX32: {paddingHorizontal: 128}, - pX4: {paddingHorizontal: 16}, - pX40: {paddingHorizontal: 160}, - pX48: {paddingHorizontal: 192}, - pX5: {paddingHorizontal: 20}, - pX56: {paddingHorizontal: 224}, - pX6: {paddingHorizontal: 24}, - pX64: {paddingHorizontal: 256}, - pX8: {paddingHorizontal: 32}, - pXPx: {paddingHorizontal: 1}, - pY0: {paddingVertical: 0}, - pY1: {paddingVertical: 4}, - pY10: {paddingVertical: 40}, - pY12: {paddingVertical: 48}, - pY16: {paddingVertical: 64}, - pY2: {paddingVertical: 8}, - pY20: {paddingVertical: 80}, - pY24: {paddingVertical: 96}, - pY3: {paddingVertical: 12}, - pY32: {paddingVertical: 128}, - pY4: {paddingVertical: 16}, - pY40: {paddingVertical: 160}, - pY48: {paddingVertical: 192}, - pY5: {paddingVertical: 20}, - pY56: {paddingVertical: 224}, - pY6: {paddingVertical: 24}, - pY64: {paddingVertical: 256}, - pY8: {paddingVertical: 32}, - pYPx: {paddingVertical: 1}, + pr0: {paddingRight: 0}, + pr1: {paddingRight: 4}, + pr10: {paddingRight: 40}, + pr12: {paddingRight: 48}, + pr16: {paddingRight: 64}, + pr2: {paddingRight: 8}, + pr20: {paddingRight: 80}, + pr24: {paddingRight: 96}, + pr3: {paddingRight: 12}, + pr32: {paddingRight: 128}, + pr4: {paddingRight: 16}, + pr40: {paddingRight: 160}, + pr48: {paddingRight: 192}, + pr5: {paddingRight: 20}, + pr56: {paddingRight: 224}, + pr6: {paddingRight: 24}, + pr64: {paddingRight: 256}, + pr8: {paddingRight: 32}, + prPx: {paddingRight: 1}, + pt0: {paddingTop: 0}, + pt1: {paddingTop: 4}, + pt10: {paddingTop: 40}, + pt12: {paddingTop: 48}, + pt16: {paddingTop: 64}, + pt2: {paddingTop: 8}, + pt20: {paddingTop: 80}, + pt24: {paddingTop: 96}, + pt3: {paddingTop: 12}, + pt32: {paddingTop: 128}, + pt4: {paddingTop: 16}, + pt40: {paddingTop: 160}, + pt48: {paddingTop: 192}, + pt5: {paddingTop: 20}, + pt56: {paddingTop: 224}, + pt6: {paddingTop: 24}, + pt64: {paddingTop: 256}, + pt8: {paddingTop: 32}, + ptPx: {paddingTop: 1}, + pe0: {paddingEnd: 0}, + pe1: {paddingEnd: 4}, + pe10: {paddingEnd: 40}, + pe12: {paddingEnd: 48}, + pe16: {paddingEnd: 64}, + pe2: {paddingEnd: 8}, + pe20: {paddingEnd: 80}, + pe24: {paddingEnd: 96}, + pe3: {paddingEnd: 12}, + pe32: {paddingEnd: 128}, + pe4: {paddingEnd: 16}, + pe40: {paddingEnd: 160}, + pe48: {paddingEnd: 192}, + pe5: {paddingEnd: 20}, + pe56: {paddingEnd: 224}, + pe6: {paddingEnd: 24}, + pe64: {paddingEnd: 256}, + pe8: {paddingEnd: 32}, + pePx: {paddingEnd: 1}, + ps0: {paddingStart: 0}, + ps1: {paddingStart: 4}, + ps10: {paddingStart: 40}, + ps12: {paddingStart: 48}, + ps16: {paddingStart: 64}, + ps2: {paddingStart: 8}, + ps20: {paddingStart: 80}, + ps24: {paddingStart: 96}, + ps3: {paddingStart: 12}, + ps32: {paddingStart: 128}, + ps4: {paddingStart: 16}, + ps40: {paddingStart: 160}, + ps48: {paddingStart: 192}, + ps5: {paddingStart: 20}, + ps56: {paddingStart: 224}, + ps6: {paddingStart: 24}, + ps64: {paddingStart: 256}, + ps8: {paddingStart: 32}, + psPx: {paddingStart: 1}, + px0: {paddingHorizontal: 0}, + px1: {paddingHorizontal: 4}, + px10: {paddingHorizontal: 40}, + px12: {paddingHorizontal: 48}, + px16: {paddingHorizontal: 64}, + px2: {paddingHorizontal: 8}, + px20: {paddingHorizontal: 80}, + px24: {paddingHorizontal: 96}, + px3: {paddingHorizontal: 12}, + px32: {paddingHorizontal: 128}, + px4: {paddingHorizontal: 16}, + px40: {paddingHorizontal: 160}, + px48: {paddingHorizontal: 192}, + px5: {paddingHorizontal: 20}, + px56: {paddingHorizontal: 224}, + px6: {paddingHorizontal: 24}, + px64: {paddingHorizontal: 256}, + px8: {paddingHorizontal: 32}, + pxPx: {paddingHorizontal: 1}, + py0: {paddingVertical: 0}, + py1: {paddingVertical: 4}, + py10: {paddingVertical: 40}, + py12: {paddingVertical: 48}, + py16: {paddingVertical: 64}, + py2: {paddingVertical: 8}, + py20: {paddingVertical: 80}, + py24: {paddingVertical: 96}, + py3: {paddingVertical: 12}, + py32: {paddingVertical: 128}, + py4: {paddingVertical: 16}, + py40: {paddingVertical: 160}, + py48: {paddingVertical: 192}, + py5: {paddingVertical: 20}, + py56: {paddingVertical: 224}, + py6: {paddingVertical: 24}, + py64: {paddingVertical: 256}, + py8: {paddingVertical: 32}, + pyPx: {paddingVertical: 1}, }; diff --git a/__tests__/fixtures/testConfigHandler.js b/__tests__/fixtures/testConfigHandler.js index c17243b..0983c94 100644 --- a/__tests__/fixtures/testConfigHandler.js +++ b/__tests__/fixtures/testConfigHandler.js @@ -1,12 +1,6 @@ -import resolveConfig from 'tailwindcss/resolveConfig'; +import {Tailwind} from '../../tailwind'; -let file = require('../../stubs/simpleConfig.stub'); +const configFile = require('./tailwind.config'); +const t = new Tailwind(configFile); -try { - file = require('./tailwind.config'); -} catch (ex) { -} - -const {theme} = resolveConfig(file); - -module.exports = theme; +export const {theme} = t.config; diff --git a/__tests__/generator.test.js b/__tests__/generator.test.js index 053da37..459d4ef 100644 --- a/__tests__/generator.test.js +++ b/__tests__/generator.test.js @@ -1,16 +1,14 @@ import generator from '../util/generator'; -import resolveConfig from 'tailwindcss/resolveConfig'; +import {Tailwind} from '../tailwind'; -let file; -try { - file = require('../../tailwind.config'); -} catch (ex) { - file = require('tailwindcss/stubs/simpleConfig.stub'); -} +const configureTheme = () => { + const configFile = require('tailwindcss/stubs/simpleConfig.stub'); + const t = new Tailwind(configFile); + return t.config.theme; +}; -const {theme} = resolveConfig(file); +const theme = configureTheme(); -// general working test('static classes', () => { const result = generator.generate('', 'display', [['hidden', 'none'], 'flex']); diff --git a/__tests__/tailwind.test.js b/__tests__/tailwind.test.js index 95bf2da..379231f 100644 --- a/__tests__/tailwind.test.js +++ b/__tests__/tailwind.test.js @@ -1,3 +1,5 @@ +import {theme, colors} from '../index'; + import alignContent from '../corePlugins/alignContent'; import alignItems from '../corePlugins/alignItems'; import alignSelf from '../corePlugins/alignSelf'; @@ -53,213 +55,213 @@ import boxShadow from '../corePlugins/boxShadow'; import textShadow from '../corePlugins/textShadow'; test('alignContent', () => { - expect(alignContent).toEqual(require('./fixtures/outputs/tailwind/alignContent')); + expect(alignContent({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/alignContent')); }); test('alignItems', () => { - expect(alignItems).toEqual(require('./fixtures/outputs/tailwind/alignItems')); + expect(alignItems({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/alignItems')); }); test('alignSelf', () => { - expect(alignSelf).toEqual(require('./fixtures/outputs/tailwind/alignSelf')); + expect(alignSelf({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/alignSelf')); }); test('backfaceVisibility', () => { - expect(backfaceVisibility).toEqual(require('./fixtures/outputs/tailwind/backfaceVisibility')); + expect(backfaceVisibility({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/backfaceVisibility')); }); test('borderStyle', () => { - expect(borderStyle).toEqual(require('./fixtures/outputs/tailwind/borderStyle')); + expect(borderStyle({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/borderStyle')); }); test('direction', () => { - expect(direction).toEqual(require('./fixtures/outputs/tailwind/direction')); + expect(direction({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/direction')); }); test('display', () => { - expect(display).toEqual(require('./fixtures/outputs/tailwind/display')); + expect(display({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/display')); }); test('flexDirection', () => { - expect(flexDirection).toEqual(require('./fixtures/outputs/tailwind/flexDirection')); + expect(flexDirection({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/flexDirection')); }); test('flexWrap', () => { - expect(flexWrap).toEqual(require('./fixtures/outputs/tailwind/flexWrap')); + expect(flexWrap({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/flexWrap')); }); test('fontPadding', () => { - expect(fontPadding).toEqual(require('./fixtures/outputs/tailwind/fontPadding')); + expect(fontPadding({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/fontPadding')); }); test('fontStyle', () => { - expect(fontStyle).toEqual(require('./fixtures/outputs/tailwind/fontStyle')); + expect(fontStyle({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/fontStyle')); }); test('fontWeight', () => { - expect(fontWeight).toEqual(require('./fixtures/outputs/tailwind/fontWeight')); + expect(fontWeight({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/fontWeight')); }); test('justifyContent', () => { - expect(justifyContent).toEqual(require('./fixtures/outputs/tailwind/justifyContent')); + expect(justifyContent({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/justifyContent')); }); test('objectFit', () => { - expect(objectFit).toEqual(require('./fixtures/outputs/tailwind/objectFit')); + expect(objectFit({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/objectFit')); }); test('overflow', () => { - expect(overflow).toEqual(require('./fixtures/outputs/tailwind/overflow')); + expect(overflow({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/overflow')); }); test('position', () => { - expect(position).toEqual(require('./fixtures/outputs/tailwind/position')); + expect(position({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/position')); }); test('resize', () => { - expect(resize).toEqual(require('./fixtures/outputs/tailwind/resize')); + expect(resize({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/resize')); }); test('textAlign', () => { - expect(textAlign).toEqual(require('./fixtures/outputs/tailwind/textAlign')); + expect(textAlign({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/textAlign')); }); test('textDecoration', () => { - expect(textDecoration).toEqual(require('./fixtures/outputs/tailwind/textDecoration')); + expect(textDecoration({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/textDecoration')); }); test('textTransform', () => { - expect(textTransform).toEqual(require('./fixtures/outputs/tailwind/textTransform')); + expect(textTransform({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/textTransform')); }); test('verticalAlign', () => { - expect(verticalAlign).toEqual(require('./fixtures/outputs/tailwind/verticalAlign')); + expect(verticalAlign({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/verticalAlign')); }); test('backgroundColor', () => { - expect(backgroundColor).toEqual(require('./fixtures/outputs/tailwind/backgroundColor')); + expect(backgroundColor({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/backgroundColor')); }); test('borderColor', () => { - expect(borderColor).toEqual(require('./fixtures/outputs/tailwind/borderColor')); + expect(borderColor({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/borderColor')); }); test('borderRadius', () => { - expect(borderRadius).toEqual(require('./fixtures/outputs/tailwind/borderRadius')); + expect(borderRadius({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/borderRadius')); }); test('borderWidth', () => { - expect(borderWidth).toEqual(require('./fixtures/outputs/tailwind/borderWidth')); + expect(borderWidth({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/borderWidth')); }); test('flex', () => { - expect(flex).toEqual(require('./fixtures/outputs/tailwind/flex')); + expect(flex({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/flex')); }); test('flexGrow', () => { - expect(flexGrow).toEqual(require('./fixtures/outputs/tailwind/flexGrow')); + expect(flexGrow({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/flexGrow')); }); test('flexShrink', () => { - expect(flexShrink).toEqual(require('./fixtures/outputs/tailwind/flexShrink')); + expect(flexShrink({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/flexShrink')); }); test('fontFamily', () => { - expect(fontFamily).toEqual(require('./fixtures/outputs/tailwind/fontFamily')); + expect(fontFamily({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/fontFamily')); }); test('fontSize', () => { - expect(fontSize).toEqual(require('./fixtures/outputs/tailwind/fontSize')); + expect(fontSize({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/fontSize')); }); test('height', () => { - expect(height).toEqual(require('./fixtures/outputs/tailwind/height')); + expect(height({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/height')); }); test('inset', () => { - expect(inset).toEqual(require('./fixtures/outputs/tailwind/inset')); + expect(inset({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/inset')); }); test('top', () => { - expect(top).toEqual(require('./fixtures/outputs/tailwind/top')); + expect(top({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/top')); }); test('bottom', () => { - expect(bottom).toEqual(require('./fixtures/outputs/tailwind/bottom')); + expect(bottom({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/bottom')); }); test('left', () => { - expect(left).toEqual(require('./fixtures/outputs/tailwind/left')); + expect(left({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/left')); }); test('right', () => { - expect(right).toEqual(require('./fixtures/outputs/tailwind/right')); + expect(right({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/right')); }); test('start', () => { - expect(start).toEqual(require('./fixtures/outputs/tailwind/start')); + expect(start({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/start')); }); test('end', () => { - expect(end).toEqual(require('./fixtures/outputs/tailwind/end')); + expect(end({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/end')); }); test('letterSpacing', () => { - expect(letterSpacing).toEqual(require('./fixtures/outputs/tailwind/letterSpacing')); + expect(letterSpacing({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/letterSpacing')); }); test('lineHeight', () => { - expect(lineHeight).toEqual(require('./fixtures/outputs/tailwind/lineHeight')); + expect(lineHeight({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/lineHeight')); }); test('margin', () => { - expect(margin).toEqual(require('./fixtures/outputs/tailwind/margin')); + expect(margin({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/margin')); }); test('maxHeight', () => { - expect(maxHeight).toEqual(require('./fixtures/outputs/tailwind/maxHeight')); + expect(maxHeight({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/maxHeight')); }); test('maxWidth', () => { - expect(maxWidth).toEqual(require('./fixtures/outputs/tailwind/maxWidth')); + expect(maxWidth({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/maxWidth')); }); test('minHeight', () => { - expect(minHeight).toEqual(require('./fixtures/outputs/tailwind/minHeight')); + expect(minHeight({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/minHeight')); }); test('minWidth', () => { - expect(minWidth).toEqual(require('./fixtures/outputs/tailwind/minWidth')); + expect(minWidth({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/minWidth')); }); test('opacity', () => { - expect(opacity).toEqual(require('./fixtures/outputs/tailwind/opacity')); + expect(opacity({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/opacity')); }); test('padding', () => { - expect(padding).toEqual(require('./fixtures/outputs/tailwind/padding')); + expect(padding({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/padding')); }); test('textColor', () => { - expect(textColor).toEqual(require('./fixtures/outputs/tailwind/textColor')); + expect(textColor({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/textColor')); }); test('tint', () => { - expect(tint).toEqual(require('./fixtures/outputs/tailwind/tint')); + expect(tint({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/tint')); }); test('width', () => { - expect(width).toEqual(require('./fixtures/outputs/tailwind/width')); + expect(width({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/width')); }); test('zIndex', () => { - expect(zIndex).toEqual(require('./fixtures/outputs/tailwind/zIndex')); + expect(zIndex({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/zIndex')); }); test('boxShadow', () => { - expect(boxShadow).toEqual(require('./fixtures/outputs/tailwind/boxShadow')); + expect(boxShadow({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/boxShadow')); }); test('textShadow', () => { - expect(textShadow).toEqual(require('./fixtures/outputs/tailwind/textShadow')); + expect(textShadow({theme, colors})).toEqual(require('./fixtures/outputs/tailwind/textShadow')); }); diff --git a/color.js b/color.js deleted file mode 100644 index ee4c558..0000000 --- a/color.js +++ /dev/null @@ -1,10 +0,0 @@ -import generator from './util/generator'; -import theme from './util/configHandler'; - -let colors = {}; - -const themeColors = generator.generateColors(theme.colors); - -Object.assign(colors, themeColors); - -export default colors; diff --git a/corePlugins/alignContent.js b/corePlugins/alignContent.js index 42ba48b..413d3f7 100644 --- a/corePlugins/alignContent.js +++ b/corePlugins/alignContent.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('content', 'alignContent', [ +export default () => generator.generate('content', 'alignContent', [ ['start', 'flex-start'], ['end', 'flex-end'], 'center', diff --git a/corePlugins/alignItems.js b/corePlugins/alignItems.js index 589b94e..dcc6e1f 100644 --- a/corePlugins/alignItems.js +++ b/corePlugins/alignItems.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('items', 'alignItems', [ +export default () => generator.generate('items', 'alignItems', [ ['start', 'flex-start'], ['end', 'flex-end'], 'center', diff --git a/corePlugins/alignSelf.js b/corePlugins/alignSelf.js index 420ca3f..2e9d7ea 100644 --- a/corePlugins/alignSelf.js +++ b/corePlugins/alignSelf.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('self', 'alignSelf', [ +export default () => generator.generate('self', 'alignSelf', [ 'auto', ['start', 'flex-start'], ['end', 'flex-end'], diff --git a/corePlugins/backfaceVisibility.js b/corePlugins/backfaceVisibility.js index 1ac4988..2afc487 100644 --- a/corePlugins/backfaceVisibility.js +++ b/corePlugins/backfaceVisibility.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('backface', 'backfaceVisibility', [ +export default () => generator.generate('backface', 'backfaceVisibility', [ 'visible', 'hidden', ]); diff --git a/corePlugins/backgroundColor.js b/corePlugins/backgroundColor.js index eddc86b..3c78e0a 100644 --- a/corePlugins/backgroundColor.js +++ b/corePlugins/backgroundColor.js @@ -1,4 +1,4 @@ import generator from '../util/generator'; -import colors from '../color'; -export default generator.generate('bg', 'backgroundColor', colors); +export default ({colors}) => + generator.generate('bg', 'backgroundColor', colors); diff --git a/corePlugins/borderColor.js b/corePlugins/borderColor.js index 4865e0c..4019f56 100644 --- a/corePlugins/borderColor.js +++ b/corePlugins/borderColor.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import colors from '../color'; -export default generator.generate('border', 'borderColor', colors); +export default ({colors}) => generator.generate('border', 'borderColor', colors); diff --git a/corePlugins/borderRadius.js b/corePlugins/borderRadius.js index 244aeae..3e412ee 100644 --- a/corePlugins/borderRadius.js +++ b/corePlugins/borderRadius.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('rounded', 'borderRadius', theme.borderRadius, [ +export default ({theme}) => generator.generate('rounded', 'borderRadius', theme.borderRadius, [ ['t', ['borderTopLeftRadius', 'borderTopRightRadius']], ['r', ['borderTopRightRadius', 'borderBottomRightRadius']], ['b', ['borderBottomLeftRadius', 'borderBottomRightRadius']], diff --git a/corePlugins/borderRadiusDir.js b/corePlugins/borderRadiusDir.js index 35d6c83..a0a3e25 100644 --- a/corePlugins/borderRadiusDir.js +++ b/corePlugins/borderRadiusDir.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('rounded-dir', 'borderRadius', theme.borderRadius, [ +export default ({theme}) => generator.generate('rounded-dir', 'borderRadius', theme.borderRadius, [ ['e', ['borderTopEndRadius', 'borderBottomEndRadius']], ['s', ['borderTopStartRadius', 'borderBottomStartRadius']], ['ts', 'borderTopStartRadius'], diff --git a/corePlugins/borderStyle.js b/corePlugins/borderStyle.js index e755324..8b3077c 100644 --- a/corePlugins/borderStyle.js +++ b/corePlugins/borderStyle.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('border', 'borderStyle', [ +export default () => generator.generate('border', 'borderStyle', [ 'solid', 'dotted', 'dashed', diff --git a/corePlugins/borderWidth.js b/corePlugins/borderWidth.js index d2cc6e7..5402dcf 100644 --- a/corePlugins/borderWidth.js +++ b/corePlugins/borderWidth.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('border', 'borderWidth', theme.borderWidth, [ +export default ({theme}) => generator.generate('border', 'borderWidth', theme.borderWidth, [ ['x', ['borderRightWidth', 'borderLeftWidth']], ['y', ['borderTopWidth', 'borderBottomWidth']], ['t', 'borderTopWidth'], diff --git a/corePlugins/borderWidthDir.js b/corePlugins/borderWidthDir.js index 54d55d0..abf7941 100644 --- a/corePlugins/borderWidthDir.js +++ b/corePlugins/borderWidthDir.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('border-dir', 'borderWidth', theme.borderWidth, [ +export default ({theme}) => generator.generate('border-dir', 'borderWidth', theme.borderWidth, [ ['x', ['borderEndWidth', 'borderStartWidth']], ['e', 'borderEndWidth'], ['s', 'borderStartWidth'], diff --git a/corePlugins/bottom.js b/corePlugins/bottom.js index 8d02518..db78b9e 100644 --- a/corePlugins/bottom.js +++ b/corePlugins/bottom.js @@ -1,4 +1,4 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('bottom', 'bottom', theme.inset); +export default ({theme}) => + generator.generate('bottom', 'bottom', theme.inset); diff --git a/corePlugins/boxShadow.js b/corePlugins/boxShadow.js index d59142b..24b1f1d 100644 --- a/corePlugins/boxShadow.js +++ b/corePlugins/boxShadow.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generateShadows('shadow', 'shadow', theme.boxShadow); +export default ({theme}) => generator.generateShadows('shadow', 'shadow', theme.boxShadow); diff --git a/corePlugins/direction.js b/corePlugins/direction.js index 982b7ad..65e24c3 100644 --- a/corePlugins/direction.js +++ b/corePlugins/direction.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('direction', 'direction', [ +export default () => generator.generate('direction', 'direction', [ 'inherit', 'ltr', 'rtl', diff --git a/corePlugins/display.js b/corePlugins/display.js index 5afec7e..5a33ae3 100644 --- a/corePlugins/display.js +++ b/corePlugins/display.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('', 'display', [ +export default () => generator.generate('', 'display', [ ['hidden', 'none'], 'flex', ]); diff --git a/corePlugins/end.js b/corePlugins/end.js index c07500d..65bc237 100644 --- a/corePlugins/end.js +++ b/corePlugins/end.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('end', 'end', theme.inset); +export default ({theme}) => generator.generate('end', 'end', theme.inset); diff --git a/corePlugins/flex.js b/corePlugins/flex.js index aeb1015..505d265 100644 --- a/corePlugins/flex.js +++ b/corePlugins/flex.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('flex', 'flex', theme.flex); +export default ({theme}) => generator.generate('flex', 'flex', theme.flex); diff --git a/corePlugins/flexDirection.js b/corePlugins/flexDirection.js index c932800..fa3f641 100644 --- a/corePlugins/flexDirection.js +++ b/corePlugins/flexDirection.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('flex', 'flexDirection', [ +export default () => generator.generate('flex', 'flexDirection', [ 'row', 'row-reverse', ['col', 'column'], diff --git a/corePlugins/flexGrow.js b/corePlugins/flexGrow.js index 48f019b..9780b65 100644 --- a/corePlugins/flexGrow.js +++ b/corePlugins/flexGrow.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('flex-grow', 'flexGrow', theme.flexGrow); +export default ({theme}) => generator.generate('flex-grow', 'flexGrow', theme.flexGrow); diff --git a/corePlugins/flexShrink.js b/corePlugins/flexShrink.js index b094254..1042f66 100644 --- a/corePlugins/flexShrink.js +++ b/corePlugins/flexShrink.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('flex-shrink', 'flexShrink', theme.flexShrink); +export default ({theme}) => generator.generate('flex-shrink', 'flexShrink', theme.flexShrink); diff --git a/corePlugins/flexWrap.js b/corePlugins/flexWrap.js index eae013a..a78b192 100644 --- a/corePlugins/flexWrap.js +++ b/corePlugins/flexWrap.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('flex', 'flexWrap', [ +export default () => generator.generate('flex', 'flexWrap', [ 'wrap', 'wrap-reverse', ['no-wrap', 'nowrap'], diff --git a/corePlugins/fontFamily.js b/corePlugins/fontFamily.js index 9e951d4..44523ff 100644 --- a/corePlugins/fontFamily.js +++ b/corePlugins/fontFamily.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('font', 'fontFamily', theme.fontFamily); +export default ({theme}) => generator.generate('font', 'fontFamily', theme.fontFamily); diff --git a/corePlugins/fontPadding.js b/corePlugins/fontPadding.js index 87a07c9..446e49c 100644 --- a/corePlugins/fontPadding.js +++ b/corePlugins/fontPadding.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('fontPadding', 'includeFontPadding', [ +export default () => generator.generate('fontPadding', 'includeFontPadding', [ ['default', 'true'], 'false', ]); diff --git a/corePlugins/fontSize.js b/corePlugins/fontSize.js index d9b094d..74a8d17 100644 --- a/corePlugins/fontSize.js +++ b/corePlugins/fontSize.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('text', 'fontSize', theme.fontSize); +export default ({theme}) => generator.generate('text', 'fontSize', theme.fontSize); diff --git a/corePlugins/fontStyle.js b/corePlugins/fontStyle.js index df74528..3458025 100644 --- a/corePlugins/fontStyle.js +++ b/corePlugins/fontStyle.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('', 'fontStyle', [ +export default () => generator.generate('', 'fontStyle', [ ['not-italic', 'normal'], 'italic', ]); diff --git a/corePlugins/fontWeight.js b/corePlugins/fontWeight.js index e7f5369..382dcc5 100644 --- a/corePlugins/fontWeight.js +++ b/corePlugins/fontWeight.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('font', 'fontWeight', [ +export default () => generator.generate('font', 'fontWeight', [ 'normal', 'bold', ['hairline', 100], diff --git a/corePlugins/height.js b/corePlugins/height.js index b06cd1b..ee01683 100644 --- a/corePlugins/height.js +++ b/corePlugins/height.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('h', 'height', theme.height); +export default ({theme}) => generator.generate('h', 'height', theme.height); diff --git a/corePlugins/index.js b/corePlugins/index.js new file mode 100644 index 0000000..f51c201 --- /dev/null +++ b/corePlugins/index.js @@ -0,0 +1,127 @@ +import _keys from 'lodash/keys'; + +import alignContent from './alignContent'; +import alignItems from './alignItems'; +import alignSelf from './alignSelf'; +import backfaceVisibility from './backfaceVisibility'; +import borderStyle from './borderStyle'; +import direction from './direction'; +import display from './display'; +import flexDirection from './flexDirection'; +import flexWrap from './flexWrap'; +import fontPadding from './fontPadding'; +import fontStyle from './fontStyle'; +import fontWeight from './fontWeight'; +import justifyContent from './justifyContent'; +import objectFit from './objectFit'; +import overflow from './overflow'; +import position from './position'; +import resize from './resize'; +import textAlign from './textAlign'; +import textDecoration from './textDecoration'; +import textTransform from './textTransform'; +import verticalAlign from './verticalAlign'; +import backgroundColor from './backgroundColor'; +import borderColor from './borderColor'; +import borderRadius from './borderRadius'; +import borderWidth from './borderWidth'; +import flex from './flex'; +import flexGrow from './flexGrow'; +import flexShrink from './flexShrink'; +import fontFamily from './fontFamily'; +import fontSize from './fontSize'; +import height from './height'; +import inset from './inset'; +import top from './top'; +import bottom from './bottom'; +import left from './left'; +import right from './right'; +import start from './start'; +import end from './end'; +import letterSpacing from './letterSpacing'; +import lineHeight from './lineHeight'; +import margin from './margin'; +import marginOld from './marginOld'; +import maxHeight from './maxHeight'; +import maxWidth from './maxWidth'; +import minHeight from './minHeight'; +import minWidth from './minWidth'; +import opacity from './opacity'; +import padding from './padding'; +import paddingOld from './paddingOld'; +import textColor from './textColor'; +import tint from './tint'; +import width from './width'; +import zIndex from './zIndex'; +import boxShadow from './boxShadow'; +import textShadow from './textShadow'; +import insetDir from './insetDir'; +import borderWidthDir from './borderWidthDir'; +import borderRadiusDir from './borderRadiusDir'; + + +export const corePlugins = { + alignContent, + alignItems, + alignSelf, + backfaceVisibility, + borderStyle, + direction, + display, + flexDirection, + flexWrap, + fontPadding, + fontStyle, + fontWeight, + justifyContent, + objectFit, + overflow, + position, + resize, + textAlign, + textDecoration, + textTransform, + verticalAlign, + backgroundColor, + borderColor, + borderRadius, + borderWidth, + boxShadow, + flex, + flexGrow, + flexShrink, + fontFamily, + fontSize, + height, + inset, + top, + bottom, + left, + right, + start, + end, + letterSpacing, + lineHeight, + marginOld, + margin, + maxHeight, + maxWidth, + minHeight, + minWidth, + opacity, + paddingOld, + padding, + textColor, + textShadow, + tint, + width, + zIndex, + borderRadiusDir, + borderWidthDir, + insetDir, +}; + +export const corePluginsName = Object.assign( + {}, + ...(_keys(corePlugins).map(key => ({[key]: true}))), +); diff --git a/corePlugins/inset.js b/corePlugins/inset.js index 51fe4bb..8de614c 100644 --- a/corePlugins/inset.js +++ b/corePlugins/inset.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('inset', ['top', 'bottom', 'left', 'right'], theme.inset, [ +export default ({theme}) => generator.generate('inset', ['top', 'bottom', 'left', 'right'], theme.inset, [ ['x', ['left', 'right']], ['y', ['top', 'bottom']], ]); diff --git a/corePlugins/insetDir.js b/corePlugins/insetDir.js index 1443c30..fe853b5 100644 --- a/corePlugins/insetDir.js +++ b/corePlugins/insetDir.js @@ -1,6 +1,5 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('inset-dir', ['top', 'bottom', 'start', 'end'], theme.inset, [ +export default ({theme}) => generator.generate('inset-dir', ['top', 'bottom', 'start', 'end'], theme.inset, [ ['x', ['start', 'end']], ]); diff --git a/corePlugins/justifyContent.js b/corePlugins/justifyContent.js index 4c22826..c126a5c 100644 --- a/corePlugins/justifyContent.js +++ b/corePlugins/justifyContent.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('justify', 'justifyContent', [ +export default () => generator.generate('justify', 'justifyContent', [ ['start', 'flex-start'], ['end', 'flex-end'], 'center', diff --git a/corePlugins/left.js b/corePlugins/left.js index f82d7ba..cb2c38f 100644 --- a/corePlugins/left.js +++ b/corePlugins/left.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('left', 'left', theme.inset); +export default ({theme}) => generator.generate('left', 'left', theme.inset); diff --git a/corePlugins/letterSpacing.js b/corePlugins/letterSpacing.js index a72fa66..a0ab99a 100644 --- a/corePlugins/letterSpacing.js +++ b/corePlugins/letterSpacing.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('tracking', 'letterSpacing', theme.letterSpacing); +export default ({theme}) => generator.generate('tracking', 'letterSpacing', theme.letterSpacing); diff --git a/corePlugins/lineHeight.js b/corePlugins/lineHeight.js index 8ee2c63..992a6f6 100644 --- a/corePlugins/lineHeight.js +++ b/corePlugins/lineHeight.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('leading', 'lineHeight', theme.lineHeight); +export default ({theme}) => generator.generate('leading', 'lineHeight', theme.lineHeight); diff --git a/corePlugins/margin.js b/corePlugins/margin.js index 5cd26fe..9852893 100644 --- a/corePlugins/margin.js +++ b/corePlugins/margin.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('m', 'margin', theme.margin, [ +export default ({theme}) => generator.generate('m', 'margin', theme.margin, [ ['x', 'marginHorizontal'], ['y', 'marginVertical'], ['t', 'marginTop'], @@ -10,4 +9,4 @@ export default generator.generate('m', 'margin', theme.margin, [ ['l', 'marginLeft'], ['s', 'marginStart'], ['e', 'marginEnd'], -]); +], ''); diff --git a/corePlugins/marginOld.js b/corePlugins/marginOld.js new file mode 100644 index 0000000..389df38 --- /dev/null +++ b/corePlugins/marginOld.js @@ -0,0 +1,12 @@ +import generator from '../util/generator'; + +export default ({theme}) => generator.generate('m', 'margin', theme.margin, [ + ['x', 'marginHorizontal'], + ['y', 'marginVertical'], + ['t', 'marginTop'], + ['r', 'marginRight'], + ['b', 'marginBottom'], + ['l', 'marginLeft'], + ['s', 'marginStart'], + ['e', 'marginEnd'], +]); diff --git a/corePlugins/maxHeight.js b/corePlugins/maxHeight.js index 408c5f7..b22856d 100644 --- a/corePlugins/maxHeight.js +++ b/corePlugins/maxHeight.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('max-h', 'maxHeight', theme.maxHeight); +export default ({theme}) => generator.generate('max-h', 'maxHeight', theme.maxHeight); diff --git a/corePlugins/maxWidth.js b/corePlugins/maxWidth.js index 5adcd59..6a93334 100644 --- a/corePlugins/maxWidth.js +++ b/corePlugins/maxWidth.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('max-w', 'maxWidth', theme.maxWidth); +export default ({theme}) => generator.generate('max-w', 'maxWidth', theme.maxWidth); diff --git a/corePlugins/minHeight.js b/corePlugins/minHeight.js index 3ecbbca..5e7857f 100644 --- a/corePlugins/minHeight.js +++ b/corePlugins/minHeight.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('min-h', 'minHeight', theme.minHeight); +export default ({theme}) => generator.generate('min-h', 'minHeight', theme.minHeight); diff --git a/corePlugins/minWidth.js b/corePlugins/minWidth.js index 0b943ce..e1bd6a8 100644 --- a/corePlugins/minWidth.js +++ b/corePlugins/minWidth.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('min-w', 'minWidth', theme.minWidth); +export default ({theme}) => generator.generate('min-w', 'minWidth', theme.minWidth); diff --git a/corePlugins/objectFit.js b/corePlugins/objectFit.js index af4c90e..84cfea0 100644 --- a/corePlugins/objectFit.js +++ b/corePlugins/objectFit.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('object', 'resizeMode', ['contain', +export default () => generator.generate('object', 'resizeMode', ['contain', 'cover', 'stretch', 'center', diff --git a/corePlugins/opacity.js b/corePlugins/opacity.js index 4a4ad45..579543c 100644 --- a/corePlugins/opacity.js +++ b/corePlugins/opacity.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('opacity', 'opacity', theme.opacity); +export default ({theme}) => generator.generate('opacity', 'opacity', theme.opacity); diff --git a/corePlugins/overflow.js b/corePlugins/overflow.js index 67a9a2b..8c1c0f6 100644 --- a/corePlugins/overflow.js +++ b/corePlugins/overflow.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('overflow', 'overflow', [ +export default () => generator.generate('overflow', 'overflow', [ 'visible', 'hidden', ]); diff --git a/corePlugins/padding.js b/corePlugins/padding.js index 25980ec..507c760 100644 --- a/corePlugins/padding.js +++ b/corePlugins/padding.js @@ -1,7 +1,6 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('p', 'padding', theme.padding, [ +export default ({theme}) => generator.generate('p', 'padding', theme.padding, [ ['x', 'paddingHorizontal'], ['y', 'paddingVertical'], ['t', 'paddingTop'], @@ -10,4 +9,4 @@ export default generator.generate('p', 'padding', theme.padding, [ ['l', 'paddingLeft'], ['s', 'paddingStart'], ['e', 'paddingEnd'], -]); +], ''); diff --git a/corePlugins/paddingOld.js b/corePlugins/paddingOld.js new file mode 100644 index 0000000..6d0f427 --- /dev/null +++ b/corePlugins/paddingOld.js @@ -0,0 +1,12 @@ +import generator from '../util/generator'; + +export default ({theme}) => generator.generate('p', 'padding', theme.padding, [ + ['x', 'paddingHorizontal'], + ['y', 'paddingVertical'], + ['t', 'paddingTop'], + ['r', 'paddingRight'], + ['b', 'paddingBottom'], + ['l', 'paddingLeft'], + ['s', 'paddingStart'], + ['e', 'paddingEnd'], +]); diff --git a/corePlugins/position.js b/corePlugins/position.js index fc6a6e8..6b075f3 100644 --- a/corePlugins/position.js +++ b/corePlugins/position.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('', 'position', [ +export default () => generator.generate('', 'position', [ 'absolute', 'relative', ]); diff --git a/corePlugins/resize.js b/corePlugins/resize.js index d097338..b73ff47 100644 --- a/corePlugins/resize.js +++ b/corePlugins/resize.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('resize', 'resizeMode', [ +export default () => generator.generate('resize', 'resizeMode', [ 'contain', 'cover', 'stretch', diff --git a/corePlugins/right.js b/corePlugins/right.js index bd8c4bf..5c7ca00 100644 --- a/corePlugins/right.js +++ b/corePlugins/right.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('right', 'right', theme.inset); +export default ({theme}) => generator.generate('right', 'right', theme.inset); diff --git a/corePlugins/start.js b/corePlugins/start.js index 12439c3..94d1938 100644 --- a/corePlugins/start.js +++ b/corePlugins/start.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('start', 'start', theme.inset); +export default ({theme}) => generator.generate('start', 'start', theme.inset); diff --git a/corePlugins/textAlign.js b/corePlugins/textAlign.js index eaa0020..df37933 100644 --- a/corePlugins/textAlign.js +++ b/corePlugins/textAlign.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('text', 'textAlign', [ +export default () => generator.generate('text', 'textAlign', [ 'auto', 'left', 'right', diff --git a/corePlugins/textColor.js b/corePlugins/textColor.js index af18a8a..bd2924c 100644 --- a/corePlugins/textColor.js +++ b/corePlugins/textColor.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import colors from '../color'; -export default generator.generate('text', 'color', colors); +export default ({colors}) => generator.generate('text', 'color', colors); diff --git a/corePlugins/textDecoration.js b/corePlugins/textDecoration.js index 1b067fd..cbd080a 100644 --- a/corePlugins/textDecoration.js +++ b/corePlugins/textDecoration.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('', 'textDecorationLine', [ +export default () => generator.generate('', 'textDecorationLine', [ ['no-underline', 'none'], 'underline', 'line-through', diff --git a/corePlugins/textShadow.js b/corePlugins/textShadow.js index 1f5d4ed..3f4c494 100644 --- a/corePlugins/textShadow.js +++ b/corePlugins/textShadow.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generateShadows('text-shadow', 'textShadow', theme.boxShadow); +export default ({theme}) => generator.generateShadows('text-shadow', 'textShadow', theme.boxShadow); diff --git a/corePlugins/textTransform.js b/corePlugins/textTransform.js index fced0d1..f168908 100644 --- a/corePlugins/textTransform.js +++ b/corePlugins/textTransform.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('', 'textTransform', [ +export default () => generator.generate('', 'textTransform', [ ['normal-case', 'none'], 'uppercase', 'lowercase', diff --git a/corePlugins/tint.js b/corePlugins/tint.js index 6629b00..8fb7fd2 100644 --- a/corePlugins/tint.js +++ b/corePlugins/tint.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import colors from '../color'; -export default generator.generate('tint', 'tintColor', colors); +export default ({colors}) => generator.generate('tint', 'tintColor', colors); diff --git a/corePlugins/top.js b/corePlugins/top.js index 0895e5c..22c1a04 100644 --- a/corePlugins/top.js +++ b/corePlugins/top.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('top', 'top', theme.inset); +export default ({theme}) => generator.generate('top', 'top', theme.inset); diff --git a/corePlugins/verticalAlign.js b/corePlugins/verticalAlign.js index 0487cea..1e1d5f4 100644 --- a/corePlugins/verticalAlign.js +++ b/corePlugins/verticalAlign.js @@ -1,6 +1,6 @@ import generator from '../util/generator'; -export default generator.generate('align', 'textAlignVertical', [ +export default () => generator.generate('align', 'textAlignVertical', [ 'auto', 'top', 'bottom', diff --git a/corePlugins/width.js b/corePlugins/width.js index 235a0e1..90c60a5 100644 --- a/corePlugins/width.js +++ b/corePlugins/width.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('w', 'width', theme.width); +export default ({theme}) => generator.generate('w', 'width', theme.width); diff --git a/corePlugins/zIndex.js b/corePlugins/zIndex.js index 9b92bc9..6993c0f 100644 --- a/corePlugins/zIndex.js +++ b/corePlugins/zIndex.js @@ -1,4 +1,3 @@ import generator from '../util/generator'; -import theme from '../util/configHandler'; -export default generator.generate('z', 'zIndex', theme.zIndex); +export default ({theme}) => generator.generate('z', 'zIndex', theme.zIndex); diff --git a/docs/spacing/margin.md b/docs/spacing/margin.md index 94bc705..4968004 100644 --- a/docs/spacing/margin.md +++ b/docs/spacing/margin.md @@ -31,14 +31,14 @@ classes: directions: [ ['', {margin}], - ['X', {marginHorizontal}], - ['Y', {marginVertical}], - ['T', {marginTop}], - ['R', {marginRight}], - ['B', {marginBottom}], - ['L', {marginLeft}], - ['S', {marginStart}], - ['E', {marginEnd}], + ['x', {marginHorizontal}], + ['y', {marginVertical}], + ['t', {marginTop}], + ['r', {marginRight}], + ['b', {marginBottom}], + ['l', {marginLeft}], + ['s', {marginStart}], + ['e', {marginEnd}], ] --- diff --git a/docs/spacing/padding.md b/docs/spacing/padding.md index 93b4c6a..8df3c87 100644 --- a/docs/spacing/padding.md +++ b/docs/spacing/padding.md @@ -31,14 +31,14 @@ classes: directions: [ ['', {padding}], - ['X', {paddingHorizontal}], - ['Y', {paddingVertical}], - ['T', {paddingTop}], - ['R', {paddingRight}], - ['B', {paddingBottom}], - ['L', {paddingLeft}], - ['S', {paddingStart}], - ['E', {paddingEnd}], + ['x', {paddingHorizontal}], + ['y', {paddingVertical}], + ['t', {paddingTop}], + ['r', {paddingRight}], + ['b', {paddingBottom}], + ['l', {paddingLeft}], + ['s', {paddingStart}], + ['e', {paddingEnd}], ] --- diff --git a/index.d.ts b/index.d.ts index 9899d15..e5abe81 100644 --- a/index.d.ts +++ b/index.d.ts @@ -589,128 +589,17 @@ interface TailwindStyles { h4: any; h5: any; h6: any; - h7: any; h8: any; - h9: any; h10: any; - h11: any; h12: any; - h13: any; - h14: any; - h15: any; h16: any; - h17: any; - h18: any; - h19: any; h20: any; - h21: any; - h22: any; - h23: any; h24: any; - h25: any; - h26: any; - h27: any; - h28: any; - h29: any; - h30: any; - h31: any; h32: any; - h33: any; - h34: any; - h35: any; - h36: any; - h37: any; - h38: any; - h39: any; h40: any; - h41: any; - h42: any; - h43: any; - h44: any; - h45: any; - h46: any; - h47: any; h48: any; - h49: any; - h50: any; - h51: any; - h52: any; - h53: any; - h54: any; - h55: any; h56: any; - h57: any; - h58: any; - h59: any; - h60: any; - h61: any; - h62: any; - h63: any; h64: any; - h65: any; - h66: any; - h67: any; - h68: any; - h69: any; - h70: any; - h71: any; - h72: any; - h73: any; - h74: any; - h75: any; - h76: any; - h77: any; - h78: any; - h79: any; - h80: any; - h81: any; - h82: any; - h83: any; - h84: any; - h85: any; - h86: any; - h87: any; - h88: any; - h89: any; - h90: any; - h91: any; - h92: any; - h93: any; - h94: any; - h95: any; - h96: any; - h97: any; - h98: any; - h99: any; - h100: any; - h101: any; - h102: any; - h103: any; - h104: any; - h105: any; - h106: any; - h107: any; - h108: any; - h109: any; - h110: any; - h111: any; - h112: any; - h113: any; - h114: any; - h115: any; - h116: any; - h117: any; - h118: any; - h119: any; - h120: any; - h121: any; - h122: any; - h123: any; - h124: any; - h125: any; - h126: any; - h127: any; - h128: any; hAuto: any; hPx: any; h1_2: any; @@ -786,128 +675,17 @@ interface TailwindStyles { m4: any; m5: any; m6: any; - m7: any; m8: any; - m9: any; m10: any; - m11: any; m12: any; - m13: any; - m14: any; - m15: any; m16: any; - m17: any; - m18: any; - m19: any; m20: any; - m21: any; - m22: any; - m23: any; m24: any; - m25: any; - m26: any; - m27: any; - m28: any; - m29: any; - m30: any; - m31: any; m32: any; - m33: any; - m34: any; - m35: any; - m36: any; - m37: any; - m38: any; - m39: any; m40: any; - m41: any; - m42: any; - m43: any; - m44: any; - m45: any; - m46: any; - m47: any; m48: any; - m49: any; - m50: any; - m51: any; - m52: any; - m53: any; - m54: any; - m55: any; m56: any; - m57: any; - m58: any; - m59: any; - m60: any; - m61: any; - m62: any; - m63: any; m64: any; - m65: any; - m66: any; - m67: any; - m68: any; - m69: any; - m70: any; - m71: any; - m72: any; - m73: any; - m74: any; - m75: any; - m76: any; - m77: any; - m78: any; - m79: any; - m80: any; - m81: any; - m82: any; - m83: any; - m84: any; - m85: any; - m86: any; - m87: any; - m88: any; - m89: any; - m90: any; - m91: any; - m92: any; - m93: any; - m94: any; - m95: any; - m96: any; - m97: any; - m98: any; - m99: any; - m100: any; - m101: any; - m102: any; - m103: any; - m104: any; - m105: any; - m106: any; - m107: any; - m108: any; - m109: any; - m110: any; - m111: any; - m112: any; - m113: any; - m114: any; - m115: any; - m116: any; - m117: any; - m118: any; - m119: any; - m120: any; - m121: any; - m122: any; - m123: any; - m124: any; - m125: any; - m126: any; - m127: any; - m128: any; mAuto: any; mPx: any; _m1: any; @@ -916,55 +694,15 @@ interface TailwindStyles { _m4: any; _m5: any; _m6: any; - _m7: any; _m8: any; - _m9: any; _m10: any; - _m11: any; _m12: any; - _m13: any; - _m14: any; - _m15: any; _m16: any; - _m17: any; - _m18: any; - _m19: any; _m20: any; - _m21: any; - _m22: any; - _m23: any; _m24: any; - _m25: any; - _m26: any; - _m27: any; - _m28: any; - _m29: any; - _m30: any; - _m31: any; _m32: any; - _m33: any; - _m34: any; - _m35: any; - _m36: any; - _m37: any; - _m38: any; - _m39: any; _m40: any; - _m41: any; - _m42: any; - _m43: any; - _m44: any; - _m45: any; - _m46: any; - _m47: any; _m48: any; - _m49: any; - _m50: any; - _m51: any; - _m52: any; - _m53: any; - _m54: any; - _m55: any; _m56: any; _m57: any; _m58: any; @@ -5324,3 +5062,8 @@ export const tw: TailwindStyles; export const theme: TailwindStyles; export const tailwind: TailwindStyles; export const color: TailwindColors; + +export const tailwindClass: (cn: string) => TailwindStyles; +export const cnToStyle: (cn: string) => TailwindStyles; +export const css: (cn: string) => TailwindStyles; +export const c: (cn: string) => TailwindStyles; diff --git a/index.js b/index.js index 78b58bf..299519f 100644 --- a/index.js +++ b/index.js @@ -1,15 +1,27 @@ -import color from './color'; -import colors from './color'; -import theme from './tailwind'; -import tailwind from './tailwind'; -import tw from './tailwind'; -import t from './tailwind'; - -export { - t, - tw, - tailwind, - color, - colors, - theme, -}; +import {Tailwind} from './tailwind'; + +let defaultConfig = require('./stubs/simpleConfig.stub'); + +try { + defaultConfig = require('../../tailwind.config'); +} catch (e) {} + +const tailwindObj = new Tailwind(defaultConfig); + +export const tailwind = tailwindObj.style; +export const tw = tailwind; +export const t = tailwind; + +export const converter = tailwindObj.converter; +export const css = converter; +export const c = converter; + +export const colors = tailwindObj.colors; +export const color = colors; + +export const resetCache = tailwindObj.resetCache; + +export const {config} = tailwindObj; +export const {theme} = config; + +export const plugin = tailwindObj.plugin; diff --git a/package.json b/package.json index f23d03f..cbfdbc1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-tailwindcss", - "version": "1.1.9", + "version": "2.0.0", "keywords": [ "react", "native", diff --git a/plugin.js b/plugin.js new file mode 100644 index 0000000..ce66551 --- /dev/null +++ b/plugin.js @@ -0,0 +1,3 @@ +import {plugin} from './index'; + +export default plugin; diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 7291448..14c67ca 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -1,583 +1,528 @@ module.exports = { - theme: { - colors: { - transparent: 'transparent', + prefix: '', + separator: '-', + theme: { + colors: { + transparent: 'transparent', - black: '#000', - white: '#fff', + black: '#000', + white: '#fff', - gray: { - 100: '#f7fafc', - 200: '#edf2f7', - 300: '#e2e8f0', - 400: '#cbd5e0', - 500: '#a0aec0', - 600: '#718096', - 700: '#4a5568', - 800: '#2d3748', - 900: '#1a202c', - }, - red: { - 100: '#fff5f5', - 200: '#fed7d7', - 300: '#feb2b2', - 400: '#fc8181', - 500: '#f56565', - 600: '#e53e3e', - 700: '#c53030', - 800: '#9b2c2c', - 900: '#742a2a', - }, - orange: { - 100: '#fffaf0', - 200: '#feebc8', - 300: '#fbd38d', - 400: '#f6ad55', - 500: '#ed8936', - 600: '#dd6b20', - 700: '#c05621', - 800: '#9c4221', - 900: '#7b341e', - }, - yellow: { - 100: '#fffff0', - 200: '#fefcbf', - 300: '#faf089', - 400: '#f6e05e', - 500: '#ecc94b', - 600: '#d69e2e', - 700: '#b7791f', - 800: '#975a16', - 900: '#744210', - }, - green: { - 100: '#f0fff4', - 200: '#c6f6d5', - 300: '#9ae6b4', - 400: '#68d391', - 500: '#48bb78', - 600: '#38a169', - 700: '#2f855a', - 800: '#276749', - 900: '#22543d', - }, - teal: { - 100: '#e6fffa', - 200: '#b2f5ea', - 300: '#81e6d9', - 400: '#4fd1c5', - 500: '#38b2ac', - 600: '#319795', - 700: '#2c7a7b', - 800: '#285e61', - 900: '#234e52', - }, - blue: { - 100: '#ebf8ff', - 200: '#bee3f8', - 300: '#90cdf4', - 400: '#63b3ed', - 500: '#4299e1', - 600: '#3182ce', - 700: '#2b6cb0', - 800: '#2c5282', - 900: '#2a4365', - }, - indigo: { - 100: '#ebf4ff', - 200: '#c3dafe', - 300: '#a3bffa', - 400: '#7f9cf5', - 500: '#667eea', - 600: '#5a67d8', - 700: '#4c51bf', - 800: '#434190', - 900: '#3c366b', - }, - purple: { - 100: '#faf5ff', - 200: '#e9d8fd', - 300: '#d6bcfa', - 400: '#b794f4', - 500: '#9f7aea', - 600: '#805ad5', - 700: '#6b46c1', - 800: '#553c9a', - 900: '#44337a', - }, - pink: { - 100: '#fff5f7', - 200: '#fed7e2', - 300: '#fbb6ce', - 400: '#f687b3', - 500: '#ed64a6', - 600: '#d53f8c', - 700: '#b83280', - 800: '#97266d', - 900: '#702459', - }, + gray: { + 100: '#f7fafc', + 200: '#edf2f7', + 300: '#e2e8f0', + 400: '#cbd5e0', + 500: '#a0aec0', + 600: '#718096', + 700: '#4a5568', + 800: '#2d3748', + 900: '#1a202c', + }, + red: { + 100: '#fff5f5', + 200: '#fed7d7', + 300: '#feb2b2', + 400: '#fc8181', + 500: '#f56565', + 600: '#e53e3e', + 700: '#c53030', + 800: '#9b2c2c', + 900: '#742a2a', + }, + orange: { + 100: '#fffaf0', + 200: '#feebc8', + 300: '#fbd38d', + 400: '#f6ad55', + 500: '#ed8936', + 600: '#dd6b20', + 700: '#c05621', + 800: '#9c4221', + 900: '#7b341e', + }, + yellow: { + 100: '#fffff0', + 200: '#fefcbf', + 300: '#faf089', + 400: '#f6e05e', + 500: '#ecc94b', + 600: '#d69e2e', + 700: '#b7791f', + 800: '#975a16', + 900: '#744210', + }, + green: { + 100: '#f0fff4', + 200: '#c6f6d5', + 300: '#9ae6b4', + 400: '#68d391', + 500: '#48bb78', + 600: '#38a169', + 700: '#2f855a', + 800: '#276749', + 900: '#22543d', + }, + teal: { + 100: '#e6fffa', + 200: '#b2f5ea', + 300: '#81e6d9', + 400: '#4fd1c5', + 500: '#38b2ac', + 600: '#319795', + 700: '#2c7a7b', + 800: '#285e61', + 900: '#234e52', + }, + blue: { + 100: '#ebf8ff', + 200: '#bee3f8', + 300: '#90cdf4', + 400: '#63b3ed', + 500: '#4299e1', + 600: '#3182ce', + 700: '#2b6cb0', + 800: '#2c5282', + 900: '#2a4365', + }, + indigo: { + 100: '#ebf4ff', + 200: '#c3dafe', + 300: '#a3bffa', + 400: '#7f9cf5', + 500: '#667eea', + 600: '#5a67d8', + 700: '#4c51bf', + 800: '#434190', + 900: '#3c366b', + }, + purple: { + 100: '#faf5ff', + 200: '#e9d8fd', + 300: '#d6bcfa', + 400: '#b794f4', + 500: '#9f7aea', + 600: '#805ad5', + 700: '#6b46c1', + 800: '#553c9a', + 900: '#44337a', + }, + pink: { + 100: '#fff5f7', + 200: '#fed7e2', + 300: '#fbb6ce', + 400: '#f687b3', + 500: '#ed64a6', + 600: '#d53f8c', + 700: '#b83280', + 800: '#97266d', + 900: '#702459', + }, + }, + spacing: { + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '24': '6rem', + '32': '8rem', + '40': '10rem', + '48': '12rem', + '56': '14rem', + '64': '16rem' + }, + backgroundColor: theme => theme('colors'), + borderColor: theme => ({ + ...theme('colors'), + default: theme('colors.gray.300', 'currentColor'), + }), + borderRadius: { + none: '0', + sm: '0.125rem', + default: '0.25rem', + lg: '0.5rem', + full: '9999px', + }, + borderWidth: { + default: '1px', + '0': '0', + '2': '2px', + '3': '3px', + '4': '4px', + '5': '5px', + '6': '6px', + '7': '7px', + '8': '8px', + '9': '9px', + '10': '10px', + }, + boxShadow: { + default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 1.5', + md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 3', + lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 7.5', + xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 12.5', + '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25), 25', + outline: '0 0 0 3px rgba(66, 153, 225, 0.5), 1.5', + none: 'none', + }, + flex: { + '0': '0', + '1': '1', + initial: '0', + none: 'none', + }, + flexGrow: { + '0': '0', + default: '1', + }, + flexShrink: { + '0': '0', + default: '1', + }, + fontFamily: { + sans: 'Arial', + serif: 'Georgia', + mono: 'Courier New', + }, + fontSize: { + xs: '0.75rem', + sm: '0.875rem', + base: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.875rem', + '4xl': '2.25rem', + '5xl': '3rem', + '6xl': '4rem', + }, + fontWeight: { + hairline: '100', + thin: '200', + light: '300', + normal: '400', + medium: '500', + semibold: '600', + bold: '700', + extrabold: '800', + black: '900', + }, + height: (theme) => ({ + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + screen: '100vh', + }), + inset: { + '0': '0', + auto: 'auto', + }, + letterSpacing: { + tighter: '-0.05em', + tight: '-0.025em', + normal: '0', + wide: '0.025em', + wider: '0.05em', + widest: '0.1em', + }, + lineHeight: { + none: '1rem', + tight: '1.25rem', + snug: '1.375rem', + normal: '1.5rem', + relaxed: '1.625rem', + loose: '2rem', + }, + margin: (theme, {negative}) => ({ + auto: 'auto', + ...theme('spacing'), + ...negative(theme('spacing')), + }), + maxHeight: theme => ({ + '0': '0', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + screen: '100vh', + }), + maxWidth: theme => ({ + '0': '0', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + }), + minHeight: theme => ({ + '0': '0', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + screen: '100vh', + }), + minWidth: theme => ({ + '0': '0', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + }), + opacity: { + '0': '0', + '5': '0.05', + '10': '0.1', + '15': '0.15', + '20': '0.2', + '25': '0.25', + '30': '0.3', + '35': '0.35', + '40': '0.4', + '45': '0.45', + '50': '0.5', + '55': '0.55', + '60': '0.6', + '65': '0.65', + '70': '0.7', + '75': '0.75', + '80': '0.8', + '85': '0.85', + '90': '0.9', + '95': '0.95', + '100': '1', + }, + padding: theme => theme('spacing'), + textColor: theme => theme('colors'), + width: theme => ({ + auto: 'auto', + ...theme('spacing'), + '1/2': '50%', + '1/3': '33.333333%', + '2/3': '66.666667%', + '1/4': '25%', + '2/4': '50%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.666667%', + '2/6': '33.333333%', + '3/6': '50%', + '4/6': '66.666667%', + '5/6': '83.333333%', + '1/12': '8.333333%', + '2/12': '16.666667%', + '3/12': '25%', + '4/12': '33.333333%', + '5/12': '41.666667%', + '6/12': '50%', + '7/12': '58.333333%', + '8/12': '66.666667%', + '9/12': '75%', + '10/12': '83.333333%', + '11/12': '91.666667%', + full: '100%', + screen: '100vw', + }), + zIndex: { + auto: 'auto', + '0': '0', + '10': '10', + '20': '20', + '30': '30', + '40': '40', + '50': '50', + '60': '60', + '70': '70', + '80': '80', + '90': '90', + '100': '100', + }, }, - spacing: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '7': '1.75rem', - '8': '2rem', - '9': '2.25rem', - '10': '2.5rem', - '11': '2.75rem', - '12': '3rem', - '13': '3.25rem', - '14': '3.5rem', - '15': '3.75rem', - '16': '4rem', - '17': '4.25rem', - '18': '4.5rem', - '19': '4.75rem', - '20': '5rem', - '21': '5.25rem', - '22': '5.5rem', - '23': '5.75rem', - '24': '6rem', - '25': '6.25rem', - '26': '6.5rem', - '27': '6.75rem', - '28': '7rem', - '29': '7.25rem', - '30': '7.5rem', - '31': '7.75rem', - '32': '8rem', - '33': '8.25rem', - '34': '8.5rem', - '35': '8.75rem', - '36': '9rem', - '37': '9.25rem', - '38': '9.5rem', - '39': '9.75rem', - '40': '10rem', - '41': '10.25rem', - '42': '10.5rem', - '43': '10.75rem', - '44': '11rem', - '45': '11.25rem', - '46': '11.5rem', - '47': '11.75rem', - '48': '12rem', - '49': '12.25rem', - '50': '12.5rem', - '51': '12.75rem', - '52': '13rem', - '53': '13.25rem', - '54': '13.5rem', - '55': '13.75rem', - '56': '14rem', - '57': '14.25rem', - '58': '14.5rem', - '59': '14.75rem', - '60': '15rem', - '61': '15.25rem', - '62': '15.5rem', - '63': '15.75rem', - '64': '16rem', - '65': '16.25rem', - '66': '16.5rem', - '67': '16.75rem', - '68': '17rem', - '69': '17.25rem', - '70': '17.5rem', - '71': '17.75rem', - '72': '18rem', - '73': '18.25rem', - '74': '18.5rem', - '75': '18.75rem', - '76': '19rem', - '77': '19.25rem', - '78': '19.5rem', - '79': '19.75rem', - '80': '20rem', - '81': '20.25rem', - '82': '20.5rem', - '83': '20.75rem', - '84': '21rem', - '85': '21.25rem', - '86': '21.5rem', - '87': '21.75rem', - '88': '22rem', - '89': '22.25rem', - '90': '22.5rem', - '91': '22.75rem', - '92': '23rem', - '93': '23.25rem', - '94': '23.5rem', - '95': '23.75rem', - '96': '24rem', - '97': '24.25rem', - '98': '24.5rem', - '99': '24.75rem', - '100': '25rem', - '101': '25.25rem', - '102': '25.5rem', - '103': '25.75rem', - '104': '26rem', - '105': '26.25rem', - '106': '26.5rem', - '107': '26.75rem', - '108': '27rem', - '109': '27.25rem', - '110': '27.5rem', - '111': '27.75rem', - '112': '28rem', - '113': '28.25rem', - '114': '28.5rem', - '115': '28.75rem', - '116': '29rem', - '117': '29.25rem', - '118': '29.5rem', - '119': '29.75rem', - '120': '30rem', - '121': '30.25rem', - '122': '30.5rem', - '123': '30.75rem', - '124': '31rem', - '125': '31.25rem', - '126': '31.5rem', - '127': '31.75rem', - '128': '32rem', - }, - backgroundColor: theme => theme('colors'), - borderColor: theme => ({ - ...theme('colors'), - default: theme('colors.gray.300', 'currentColor'), - }), - borderRadius: { - none: '0', - sm: '0.125rem', - default: '0.25rem', - lg: '0.5rem', - full: '9999px', - }, - borderWidth: { - default: '1px', - '0': '0', - '2': '2px', - '3': '3px', - '4': '4px', - '5': '5px', - '6': '6px', - '7': '7px', - '8': '8px', - '9': '9px', - '10': '10px', - }, - boxShadow: { - default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 1.5', - md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 3', - lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 7.5', - xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 12.5', - '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25), 25', - outline: '0 0 0 3px rgba(66, 153, 225, 0.5), 1.5', - none: 'none', - }, - flex: { - '0': '0', - '1': '1', - initial: '0', - none: 'none', - }, - flexGrow: { - '0': '0', - default: '1', - }, - flexShrink: { - '0': '0', - default: '1', - }, - fontFamily: { - sans: 'Arial', - serif: 'Georgia', - mono: 'Courier New', - }, - fontSize: { - xs: '0.75rem', - sm: '0.875rem', - base: '1rem', - lg: '1.125rem', - xl: '1.25rem', - '2xl': '1.5rem', - '3xl': '1.875rem', - '4xl': '2.25rem', - '5xl': '3rem', - '6xl': '4rem', - }, - fontWeight: { - hairline: '100', - thin: '200', - light: '300', - normal: '400', - medium: '500', - semibold: '600', - bold: '700', - extrabold: '800', - black: '900', - }, - height: theme => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - screen: '100vh', - }), - inset: { - '0': '0', - auto: 'auto', - }, - letterSpacing: { - tighter: '-0.05em', - tight: '-0.025em', - normal: '0', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', - }, - lineHeight: { - none: '1rem', - tight: '1.25rem', - snug: '1.375rem', - normal: '1.5rem', - relaxed: '1.625rem', - loose: '2rem', - }, - margin: (theme, { negative }) => ({ - auto: 'auto', - ...theme('spacing'), - ...negative(theme('spacing')), - }), - maxHeight: theme => ({ - '0': '0', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - screen: '100vh', - }), - maxWidth: theme => ({ - '0': '0', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - }), - minHeight: theme => ({ - '0': '0', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - screen: '100vh', - }), - minWidth: theme => ({ - '0': '0', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - }), - opacity: { - '0': '0', - '5': '0.05', - '10': '0.1', - '15': '0.15', - '20': '0.2', - '25': '0.25', - '30': '0.3', - '35': '0.35', - '40': '0.4', - '45': '0.45', - '50': '0.5', - '55': '0.55', - '60': '0.6', - '65': '0.65', - '70': '0.7', - '75': '0.75', - '80': '0.8', - '85': '0.85', - '90': '0.9', - '95': '0.95', - '100': '1', - }, - padding: theme => theme('spacing'), - textColor: theme => theme('colors'), - width: theme => ({ - auto: 'auto', - ...theme('spacing'), - '1/2': '50%', - '1/3': '33.333333%', - '2/3': '66.666667%', - '1/4': '25%', - '2/4': '50%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.666667%', - '2/6': '33.333333%', - '3/6': '50%', - '4/6': '66.666667%', - '5/6': '83.333333%', - '1/12': '8.333333%', - '2/12': '16.666667%', - '3/12': '25%', - '4/12': '33.333333%', - '5/12': '41.666667%', - '6/12': '50%', - '7/12': '58.333333%', - '8/12': '66.666667%', - '9/12': '75%', - '10/12': '83.333333%', - '11/12': '91.666667%', - full: '100%', - screen: '100vw', - }), - zIndex: { - auto: 'auto', - '0': '0', - '10': '10', - '20': '20', - '30': '30', - '40': '40', - '50': '50', - '60': '60', - '70': '70', - '80': '80', - '90': '90', - '100': '100', - }, - }, -} + corePlugins: [ + 'alignContent', + 'alignItems', + 'alignSelf', + 'backfaceVisibility', + 'backgroundColor', + 'borderColor', + 'borderRadius', + 'borderRadiusDir', + 'borderStyle', + 'borderWidth', + 'borderWidthDir', + 'bottom', + 'boxShadow', + 'direction', + 'display', + 'end', + 'flex', + 'flexDirection', + 'flexGrow', + 'flexShrink', + 'flexWrap', + 'fontFamily', + 'fontPadding', + 'fontSize', + 'fontWeight', + 'height', + 'inset', + 'insetDir', + 'justifyContent', + 'left', + 'letterSpacing', + 'lineHeight', + 'margin', + 'maxHeight', + 'maxWidth', + 'objectFit', + 'opacity', + 'overflow', + 'padding', + 'position', + 'resize', + 'start', + 'textAlign', + 'textColor', + 'textDecoration', + 'textShadow', + 'textTransform', + 'tint', + 'top', + 'verticalAlign', + 'width', + 'zIndex' + ], + plugins: [] +}; diff --git a/stubs/simpleConfig.stub.js b/stubs/simpleConfig.stub.js index c5d83f3..07590f8 100644 --- a/stubs/simpleConfig.stub.js +++ b/stubs/simpleConfig.stub.js @@ -2,4 +2,4 @@ module.exports = { theme: { extend: {}, }, -} +}; diff --git a/tailwind.js b/tailwind.js index 4d42500..1515fde 100644 --- a/tailwind.js +++ b/tailwind.js @@ -1,121 +1,142 @@ import {StyleSheet} from 'react-native'; +import resolveConfig from 'tailwindcss/resolveConfig' -import alignContent from './corePlugins/alignContent'; -import alignItems from './corePlugins/alignItems'; -import alignSelf from './corePlugins/alignSelf'; -import backfaceVisibility from './corePlugins/backfaceVisibility'; -import borderStyle from './corePlugins/borderStyle'; -import direction from './corePlugins/direction'; -import display from './corePlugins/display'; -import flexDirection from './corePlugins/flexDirection'; -import flexWrap from './corePlugins/flexWrap'; -import fontPadding from './corePlugins/fontPadding'; -import fontStyle from './corePlugins/fontStyle'; -import fontWeight from './corePlugins/fontWeight'; -import justifyContent from './corePlugins/justifyContent'; -import objectFit from './corePlugins/objectFit'; -import overflow from './corePlugins/overflow'; -import position from './corePlugins/position'; -import resize from './corePlugins/resize'; -import textAlign from './corePlugins/textAlign'; -import textDecoration from './corePlugins/textDecoration'; -import textTransform from './corePlugins/textTransform'; -import verticalAlign from './corePlugins/verticalAlign'; -import backgroundColor from './corePlugins/backgroundColor'; -import borderColor from './corePlugins/borderColor'; -import borderRadius from './corePlugins/borderRadius'; -import borderWidth from './corePlugins/borderWidth'; -import flex from './corePlugins/flex'; -import flexGrow from './corePlugins/flexGrow'; -import flexShrink from './corePlugins/flexShrink'; -import fontFamily from './corePlugins/fontFamily'; -import fontSize from './corePlugins/fontSize'; -import height from './corePlugins/height'; -import inset from './corePlugins/inset'; -import top from './corePlugins/top'; -import bottom from './corePlugins/bottom'; -import left from './corePlugins/left'; -import right from './corePlugins/right'; -import start from './corePlugins/start'; -import end from './corePlugins/end'; -import letterSpacing from './corePlugins/letterSpacing'; -import lineHeight from './corePlugins/lineHeight'; -import margin from './corePlugins/margin'; -import maxHeight from './corePlugins/maxHeight'; -import maxWidth from './corePlugins/maxWidth'; -import minHeight from './corePlugins/minHeight'; -import minWidth from './corePlugins/minWidth'; -import opacity from './corePlugins/opacity'; -import padding from './corePlugins/padding'; -import textColor from './corePlugins/textColor'; -import tint from './corePlugins/tint'; -import width from './corePlugins/width'; -import zIndex from './corePlugins/zIndex'; -import boxShadow from './corePlugins/boxShadow'; -import textShadow from './corePlugins/textShadow'; -import insetDir from './corePlugins/insetDir'; -import borderWidthDir from './corePlugins/borderWidthDir'; -import borderRadiusDir from './corePlugins/borderRadiusDir'; - -let style = {}; - -Object.assign(style, - alignContent, - alignItems, - alignSelf, - backfaceVisibility, - borderStyle, - direction, - display, - flexDirection, - flexWrap, - fontPadding, - fontStyle, - fontWeight, - justifyContent, - objectFit, - overflow, - position, - resize, - textAlign, - textDecoration, - textTransform, - verticalAlign, - backgroundColor, - borderColor, - borderRadius, - borderWidth, - boxShadow, - flex, - flexGrow, - flexShrink, - fontFamily, - fontSize, - height, - inset, - top, - bottom, - left, - right, - start, - end, - letterSpacing, - lineHeight, - margin, - maxHeight, - maxWidth, - minHeight, - minWidth, - opacity, - padding, - textColor, - textShadow, - tint, - width, - zIndex, - borderRadiusDir, - borderWidthDir, - insetDir, -); - -export default StyleSheet.create(style); +import _merge from 'lodash/merge'; +import _mapKeys from 'lodash/mapKeys'; +import _isArray from 'lodash/isArray'; +import _keys from 'lodash/keys'; +import _pickBy from 'lodash/pickBy'; + +import generator from './util/generator'; +import {corePlugins, corePluginsName} from './corePlugins'; + + +export class Tailwind { + constructor(config) { + this.converter = this.converter.bind(this); + this._configure(config); + } + + _configure(config = {}) { + this.config = resolveConfig(config); + + this.colors = this._getColors(); + + let style = {}; + style = _merge(style, this._addCorePlugins(this.config.corePlugins || [])); + style = _merge(style, this._addPlugin(this.config.plugins || [])); + + this.resetCache(); + this.style = StyleSheet.create(style); + + return this.style; + } + + plugin(func) { + return func({ + addUtilities: this.addUtilities, + addComponents: this.addUtilities, + + config: this.config, + colors: this.colors, + theme: this.config.theme + }) + } + + prefix(className) { + return `${this.config.prefix}${this.config.separator}${className}` + } + + _getColors() { + let colors = {}; + const themeColors = generator.generateColors(this.config.theme.colors); + Object.assign(colors, themeColors); + return colors; + } + + _addUtilitiesOption = { + respectPrefix: true, + respectImportant: true, + variants: [] + }; + + addUtilities(newUtilities, options = {}) { + options = _merge(this._addUtilitiesOption, options); + newUtilities = _mapKeys(newUtilities, (className) => { + className = className.replaceAll('.', ''); + if (options.respectImportant) className = this.prefix(className); + className = generator.translateKeys(className); + + return className; + }); + + return newUtilities; + } + + _corePluginsToUse(cp) { + if (_isArray(cp)) return cp; + return _keys( + _pickBy( + {...corePluginsName, ...cp}, + plugin => plugin + ) + ); + } + + _addCorePlugins(cp) { + cp = this._corePluginsToUse(cp); + + let style = {}; + const colors = this.colors; + const theme = this.config.theme; + + cp.map(function (pluginName) { + style = {...style, ...corePlugins[pluginName]({theme, colors})} + }); + + return style; + } + + _addPlugin(pluginNames) { + let style = {}; + pluginNames.map(function (pluginStyle) { + style = {...style, ...pluginStyle}; + }); + + return style; + } + + _styleCache = {}; + + resetCache() { + this._styleCache = {}; + } + + converter(classes = '') { + if (!classes) return {}; + const styleCache = this._styleCache; + const t = this.style; + + let style = {}; + if (styleCache[classes]) return styleCache[classes]; + + classes.split(' ').map((className) => { + if (!className || className === '\n') return; + if (styleCache[className]) return style = {...style, ...styleCache[className]}; + + const cn = generator.translateKeys(className); + if (t[cn]) { + styleCache[className] = t[cn]; + return style = {...style, ...styleCache[className]}; + } else { + console.log(`Unsupported style ${className}`, cn, t[cn]); + } + }); + + styleCache[classes] = style; + this._styleCache = styleCache; + return style; + } +} + +export default Tailwind; diff --git a/util/configHandler.js b/util/configHandler.js deleted file mode 100644 index 94f1674..0000000 --- a/util/configHandler.js +++ /dev/null @@ -1,11 +0,0 @@ -import resolveConfig from 'tailwindcss/resolveConfig'; - -let file = require('../stubs/simpleConfig.stub'); - -try { - file = require('../../../tailwind.config'); -} catch (e) {} - -const {theme} = resolveConfig(file); - -export default theme; diff --git a/util/generator.js b/util/generator.js index e4f59f1..8736ac3 100644 --- a/util/generator.js +++ b/util/generator.js @@ -1,381 +1,396 @@ -export default { - generate(name, key, values, variation = []) { - let - i = 0, - j = 0, - styles = {}, - value = '', - styleName = '', - valueName = '', - keyName = '', - keys = '', - keyStyleName = ''; - - const - styleValues = this.parseThemeValues(values), - valuesLength = styleValues.length, - variationLength = variation.length; - - - for (; i < valuesLength; ++i) { - value = this.getValue(styleValues[i]); - valueName = this.getValueName(styleValues[i]); - keyName = this.getKeyName(name, valueName); - - styleName = this.translateKeys(keyName); - - if (this.guardAgainstCssNotSupportedInReactNative(key, this.translateValues(value))) { - styles[styleName] = this.guardedKeyHandler(key, value); - - continue; - } +function generate(name, key, values, variation = [], variantSpacing = '-') { + let + i = 0, + j = 0, + styles = {}, + value = '', + styleName = '', + valueName = '', + keyName = '', + keys = '', + keyStyleName = ''; + + const + styleValues = parseThemeValues(values), + valuesLength = styleValues.length, + variationLength = variation.length; + - styles[styleName] = this.keyHandler(key, value); + for (; i < valuesLength; ++i) { + value = getValue(styleValues[i]); + valueName = getValueName(styleValues[i]); + keyName = getKeyName(name, valueName); + + styleName = translateKeys(keyName); + + if (guardAgainstCssNotSupportedInReactNative(key, translateValues(value))) { + styles[styleName] = guardedKeyHandler(key, value); + + continue; } - if (variationLength) { - j = 0; - value = ''; - styleName = ''; - valueName = ''; - keyName = ''; - keyStyleName = ''; + styles[styleName] = keyHandler(key, value); + } - for (; j < variationLength; ++j) { - i = 0; - keyName = `${name}-${variation[j][0]}`; - keys = variation[j][1]; + if (variationLength) { + j = 0; + value = ''; + styleName = ''; + valueName = ''; + keyName = ''; + keyStyleName = ''; - for (; i < valuesLength; ++i) { - value = this.getValue(styleValues[i]); - valueName = this.getValueName(styleValues[i]); - keyStyleName = this.getKeyName(keyName, valueName); + for (; j < variationLength; ++j) { + i = 0; + keyName = `${name}${variantSpacing}${variation[j][0]}`; + keys = variation[j][1]; - styleName = this.translateKeys(keyStyleName); + for (; i < valuesLength; ++i) { + value = getValue(styleValues[i]); + valueName = getValueName(styleValues[i]); + keyStyleName = getKeyName(keyName, valueName); - if (this.guardAgainstCssNotSupportedInReactNative(keys, this.translateValues(value))) { - styles[styleName] = this.guardedKeyHandler(keys, value); + styleName = translateKeys(keyStyleName); - continue; - } + if (guardAgainstCssNotSupportedInReactNative(keys, translateValues(value))) { + styles[styleName] = guardedKeyHandler(keys, value); - styles[styleName] = this.keyHandler(keys, value); + continue; } - } - } - return styles; - }, - - generateShadows(name, key, values) { - let - i = 0, - styles = {}, - value = '', - styleName = '', - valueName = '', - keyName = '', - shadowValues = {}; - - const - styleValues = this.parseThemeValues(values), - valuesLength = styleValues.length; - - for (; i < valuesLength; ++i) { - value = this.getValue(styleValues[i]); - valueName = this.getValueName(styleValues[i]); - keyName = this.getKeyName(name, valueName); - shadowValues = this.getShadowValues(value); - - styleName = this.translateKeys(keyName); - styles[styleName] = {}; - - styles[styleName][`${key}Color`] = shadowValues.color; - styles[styleName][`${key}Offset`] = shadowValues.offset; - styles[styleName][`${key}Radius`] = shadowValues.radius; - - if (key === 'shadow') { - styles[styleName][`${key}Opacity`] = shadowValues.opacity; - styles[styleName]['elevation'] = shadowValues.elevation; + styles[styleName] = keyHandler(keys, value); } } + } - return styles; - }, + return styles; +} - generateColors(colors) { - let colorList = {}, - color, - currentColor, - colorKey, - colorValue, - colorName, - currentColorKeys; +function generateShadows(name, key, values) { + let + i = 0, + styles = {}, + value = '', + styleName = '', + valueName = '', + keyName = '', + shadowValues = {}; - for (color in colors) { - colorName = color; + const + styleValues = parseThemeValues(values), + valuesLength = styleValues.length; - currentColor = colors[colorName]; + for (; i < valuesLength; ++i) { + value = getValue(styleValues[i]); + valueName = getValueName(styleValues[i]); + keyName = getKeyName(name, valueName); + shadowValues = getShadowValues(value); - if (typeof currentColor !== 'object') { - colorValue = this.translateValues(currentColor); + styleName = translateKeys(keyName); + styles[styleName] = {}; - colorName = this.translateKeys(colorName); + styles[styleName][`${key}Color`] = shadowValues.color; + styles[styleName][`${key}Offset`] = shadowValues.offset; + styles[styleName][`${key}Radius`] = shadowValues.radius; - colorList[colorName] = colorValue; - } + if (key === 'shadow') { + styles[styleName][`${key}Opacity`] = shadowValues.opacity; + styles[styleName]['elevation'] = shadowValues.elevation; + } + } - if (typeof currentColor === 'object') { - currentColorKeys = Object.getOwnPropertyNames(currentColor); + return styles; +} - currentColorKeys.map(key => { - colorValue = this.translateValues(currentColor[key]); +function generateColors(colors) { + let colorList = {}, + color, + currentColor, + colorKey, + colorValue, + colorName, + currentColorKeys; - colorKey = this.translateKeys(`${colorName}-${key}`); + for (color in colors) { + colorName = color; - colorList[colorKey] = colorValue; - }); - } - } + currentColor = colors[colorName]; - return colorList; - }, + if (typeof currentColor !== 'object') { + colorValue = translateValues(currentColor); - getValue(value) { - let valueToReturn = value; + colorName = translateKeys(colorName); - if (typeof value === 'object') { - valueToReturn = value[1]; + colorList[colorName] = colorValue; } - if (typeof valueToReturn === 'object') { - valueToReturn = valueToReturn[0]; - } + if (typeof currentColor === 'object') { + currentColorKeys = Object.getOwnPropertyNames(currentColor); - return valueToReturn; - }, + currentColorKeys.map(key => { + colorValue = translateValues(currentColor[key]); - getValueName(value) { - if (typeof value === 'object') { - return value[0]; + colorKey = translateKeys(`${colorName}-${key}`); + + colorList[colorKey] = colorValue; + }); } + } - return value; - }, + return colorList; +} - getKeyName(name, valueName) { - let keyName = valueName, - prefix = name; +function getValue(value) { + let valueToReturn = value; - if (keyName.substring(0, 1) === '-') { - prefix = `-${name}`; - keyName = keyName.substring(1); - } + if (typeof value === 'object') { + valueToReturn = value[1]; + } - if (prefix !== '') { - keyName = `${prefix}-${keyName}`; - } + if (typeof valueToReturn === 'object') { + valueToReturn = valueToReturn[0]; + } - return keyName; - }, + return valueToReturn; +} - keyHandler(keys, value) { - let i = 0, tempObject = {}; - const keysLength = keys.length; +function getValueName(value) { + if (typeof value === 'object') { + return value[0]; + } - if (typeof keys === 'object') { - for (; i < keysLength; ++i) { - tempObject[keys[i]] = this.translateValues(value); - } + return value; +} - return tempObject; - } +function getKeyName(name, valueName) { + let keyName = valueName, + prefix = name; - tempObject[keys] = this.translateValues(value); + if (keyName.substring(0, 1) === '-') { + prefix = `-${name}`; + keyName = keyName.substring(1); + } - return tempObject; - }, + if (prefix !== '') { + keyName = `${prefix}-${keyName}`; + } - guardAgainstCssNotSupportedInReactNative(property, value) { - if (property === 'zIndex' && typeof value !== 'number') { - return true; - } + return keyName; +} - if (property === 'fontWeight' && typeof value === 'number') { - return true; - } +function keyHandler(keys, value) { + let i = 0, tempObject = {}; + const keysLength = keys.length; - if (property === 'letterSpacing') { - return true; + if (typeof keys === 'object') { + for (; i < keysLength; ++i) { + tempObject[keys[i]] = translateValues(value); } - if (property === 'flex' && typeof value !== 'number') { - return true; - } + return tempObject; + } - return false; - }, + tempObject[keys] = translateValues(value); - guardedKeyHandler(property, value) { - let tempObject = {}, translatedValue = 0; + return tempObject; +} - if (property === 'zIndex' && typeof value !== 'number') { - tempObject[property] = 0; - } +function guardAgainstCssNotSupportedInReactNative(property, value) { + if (property === 'zIndex' && typeof value !== 'number') { + return true; + } - if (property === 'fontWeight') { - tempObject[property] = `${value}`; - } + if (property === 'fontWeight' && typeof value === 'number') { + return true; + } - if (property === 'letterSpacing') { - if (value.search('em') !== -1) { - translatedValue = parseFloat(value.slice(0, -2)) * 16; - } + if (property === 'letterSpacing') { + return true; + } - tempObject[property] = translatedValue; - } + if (property === 'flex' && typeof value !== 'number') { + return true; + } + + return false; +} + +function guardedKeyHandler(property, value) { + let tempObject = {}, translatedValue = 0; - if (property === 'flex' && typeof value !== 'number') { - const firstNumber = value.match(/^[0-9]+/); + if (property === 'zIndex' && typeof value !== 'number') { + tempObject[property] = 0; + } - translatedValue = this.translateValues(firstNumber && firstNumber.length ? firstNumber[0] : 0); + if (property === 'fontWeight') { + tempObject[property] = `${value}`; + } - tempObject[property] = translatedValue; + if (property === 'letterSpacing') { + if (value.search('em') !== -1) { + translatedValue = parseFloat(value.slice(0, -2)) * 16; } - return tempObject; - }, + tempObject[property] = translatedValue; + } - translateKeys(name, prefix = '') { - let translatedKey = name; + if (property === 'flex' && typeof value !== 'number') { + const firstNumber = value.match(/^[0-9]+/); - if (translatedKey.search('default') !== -1) { - translatedKey = `${prefix}${translatedKey.replace('-default', '')}`; - } + translatedValue = translateValues(firstNumber && firstNumber.length ? firstNumber[0] : 0); - if (translatedKey.search(/\//) !== -1) { - translatedKey = `${prefix}${translatedKey.replace('/', '_')}`; - } + tempObject[property] = translatedValue; + } - if (translatedKey.search(/^-[a-zA-Z]/) !== -1) { - translatedKey = `${prefix}${translatedKey.replace(/^(-)[a-zA-Z]/g, (result) => { - return result.replace('-', '_'); - })}`; - } + return tempObject; +} - if (translatedKey.search('-') !== -1) { - translatedKey = translatedKey.replace(/-([a-z])/g, (result) => { - return result[1].toUpperCase(); - }); - } +function translateKeys(name, prefix = '') { + let translatedKey = name; - if (translatedKey.search(/^[a-zA-Z_]+-[0-9]/) !== -1) { - translatedKey = `${prefix}${translatedKey.replace('-', '')}`; - } + if (translatedKey.search('default') !== -1) { + translatedKey = `${prefix}${translatedKey.replace('-default', '')}`; + } - return translatedKey; - }, + if (translatedKey.search(/\//) !== -1) { + translatedKey = `${prefix}${translatedKey.replace('/', '_')}`; + } - translateValues(content) { - let translatedValue = content; + if (translatedKey.search(/^-[a-zA-Z]/) !== -1) { + translatedKey = `${prefix}${translatedKey.replace(/^(-)[a-zA-Z]/g, (result) => { + return result.replace('-', '_'); + })}`; + } - if (translatedValue === 'transparent') { - return 'rgba(0,0,0,0)'; - } + if (translatedKey.search('-') !== -1) { + translatedKey = translatedKey.replace(/-([a-z])/g, (result) => { + return result[1].toUpperCase(); + }); + } - if (translatedValue === 'true') { - return true; - } + if (translatedKey.search(/^[a-zA-Z_]+-[0-9]/) !== -1) { + translatedKey = `${prefix}${translatedKey.replace('-', '')}`; + } - if (translatedValue === 'false') { - return false; - } + return translatedKey; +} - if (typeof translatedValue !== 'string') { - return translatedValue; - } +function translateValues(content) { + let translatedValue = content; - if (content.search(/^-?[0-9]*(\.[0-9]+)?px$/) !== -1) { - translatedValue = content.replace('px', ''); + if (translatedValue === 'transparent') { + return 'rgba(0,0,0,0)'; + } - return parseInt(translatedValue); - } + if (translatedValue === 'true') { + return true; + } - if (content.search(/^-?[0-9]*(\.[0-9]+)?rem$/) !== -1) { - translatedValue = content.replace('rem', ''); + if (translatedValue === 'false') { + return false; + } - translatedValue = parseFloat(translatedValue) * 16; + if (typeof translatedValue !== 'string') { + return translatedValue; + } - return Math.round(translatedValue); - } + if (content.search(/^-?[0-9]*(\.[0-9]+)?px$/) !== -1) { + translatedValue = content.replace('px', ''); - if (content.search(/^-?[0-9]*(\.[0-9]+)?em$/) !== -1) { - translatedValue = content.replace('em', ''); + return parseInt(translatedValue); + } - translatedValue = parseFloat(translatedValue) * 16; + if (content.search(/^-?[0-9]*(\.[0-9]+)?rem$/) !== -1) { + translatedValue = content.replace('rem', ''); - return Math.round(translatedValue); - } + translatedValue = parseFloat(translatedValue) * 16; - if (content.search(/^-?[0-9]+$/) !== -1) { - return parseInt(translatedValue); - } + return Math.round(translatedValue); + } - if (content.search(/-?\.[0-9]+$/) !== -1) { - return parseFloat(translatedValue); - } + if (content.search(/^-?[0-9]*(\.[0-9]+)?em$/) !== -1) { + translatedValue = content.replace('em', ''); - return translatedValue; - }, - - getShadowValues(content) { - let results, color, elevation; - - if (content === 'none' || content.search(/inset/) !== -1) { - return { - color: 'rgba(0, 0, 0, 0)', - offset: {width: 0, height: 0}, - radius: 0, - opacity: 0, - elevation: 0, - }; - } + translatedValue = parseFloat(translatedValue) * 16; - results = content.match(/^([0-9]+)p?x?\s([0-9]+)p?x?\s([0-9]+)p?x?\s(-?[0-9]+)?p?x?\s?(rgba?\(.+?\))?(#[a-zA-Z0-9]{3,8})?/); + return Math.round(translatedValue); + } - elevation = content.match(/,(?:\s+)?(-?[0-9]+)$/); + if (content.search(/^-?[0-9]+$/) !== -1) { + return parseInt(translatedValue); + } - color = results[5]; + if (content.search(/-?\.[0-9]+$/) !== -1) { + return parseFloat(translatedValue); + } - elevation = elevation ? this.translateValues(elevation[1]) : this.translateValues(results[3]) / 2; + return translatedValue; +} - if (typeof color === 'undefined') { - color = results[6]; - } +function getShadowValues(content) { + let results, color, elevation; + if (content === 'none' || content.search(/inset/) !== -1) { return { - color: color, - offset: { - width: this.translateValues(results[1]), - height: this.translateValues(results[2]), - }, - radius: this.translateValues(results[3]), - opacity: 1, - elevation: elevation, + color: 'rgba(0, 0, 0, 0)', + offset: {width: 0, height: 0}, + radius: 0, + opacity: 0, + elevation: 0, }; - }, + } - parseThemeValues(values) { - if (typeof values === 'object' && !Array.isArray(values)) { - return this.toArray(values); - } + results = content.match(/^([0-9]+)p?x?\s([0-9]+)p?x?\s([0-9]+)p?x?\s(-?[0-9]+)?p?x?\s?(rgba?\(.+?\))?(#[a-zA-Z0-9]{3,8})?/); - return values; - }, + elevation = content.match(/,(?:\s+)?(-?[0-9]+)$/); - toArray(object) { - return Object.keys(object).map(value => { - return [value, object[value]]; - }); - }, -}; + color = results[5]; + + elevation = elevation ? translateValues(elevation[1]) : translateValues(results[3]) / 2; + + if (typeof color === 'undefined') { + color = results[6]; + } + + return { + color: color, + offset: { + width: translateValues(results[1]), + height: translateValues(results[2]), + }, + radius: translateValues(results[3]), + opacity: 1, + elevation: elevation, + }; +} + +function parseThemeValues(values) { + if (typeof values === 'object' && !Array.isArray(values)) { + return toArray(values); + } + + return values; +} + +function toArray(object) { + return Object.keys(object).map(value => { + return [value, object[value]]; + }); +} + +export default { + generate, + generateShadows, + generateColors, + getValue, + getValueName, + getKeyName, + keyHandler, + guardAgainstCssNotSupportedInReactNative, + guardedKeyHandler, + translateKeys, + translateValues, + getShadowValues, + parseThemeValues, + toArray +}