Skip to content

Commit ddcd28c

Browse files
jean343jean343
authored
fix(css-props): Css prop (#46)
* Adding basic css prop tests * rename * up * up * up * import tests * Update README.md
1 parent 5ec5891 commit ddcd28c

File tree

9 files changed

+401
-95
lines changed

9 files changed

+401
-95
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ $ yarn add --dev babel-plugin-styless
2020
}
2121
```
2222

23+
Note that `styless` should appear before `babel-plugin-styled-components` if used.
24+
2325
## Key features
2426
- Simplifies the code
2527

@@ -71,6 +73,13 @@ $ yarn add --dev babel-plugin-styless
7173
`;
7274
```
7375

76+
- Supports css props, do not forget the semi-colon!
77+
```less
78+
<button css="color: @color;"/>
79+
<button css={`color: @color;`}/>
80+
<button css={css`color: @color;`}/>
81+
```
82+
7483
- Still supports the styled-components syntax for more complex jobs!
7584
```jsx
7685
`${props => props.main}`

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"license": "MIT",
1010
"scripts": {
1111
"test": "yarn run clean && yarn run build && jest",
12-
"watch": "jest --watch",
12+
"watch": "jest --watch --no-cache",
1313
"clean": "jest --clearCache",
1414
"build": "babel -d dist/ src/",
1515
"prepare": "yarn run build",
@@ -21,22 +21,23 @@
2121
"testURL": "http://localhost/"
2222
},
2323
"dependencies": {
24-
"@babel/generator": "^7.4.4",
24+
"@babel/generator": "^7.5.5",
2525
"find-babel-config": "^1.2.0",
2626
"less": "^3.9.0",
2727
"tinycolor2": "^1.4.1"
2828
},
2929
"devDependencies": {
30-
"@babel/cli": "^7.4.4",
31-
"@babel/preset-env": "^7.4.5",
30+
"@babel/cli": "^7.5.5",
31+
"@babel/preset-env": "^7.5.5",
3232
"@babel/preset-react": "^7.0.0",
3333
"@scoped/package": "link:./test/packages/scoped-package",
34+
"babel-plugin-styled-components": "^1.10.6",
3435
"jest": "^24.8.0",
3536
"jest-styled-components": "^6.3.3",
3637
"react": "^16.8.6",
3738
"react-dom": "^16.8.6",
3839
"react-test-renderer": "^16.8.6",
39-
"semantic-release": "^15.13.18",
40+
"semantic-release": "^15.13.19",
4041
"styled-components": "^4.3.2",
4142
"travis-deploy-once": "^5.0.11"
4243
}

‎src/visitors/taggedTemplateExpressionVisitor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import generate from '@babel/generator';
55
const regex = /`([\s\S]*)`/;
66

77
export default (path, state, {types: t}) => {
8-
if (!(isStyled(t)(path.node.tag, state) || isHelper(t)(path.node.tag, state) || isPureHelper(t)(path.node.tag || path.node.callee, state))) {
8+
if (!(isStyled(t)(path.node.tag, state) || isPureHelper(t)(path.node.tag || path.node.callee, state))) {
99
return;
1010
}
1111

‎test/Component/BabelPluginStyledComponents/.babelrc‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react"
5+
],
6+
"plugins": [
7+
[
8+
"../../../",
9+
{
10+
"import": "../base.less"
11+
}
12+
],
13+
"babel-plugin-styled-components"
14+
]
15+
}

