Skip to content
This repository has been archived by the owner on May 16, 2022. It is now read-only.

Commit

Permalink
feat: support static expressions as arguments
Browse files Browse the repository at this point in the history 
styled now accepts simple statically-evaluted expressions e.g

```javascript
const buttonStyles = ['bg-white']
styled(buttonStyles)
```
  • Loading branch information
@z0al
z0al committed Nov 22, 2020
1 parent f7738af commit 79ab202
Show file tree
Hide file tree
Showing 90 changed files with 415 additions and 90 deletions.
1 change: 1 addition & 0 deletions babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['macros'],
};
21 changes: 11 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,40 +38,41 @@
"bootstrap": "yarn bootstrap:example && yarn"
},
"dependencies": {
"@babel/helper-module-imports": "^7.12.1",
"@babel/traverse": "^7.12.1",
"babel-object-to-ast": "^2.1.5",
"@babel/helper-module-imports": "^7.12.5",
"@babel/traverse": "^7.12.7",
"babel-helper-evaluate-path": "^0.5.0",
"babel-plugin-macros": "^2.8.0",
"dequal": "^2.0.2"
},
"devDependencies": {
"@babel/types": "^7.12.1",
"@babel/types": "^7.12.7",
"@react-native-community/bob": "^0.16.2",
"@react-native-community/eslint-config": "^2.0.0",
"@testing-library/jest-native": "^3.4.3",
"@testing-library/react-native": "^7.1.0",
"@types/babel-plugin-macros": "^2.8.3",
"@types/babel-plugin-macros": "^2.8.4",
"@types/babel-plugin-tester": "^9.0.1",
"@types/babel__core": "^7.1.12",
"@types/jest": "^26.0.14",
"@types/react": "^16.9.53",
"@types/react-native": "^0.63.25",
"babel-plugin-tester": "^10.0.0",
"camel-case": "^4.1.1",
"eslint": "^7.12.1",
"eslint": "^7.14.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"jest-expo": "^39.0.0",
"json.macro": "^1.3.0",
"prettier": "^2.1.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-native": "^0.63.3",
"react-native-web": "^0.14.7",
"react-native-web": "^0.14.8",
"react-test-renderer": "^17.0.1",
"semantic-release": "^17.2.1",
"semantic-release": "^17.2.4",
"ts-node": "^9.0.0",
"type-fest": "^0.18.0",
"typescript": "^4.0.5"
"type-fest": "^0.19.0",
"typescript": "^4.1.2"
},
"peerDependencies": {
"react": ">=16.11.0",
Expand Down
52 changes: 46 additions & 6 deletions .../__snapshots__/macro.test.ts.snap.android → ..._snapshots__/samples.test.ts.snap.android
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`babel-plugin-macros 1. babel-plugin-macros: 1. babel-plugin-macros 1`]

import React from 'react'
import { View } from 'react-native'
import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

const Button = ()=> <View {...styled(['bg-white', 'text-xl'])} />

