Skip to content

Values parser #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 24, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
Converts CSS text to a React Native stylesheet object.

```css
font-size: 18;
line-height: 24;
font-size: 18px;
line-height: 24px;
color: red;
```

Expand All @@ -21,9 +21,9 @@ Converts all number-like values to numbers, and string-like to strings.
Automatically converts indirect values to their React Native equivalents.

```css
text-shadow-offset: 10 5;
text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10, 5) scale(5);
transform: translate(10px, 5px) scale(5);
```

```js
Expand All @@ -42,8 +42,8 @@ transform: translate(10, 5) scale(5);
Also allows shorthand values.

```css
font: bold 14/16 "Helvetica";
margin: 5 7 2;
font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;
```

```js
Expand All @@ -67,8 +67,6 @@ Shorthands will only accept values that are supported in React, so `background`

`border{Top,Right,Bottom,Left}` shorthands are not supported, because `borderStyle` cannot be applied to individual border sides.

`flex` does not support putting `flexBasis` before `flexGrow`. The supported syntax is `flex: <flex-grow> <flex-shrink> <flex-basis>`.

# API

The API is mostly for implementors. However, the main API may be useful for non-impmentors. The main API is,
Expand All @@ -78,9 +76,9 @@ import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;

transform([
['font', 'bold 14/16 "Helvetica"'],
['margin', '5 7 2'],
['border-left-width', '5'],
['font', 'bold 14px/16px "Helvetica"'],
['margin', '5px 7px 2px'],
['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }
```

Expand All @@ -90,16 +88,18 @@ For implementors, there is also,
import { getPropertyName, getStylesForProperty } from 'css-to-react-native';

getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1 0 2 0'); // => { borderTopWidth: 1, ... }
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }
```

Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to `transform`.

```js
transform([['border-radius', '50']], ['borderRadius']);
transform([['border-radius', '50px']], ['borderRadius']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }
```

This can also be done by passing a third argument, `false` to `getStylesForProperty`.

## License

Licensed under the MIT License, Copyright © 2016 Jacob Parker and Maximilian Stoiber.
Expand Down
11 changes: 7 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"description": "Convert CSS text to a React Native stylesheet object",
"main": "dist/index.js",
"scripts": {
"build-grammar": "nearleyc src/grammar.ne -o src/grammar.js",
"build": "npm run build-grammar; babel src --ignore test.js --out-dir dist",
"test": "npm run build-grammar; jest",
"build": "babel src --ignore test.js --out-dir dist",
"test": "jest",
"test:watch": "jest --watch",
"prepublish": "npm run build"
},
"repository": {
Expand Down Expand Up @@ -35,8 +35,11 @@
"jest": "^17.0.0"
},
"dependencies": {
"css-color-keywords": "^1.0.0",
"css-color-list": "0.0.1",
"fbjs": "^0.8.5",
"nearley": "^2.7.7"
"nearley": "^2.7.7",
"postcss-value-parser": "^3.3.0",
"postcss-values-parser": "^1.0.1"
}
}
9 changes: 0 additions & 9 deletions pegjs.json

This file was deleted.

71 changes: 71 additions & 0 deletions src/TokenStream.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
module.exports = class TokenStream {
constructor(nodes, parent) {
this.nodes = nodes;
this.parent = parent;
this.lastFunction = null;
this.lastValue = null;
}

get node() {
return this.nodes[0];
}

hasTokens() {
return this.nodes.length > 0;
}

lookahead() {
return new TokenStream(this.nodes.slice(1), this.parent);
}

match(...tokenDescriptors) {
const node = this.node;

if (!node) return null;

/* eslint-disable no-restricted-syntax */
for (const tokenDescriptor of tokenDescriptors) {
const value = tokenDescriptor(node);

if (value !== null) {
this.nodes = this.nodes.slice(1);
this.lastFunction = null;
this.lastValue = value;
return value;
}
}
/* eslint-enable */

return null;
}

expect(...tokenDescriptors) {
const value = this.match(...tokenDescriptors);
if (value !== null) return value;
return this.throw();
}

matchFunction() {
const node = this.node;
if (node.type !== 'function') return null;
const value = new TokenStream(node.nodes, node);
this.nodes = this.nodes.slice(1);
this.lastFunction = value;
this.lastValue = null;
return value;
}

expectFunction() {
const value = this.matchFunction();
if (value !== null) return value;
return this.throw();
}

expectEmpty() {
if (this.hasTokens()) this.throw();
}

throw() {
throw new Error(`Unexpected token type: ${this.node.type}`);
}
};
196 changes: 0 additions & 196 deletions src/grammar.ne

This file was deleted.

Loading