react-tailwindcss-style 1.0.1

package/.github/workflows/node.js.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm i
+    - run: npm test

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "arrowParens": "avoid"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Elias Gao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# react-tailwindcss-style [![npm](https://img.shields.io/npm/dt/react-tailwindcss-style.svg)](https://www.npmjs.com/package/react-tailwindcss-style)
+## A react-native styling system, based on [TailwindCSS](https://tailwindcss.com/docs/what-is-tailwind/)
+Easily apply styles to react native components in a <a href='https://tailwindcss.com/docs/what-is-tailwind/'>tailwindCSS</a>-like fashion.
+The utility classes are transformed to valid object names and are all children of an object ( `t`, `tw`, `theme` or `tailwind`).
+
+```jsx harmony
+import { t } from 'react-tailwindcss-style';
+
+<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} />
+```
+
+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.
+The `color` object contains all your defined colors.
+
+```jsx harmony
+import { color } from 'react-tailwindcss-style';
+
+<StatusBar backgroundColor={color.blue500} />
+```
+
+React native has no default css styling so there are some *special cases*.
+Some elements like breakpoints, plugins, corePlugin disabling, prefixes, separators, variation and the important toggle are not necessary and are ignored.
+
+You should also take a look at some special cases:
+ - [separator handling (`-m-5` and `w-1/5`)](#general-conventions)
+ - [shadows](#shadows)
+ - [directional layout](#directional-layout)
+ - [more details](https://tvke.github.io/react-tailwindcss-style/special-cases.html)
+
+## Usage
+Install this package
+
+```
+# Using npm
+npm install react-tailwindcss-style
+
+# Using Yarn
+yarn add react-tailwindcss-style
+```
+
+
+Then initialize a new tailwindCSS config file
+
+```
+npx RNtailwindcss
+```
+
+or use an existing one.
+
+## Usage with `styled-components`
+
+`react-tailwindcss-style` plays nicely with the popular [`styled-components` library](https://styled-components.com/docs/basics#react-native).
+
+Simply use the array syntax within the interpolated template literal:
+
+```jsx harmony
+import { Text, View } from 'react-native';
+import { t } from 'react-tailwindcss-style';
+import styled from 'styled-components/native';
+
+const SView = styled(View)`
+  ${[t.mB4, t.bgGray200, t.rounded, t.p3]}
+`;
+
+<SView>
+  <Text>Some unstyled text in a styled view</Text>
+</SView>
+```
+
+## General Conventions
+
+Every 'class' uses the *camelCase* naming convention instead of tailwindCSS's *kebab-case*.
+```
+border-t-2 => t.borderT2
+```
+
+A `-` in the beginning of a 'class' becomes a `_`.
+```
+-mt-2 => t._mT2
+```
+
+A `/` also becomes a `_` to separate the numbers.
+```
+w-1/3 => t.w1_3
+```
+
+ - [more information in the docs](https://tvke.github.io/react-tailwindcss-style/translations.html)
+
+## Special cases
+
+### Shadows
+
+ - Android does not use the shadow props to cast shadows, just an `elevation` value.
+    - The `elevation` value is by default the `shadowRadius / 2`
+    - It can be changed by adding the `elevation` value after the shadow separated by a `,`. <br>
+        (eg.: `default: '0 1px 3px 0 rgba(0, 0, 0, .1), 5'`)
+
+ - Text shadows use the same shadows as box shadows
+ - Multiple shadows are not supported in React native. (the first shadow will be used)
+ - `inner` and `outline` shadows are ignored
+
+### Directional Layout
+
+When you need directional layout, React Native offers some variations to make life easier.
+Instead of using 'left' or 'right', 'start' and 'end' can be used.
+
+`react-tailwindcss-style` offers classes to embrace this way of directional layout.
+Every 'class' with `L` or `R`, also has a corresponding `S` and `E` 'class' for start and end.
+
+## Testing
+
+```
+npm run test
+```

package/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                targets: {
+                    node: 'current',
+                },
+            },
+        ],
+    ],
+};

package/cli.sh

@@ -0,0 +1 @@
+cp ../react-tailwindcss-style/stubs/defaultConfig.stub.js tailwind.config.js

package/color.js

@@ -0,0 +1,10 @@
+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;

package/corePlugins/alignContent.js

@@ -0,0 +1,10 @@
+import generator from '../util/generator';
+
+export default generator.generate('content', 'alignContent', [
+    ['start', 'flex-start'],
+    ['end', 'flex-end'],
+    'center',
+    'stretch',
+    ['between', 'space-between'],
+    ['around', 'space-around'],
+]);

package/corePlugins/alignItems.js

@@ -0,0 +1,9 @@
+import generator from '../util/generator';
+
+export default generator.generate('items', 'alignItems', [
+    ['start', 'flex-start'],
+    ['end', 'flex-end'],
+    'center',
+    'stretch',
+    'baseline',
+]);

package/corePlugins/alignSelf.js

@@ -0,0 +1,10 @@
+import generator from '../util/generator';
+
+export default generator.generate('self', 'alignSelf', [
+    'auto',
+    ['start', 'flex-start'],
+    ['end', 'flex-end'],
+    'center',
+    'stretch',
+    'baseline',
+]);

package/corePlugins/backfaceVisibility.js

@@ -0,0 +1,6 @@
+import generator from '../util/generator';
+
+export default generator.generate('backface', 'backfaceVisibility', [
+    'visible',
+    'hidden',
+]);

package/corePlugins/backgroundColor.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import colors from '../color';
+
+export default generator.generate('bg', 'backgroundColor', colors);

package/corePlugins/borderColor.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import colors from '../color';
+
+export default generator.generate('border', 'borderColor', colors);

package/corePlugins/borderRadius.js

@@ -0,0 +1,19 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('rounded', 'borderRadius', theme.borderRadius, [
+    ['t', ['borderTopLeftRadius', 'borderTopRightRadius']],
+    ['r', ['borderTopRightRadius', 'borderBottomRightRadius']],
+    ['b', ['borderBottomLeftRadius', 'borderBottomRightRadius']],
+    ['l', ['borderTopLeftRadius', 'borderBottomLeftRadius']],
+    ['tl', 'borderTopLeftRadius'],
+    ['tr', 'borderTopRightRadius'],
+    ['br', 'borderBottomRightRadius'],
+    ['bl', 'borderBottomLeftRadius'],
+    ['e', ['borderTopEndRadius', 'borderBottomEndRadius']],
+    ['s', ['borderTopStartRadius', 'borderBottomStartRadius']],
+    ['ts', 'borderTopStartRadius'],
+    ['te', 'borderTopEndRadius'],
+    ['be', 'borderBottomEndRadius'],
+    ['bs', 'borderBottomStartRadius'],
+]);

package/corePlugins/borderRadiusDir.js

@@ -0,0 +1,11 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('rounded-dir', 'borderRadius', theme.borderRadius, [
+    ['e', ['borderTopEndRadius', 'borderBottomEndRadius']],
+    ['s', ['borderTopStartRadius', 'borderBottomStartRadius']],
+    ['ts', 'borderTopStartRadius'],
+    ['te', 'borderTopEndRadius'],
+    ['be', 'borderBottomEndRadius'],
+    ['bs', 'borderBottomStartRadius'],
+]);

package/corePlugins/borderStyle.js

@@ -0,0 +1,7 @@
+import generator from '../util/generator';
+
+export default generator.generate('border', 'borderStyle', [
+    'solid',
+    'dotted',
+    'dashed',
+]);

package/corePlugins/borderWidth.js

@@ -0,0 +1,13 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('border', 'borderWidth', theme.borderWidth, [
+    ['x', ['borderRightWidth', 'borderLeftWidth']],
+    ['y', ['borderTopWidth', 'borderBottomWidth']],
+    ['t', 'borderTopWidth'],
+    ['r', 'borderRightWidth'],
+    ['b', 'borderBottomWidth'],
+    ['l', 'borderLeftWidth'],
+    ['e', 'borderEndWidth'],
+    ['s', 'borderStartWidth'],
+]);

package/corePlugins/borderWidthDir.js

@@ -0,0 +1,8 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('border-dir', 'borderWidth', theme.borderWidth, [
+    ['x', ['borderEndWidth', 'borderStartWidth']],
+    ['e', 'borderEndWidth'],
+    ['s', 'borderStartWidth'],
+]);

package/corePlugins/bottom.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('bottom', 'bottom', theme.inset);

package/corePlugins/boxShadow.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generateShadows('shadow', 'shadow', theme.boxShadow);

package/corePlugins/direction.js

@@ -0,0 +1,7 @@
+import generator from '../util/generator';
+
+export default generator.generate('direction', 'direction', [
+    'inherit',
+    'ltr',
+    'rtl',
+]);

package/corePlugins/display.js

@@ -0,0 +1,6 @@
+import generator from '../util/generator';
+
+export default generator.generate('', 'display', [
+    ['hidden', 'none'],
+    'flex',
+]);

package/corePlugins/end.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('end', 'end', theme.inset);

package/corePlugins/flex.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('flex', 'flex', theme.flex);

package/corePlugins/flexDirection.js

@@ -0,0 +1,8 @@
+import generator from '../util/generator';
+
+export default generator.generate('flex', 'flexDirection', [
+    'row',
+    'row-reverse',
+    ['col', 'column'],
+    ['col-reverse', 'column-reverse'],
+]);

package/corePlugins/flexGrow.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('flex-grow', 'flexGrow', theme.flexGrow);

package/corePlugins/flexShrink.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('flex-shrink', 'flexShrink', theme.flexShrink);

package/corePlugins/flexWrap.js

@@ -0,0 +1,7 @@
+import generator from '../util/generator';
+
+export default generator.generate('flex', 'flexWrap', [
+    'wrap',
+    'wrap-reverse',
+    ['no-wrap', 'nowrap'],
+]);

package/corePlugins/fontFamily.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('font', 'fontFamily', theme.fontFamily);

package/corePlugins/fontPadding.js

@@ -0,0 +1,6 @@
+import generator from '../util/generator';
+
+export default generator.generate('fontPadding', 'includeFontPadding', [
+    ['default', 'true'],
+    'false',
+]);

package/corePlugins/fontSize.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('text', 'fontSize', theme.fontSize);

package/corePlugins/fontStyle.js

@@ -0,0 +1,6 @@
+import generator from '../util/generator';
+
+export default generator.generate('', 'fontStyle', [
+    ['not-italic', 'normal'],
+    'italic',
+]);

package/corePlugins/fontWeight.js

@@ -0,0 +1,13 @@
+import generator from '../util/generator';
+
+export default generator.generate('font', 'fontWeight', [
+    'normal',
+    'bold',
+    ['hairline', 100],
+    ['thin', 200],
+    ['light', 300],
+    ['medium', 500],
+    ['semibold', 600],
+    ['extrabold', 800],
+    ['black', 900],
+]);

package/corePlugins/height.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('h', 'height', theme.height);

package/corePlugins/inset.js

@@ -0,0 +1,7 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('inset', ['top', 'bottom', 'left', 'right'], theme.inset, [
+    ['x', ['left', 'right']],
+    ['y', ['top', 'bottom']],
+]);

package/corePlugins/insetDir.js

@@ -0,0 +1,6 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('inset-dir', ['top', 'bottom', 'start', 'end'], theme.inset, [
+    ['x', ['start', 'end']],
+]);

package/corePlugins/justifyContent.js

@@ -0,0 +1,10 @@
+import generator from '../util/generator';
+
+export default generator.generate('justify', 'justifyContent', [
+    ['start', 'flex-start'],
+    ['end', 'flex-end'],
+    'center',
+    ['between', 'space-between'],
+    ['around', 'space-around'],
+    ['evenly', 'space-evenly'],
+]);

package/corePlugins/left.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('left', 'left', theme.inset);

package/corePlugins/letterSpacing.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('tracking', 'letterSpacing', theme.letterSpacing);

package/corePlugins/lineHeight.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('leading', 'lineHeight', theme.lineHeight);

package/corePlugins/margin.js

@@ -0,0 +1,13 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('m', 'margin', theme.margin, [
+    ['x', 'marginHorizontal'],
+    ['y', 'marginVertical'],
+    ['t', 'marginTop'],
+    ['r', 'marginRight'],
+    ['b', 'marginBottom'],
+    ['l', 'marginLeft'],
+    ['s', 'marginStart'],
+    ['e', 'marginEnd'],
+]);

package/corePlugins/maxHeight.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('max-h', 'maxHeight', theme.maxHeight);

package/corePlugins/maxWidth.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('max-w', 'maxWidth', theme.maxWidth);

package/corePlugins/minHeight.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('min-h', 'minHeight', theme.minHeight);

package/corePlugins/minWidth.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('min-w', 'minWidth', theme.minWidth);

package/corePlugins/objectFit.js

@@ -0,0 +1,8 @@
+import generator from '../util/generator';
+
+export default generator.generate('object', 'resizeMode', ['contain',
+    'cover',
+    'stretch',
+    'center',
+    'repeat',
+]);

package/corePlugins/opacity.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('opacity', 'opacity', theme.opacity);

package/corePlugins/overflow.js

@@ -0,0 +1,7 @@
+import generator from '../util/generator';
+
+export default generator.generate('overflow', 'overflow', [
+    'visible',
+    'hidden',
+    'scroll'
+]);

package/corePlugins/padding.js

@@ -0,0 +1,13 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('p', 'padding', theme.padding, [
+    ['x', 'paddingHorizontal'],
+    ['y', 'paddingVertical'],
+    ['t', 'paddingTop'],
+    ['r', 'paddingRight'],
+    ['b', 'paddingBottom'],
+    ['l', 'paddingLeft'],
+    ['s', 'paddingStart'],
+    ['e', 'paddingEnd'],
+]);

package/corePlugins/position.js

@@ -0,0 +1,6 @@
+import generator from '../util/generator';
+
+export default generator.generate('', 'position', [
+    'absolute',
+    'relative',
+]);

package/corePlugins/resize.js

@@ -0,0 +1,9 @@
+import generator from '../util/generator';
+
+export default generator.generate('resize', 'resizeMode', [
+    'contain',
+    'cover',
+    'stretch',
+    'center',
+    'repeat',
+]);

package/corePlugins/right.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('right', 'right', theme.inset);

package/corePlugins/start.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generate('start', 'start', theme.inset);

package/corePlugins/textAlign.js

@@ -0,0 +1,9 @@
+import generator from '../util/generator';
+
+export default generator.generate('text', 'textAlign', [
+    'auto',
+    'left',
+    'right',
+    'center',
+    'justify',
+]);

package/corePlugins/textColor.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import colors from '../color';
+
+export default generator.generate('text', 'color', colors);

package/corePlugins/textDecoration.js

@@ -0,0 +1,8 @@
+import generator from '../util/generator';
+
+export default generator.generate('', 'textDecorationLine', [
+    ['no-underline', 'none'],
+    'underline',
+    'line-through',
+    ['underline-line-through', 'underline line-through'],
+]);

package/corePlugins/textShadow.js

@@ -0,0 +1,4 @@
+import generator from '../util/generator';
+import theme from '../util/configHandler';
+
+export default generator.generateShadows('text-shadow', 'textShadow', theme.boxShadow);