Expand Down Expand Up @@ -36,7 +36,7 @@ const Button = () => (

exports[`babel-plugin-macros 2. babel-plugin-macros: 2. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

styled(['web:-m-2'], {dark: false})

Expand Down Expand Up @@ -69,7 +69,7 @@ _select(

exports[`babel-plugin-macros 3. babel-plugin-macros: 3. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

console.log(styled(['-m-2', 'p-4']))

Expand All @@ -95,7 +95,7 @@ console.log({

exports[`babel-plugin-macros 4. babel-plugin-macros: 4. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

console.log(styled([]))

Expand All @@ -109,7 +109,7 @@ console.log({});
exports[`babel-plugin-macros 5. babel-plugin-macros: 5. babel-plugin-macros 1`] = `

import { Text } from 'react-native'
import styled from '../../build/commonjs/macro.js';
import styled from '../../build/module/macro.js';

const Heading = ({ text }) => (
<Text
Expand Down Expand Up @@ -162,7 +162,7 @@ exports[`babel-plugin-macros 6. babel-plugin-macros: 6. babel-plugin-macros 1`]
import React from 'react';
import { Text, Pressable, SafeAreaView } from 'react-native';

import styled from '../../build/commonjs/macro.js';
import styled from '../../build/module/macro.js';

export default function App() {
const variants = useWindowVariant();
Expand Down Expand Up @@ -245,4 +245,44 @@ export default function App() {
}


`;

exports[`babel-plugin-macros 7. babel-plugin-macros: 7. babel-plugin-macros 1`] = `

import styled from '../../build/module/macro.js';

const bgWhite = 'bg-white'

const buttonStyle = [bgWhite, 'text-black']
const inputStyle = [bgWhite, 'text-black']

console.log(styled(buttonStyle))
console.log(styled(inputStyle))

↓ ↓ ↓ ↓ ↓ ↓

import { StyleSheet as _StyleSheet } from 'react-native';

const _styles = _StyleSheet.create({
_default: {
backgroundColor: 'white',
color: 'black',
},
_default2: {
backgroundColor: 'white',
color: 'black',
},
});

const bgWhite = 'bg-white';
const buttonStyle = [bgWhite, 'text-black'];
const inputStyle = [bgWhite, 'text-black'];
console.log({
style: _styles._default,
});
console.log({
style: _styles._default2,
});


`;
52 changes: 46 additions & 6 deletions ...ts__/__snapshots__/macro.test.ts.snap.ios → ...__/__snapshots__/samples.test.ts.snap.ios
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`babel-plugin-macros 1. babel-plugin-macros: 1. babel-plugin-macros 1`]

import React from 'react'
import { View } from 'react-native'
import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

const Button = ()=> <View {...styled(['bg-white', 'text-xl'])} />

Expand Down Expand Up @@ -36,7 +36,7 @@ const Button = () => (

exports[`babel-plugin-macros 2. babel-plugin-macros: 2. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

styled(['web:-m-2'], {dark: false})

Expand Down Expand Up @@ -69,7 +69,7 @@ _select(

exports[`babel-plugin-macros 3. babel-plugin-macros: 3. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

console.log(styled(['-m-2', 'p-4']))

Expand All @@ -95,7 +95,7 @@ console.log({

exports[`babel-plugin-macros 4. babel-plugin-macros: 4. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

console.log(styled([]))

Expand All @@ -109,7 +109,7 @@ console.log({});
exports[`babel-plugin-macros 5. babel-plugin-macros: 5. babel-plugin-macros 1`] = `

import { Text } from 'react-native'
import styled from '../../build/commonjs/macro.js';
import styled from '../../build/module/macro.js';

const Heading = ({ text }) => (
<Text
Expand Down Expand Up @@ -162,7 +162,7 @@ exports[`babel-plugin-macros 6. babel-plugin-macros: 6. babel-plugin-macros 1`]
import React from 'react';
import { Text, Pressable, SafeAreaView } from 'react-native';

import styled from '../../build/commonjs/macro.js';
import styled from '../../build/module/macro.js';

export default function App() {
const variants = useWindowVariant();
Expand Down Expand Up @@ -245,4 +245,44 @@ export default function App() {
}


`;

exports[`babel-plugin-macros 7. babel-plugin-macros: 7. babel-plugin-macros 1`] = `

import styled from '../../build/module/macro.js';

const bgWhite = 'bg-white'

const buttonStyle = [bgWhite, 'text-black']
const inputStyle = [bgWhite, 'text-black']

console.log(styled(buttonStyle))
console.log(styled(inputStyle))

↓ ↓ ↓ ↓ ↓ ↓

import { StyleSheet as _StyleSheet } from 'react-native';

const _styles = _StyleSheet.create({
_default: {
backgroundColor: 'white',
color: 'black',
},
_default2: {
backgroundColor: 'white',
color: 'black',
},
});

const bgWhite = 'bg-white';
const buttonStyle = [bgWhite, 'text-black'];
const inputStyle = [bgWhite, 'text-black'];
console.log({
style: _styles._default,
});
console.log({
style: _styles._default2,
});


`;
52 changes: 46 additions & 6 deletions ...s__/__snapshots__/macro.test.ts.snap.node → ..._/__snapshots__/samples.test.ts.snap.node
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`babel-plugin-macros 1. babel-plugin-macros: 1. babel-plugin-macros 1`]

import React from 'react'
import { View } from 'react-native'
import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

const Button = ()=> <View {...styled(['bg-white', 'text-xl'])} />

Expand Down Expand Up @@ -36,7 +36,7 @@ const Button = () => (

exports[`babel-plugin-macros 2. babel-plugin-macros: 2. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

styled(['web:-m-2'], {dark: false})

Expand Down Expand Up @@ -69,7 +69,7 @@ _select(

exports[`babel-plugin-macros 3. babel-plugin-macros: 3. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

console.log(styled(['-m-2', 'p-4']))

Expand All @@ -95,7 +95,7 @@ console.log({

exports[`babel-plugin-macros 4. babel-plugin-macros: 4. babel-plugin-macros 1`] = `

import styled from '../../build/commonjs/macro.js'
import styled from '../../build/module/macro.js'

console.log(styled([]))

Expand All @@ -109,7 +109,7 @@ console.log({});
exports[`babel-plugin-macros 5. babel-plugin-macros: 5. babel-plugin-macros 1`] = `

import { Text } from 'react-native'
import styled from '../../build/commonjs/macro.js';
import styled from '../../build/module/macro.js';

const Heading = ({ text }) => (
<Text
Expand Down Expand Up @@ -162,7 +162,7 @@ exports[`babel-plugin-macros 6. babel-plugin-macros: 6. babel-plugin-macros 1`]
import React from 'react';
import { Text, Pressable, SafeAreaView } from 'react-native';

import styled from '../../build/commonjs/macro.js';
import styled from '../../build/module/macro.js';

export default function App() {
const variants = useWindowVariant();
Expand Down Expand Up @@ -245,4 +245,44 @@ export default function App() {
}


`;

exports[`babel-plugin-macros 7. babel-plugin-macros: 7. babel-plugin-macros 1`] = `

import styled from '../../build/module/macro.js';

const bgWhite = 'bg-white'

const buttonStyle = [bgWhite, 'text-black']
const inputStyle = [bgWhite, 'text-black']

console.log(styled(buttonStyle))
console.log(styled(inputStyle))

↓ ↓ ↓ ↓ ↓ ↓

import { StyleSheet as _StyleSheet } from 'react-native';

const _styles = _StyleSheet.create({
_default: {
backgroundColor: 'white',
color: 'black',
},
_default2: {
backgroundColor: 'white',
color: 'black',
},
});

const bgWhite = 'bg-white';
const buttonStyle = [bgWhite, 'text-black'];
const inputStyle = [bgWhite, 'text-black'];
console.log({
style: _styles._default,
});
console.log({
style: _styles._default2,
});


`;
15 changes: 14 additions & 1 deletion src/__tests__/macro.test.ts → src/__tests__/samples.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// Packages
import * as path from 'path';
import plugin from 'babel-plugin-macros';
import pluginTester from 'babel-plugin-tester';
import { loadPackageJson } from 'json.macro';

const macroPath = '../../build/commonjs/macro.js';
const macroPath = path.join('..', '..', loadPackageJson().module);

pluginTester({
plugin,
Expand Down Expand Up @@ -83,5 +85,16 @@ pluginTester({
);
}
`,
`
import styled from '${macroPath}';
const bgWhite = 'bg-white'
const buttonStyle = [bgWhite, 'text-black']
const inputStyle = [bgWhite, 'text-black']
console.log(styled(buttonStyle))
console.log(styled(inputStyle))
`,
],
});

0 comments on commit 79ab202

Please sign in to comment.