‎test/Component/BabelPluginStyledComponents/StyledComponent.test.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import styled, {css} from "styled-components";
4+
import 'jest-styled-components';
5+
6+
test('Basic css prop', () => {
7+
// https://www.styled-components.com/docs/api#css-prop
8+
expect(renderer.create(<div
9+
css={`
10+
background: papayawhip;
11+
color: ${"green"};
12+
`}
13+
/>).toJSON()).toMatchSnapshot();
14+
expect(renderer.create(<button
15+
css="padding: 0.5em 1em;"
16+
/>).toJSON()).toMatchSnapshot();
17+
18+
expect(renderer.create(<div
19+
css={css`
20+
background: papayawhip;
21+
color: ${"green"};
22+
`}
23+
/>).toJSON()).toMatchSnapshot();
24+
expect(renderer.create(<button
25+
css={css`padding: 0.5em 1em;`}
26+
/>).toJSON()).toMatchSnapshot();
27+
});
28+
29+
test('Styless css prop', () => {
30+
// https://www.styled-components.com/docs/api#css-prop
31+
expect(renderer.create(<div
32+
css={`
33+
background: papayawhip;
34+
color1: @c;
35+
`}
36+
c="yellow"
37+
/>).toJSON()).toMatchSnapshot();
38+
expect(renderer.create(<button
39+
css="padding1: @p;"
40+
p="20px"
41+
/>).toJSON()).toMatchSnapshot();
42+
43+
expect(renderer.create(<div
44+
css={css`
45+
background: papayawhip;
46+
color2: @c;
47+
`}
48+
c="blue"
49+
/>).toJSON()).toMatchSnapshot();
50+
expect(renderer.create(<button
51+
css={css`padding2: @p;`}
52+
p="1px"
53+
/>).toJSON()).toMatchSnapshot();
54+
});
55+
56+
test('Styless css prop from import', () => {
57+
expect(renderer.create(<button css="color: @base-color;"/>).toJSON()).toMatchSnapshot();
58+
expect(renderer.create(<button css={`color: @base-color;`}/>).toJSON()).toMatchSnapshot();
59+
expect(renderer.create(<button css={css`color: @base-color;`}/>).toJSON()).toMatchSnapshot();
60+
});

‎test/Component/BabelPluginStyledComponents/__snapshots__/StyledComponent.test.js.snap‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Basic css prop 1`] = `
4+
.c0 {
5+
background: papayawhip;
6+
color: green;
7+
}
8+
9+
<div
10+
className="c0"
11+
/>
12+
`;
13+
14+
exports[`Basic css prop 2`] = `
15+
.c0 {
16+
padding: 0.5em 1em;
17+
}
18+
19+
<button
20+
className="c0"
21+
/>
22+
`;
23+
24+
exports[`Basic css prop 3`] = `
25+
.c0 {
26+
background: papayawhip;
27+
color: green;
28+
}
29+
30+
<div
31+
className="c0"
32+
/>
33+
`;
34+
35+
exports[`Basic css prop 4`] = `
36+
.c0 {
37+
padding: 0.5em 1em;
38+
}
39+
40+
<button
41+
className="c0"
42+
/>
43+
`;
44+
45+
exports[`Styless css prop 1`] = `
46+
.c0 {
47+
background: papayawhip;
48+
color1: yellow;
49+
}
50+
51+
<div
52+
className="c0"
53+
/>
54+
`;
55+
56+
exports[`Styless css prop 2`] = `
57+
.c0 {
58+
padding1: 20px;
59+
}
60+
61+
<button
62+
className="c0"
63+
/>
64+
`;
65+
66+
exports[`Styless css prop 3`] = `
67+
.c0 {
68+
background: papayawhip;
69+
color2: blue;
70+
}
71+
72+
<div
73+
className="c0"
74+
/>
75+
`;
76+
77+
exports[`Styless css prop 4`] = `
78+
.c0 {
79+
padding2: 1px;
80+
}
81+
82+
<button
83+
className="c0"
84+
/>
85+
`;
86+
87+
exports[`Styless css prop from import 1`] = `
88+
.c0 {
89+
color: #b5483d;
90+
}
91+
92+
<button
93+
className="c0"
94+
/>
95+
`;
96+
97+
exports[`Styless css prop from import 2`] = `
98+
.c0 {
99+
color: #b5483d;
100+
}
101+
102+
<button
103+
className="c0"
104+
/>
105+
`;
106+
107+
exports[`Styless css prop from import 3`] = `
108+
.c0 {
109+
color: #b5483d;
110+
}
111+
112+
<button
113+
className="c0"
114+
/>
115+
`;

‎test/Component/Math.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ test('PI', () => {
146146
test('Returns the value of the first argument raised to the power of the second argument.', () => {
147147
const Div = styled.div`
148148
pow: pow(0cm, 0px);
149-
pow: pow(25, -2);
149+
pow: pow(25, -1);
150150
pow: pow(25, 0.5);
151151
pow: pow(-25, 0.5);
152152
pow: pow(-25%, -0.5);

‎test/Component/__snapshots__/Math.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ exports[`Returns the value of the first argument modulus second argument. 1`] =
213213
exports[`Returns the value of the first argument raised to the power of the second argument. 1`] = `
214214
.c0 {
215215
pow: 1cm;
216-
pow: 0.0016;
216+
pow: 0.04;
217217
pow: 5;
218218
pow: NaN;
219219
pow: NaN%;

0 commit comments

Comments
 (0)