Skip to content

Commit 79f52bf

Browse files
authored
Merge pull request #5 from kristerkari/feature/export-pseudo-selector
Add test case for using ICSS :export pseudo-selector
2 parents 414960a + 3cf31d7 commit 79f52bf

File tree

7 files changed

+92
-45
lines changed

7 files changed

+92
-45
lines changed

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@
5252
"react-test-renderer": "16.6.3",
5353
"sass-loader": "^7.1.0",
5454
"style-loader": "^0.23.1",
55-
"stylelint": "^9.8.0",
56-
"stylelint-config-react-native-css-modules": "^2.0.1",
57-
"stylelint-react-native": "^2.0.0",
55+
"stylelint": "^9.9.0",
56+
"stylelint-config-react-native-css-modules": "^2.1.0",
57+
"stylelint-react-native": "^2.0.1",
5858
"ts-loader": "^5.3.0",
5959
"typescript": "^3.1.6",
6060
"typescript-eslint-parser": "^21.0.2",

src/Buttons.scss

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
// Button Color
2-
$black: #7e7e7e !default;
3-
$pink: #e27b72 !default;
4-
$green: #1db6b8 !default;
5-
$orange: #e8950a !default;
6-
$red: #e63d00 !default;
7-
$dark: #505050 !default;
1+
@import "ButtonColors";
82

93
@mixin text($color) {
104
background-color: $color;
@@ -17,12 +11,17 @@ $dark: #505050 !default;
1711
background-color: lighten($color, 4%);
1812
}
1913

20-
.buttonsWrapper {
14+
.wrapper {
2115
flex: 1;
2216
flex-direction: row;
2317
flex-wrap: wrap;
2418
}
2519

20+
.color {
21+
width: 6px;
22+
height: 6px;
23+
}
24+
2625
.buttonWrapper {
2726
height: 32px;
2827
margin-bottom: 12px;
@@ -62,15 +61,6 @@ $dark: #505050 !default;
6261
color: #fff;
6362
}
6463

65-
$colors-map: (
66-
Green $green,
67-
Pink $pink,
68-
Orange $orange,
69-
Dark $dark,
70-
Red $red,
71-
Black $black
72-
);
73-
7464
@each $color in $colors-map {
7565
.button#{nth($color, 1)} {
7666
@extend .button;

src/Buttons.scss.d.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
export const buttonsWrapper: string;
1+
export const green: string;
2+
export const pink: string;
3+
export const orange: string;
4+
export const dark: string;
5+
export const red: string;
6+
export const black: string;
7+
export const wrapper: string;
8+
export const color: string;
29
export const buttonWrapper: string;
310
export const button: string;
411
export const buttonGreen: string;

src/Buttons.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import { Text, TouchableHighlight, View } from "react-native";
33
import styles from "./Buttons.scss";
44
import { FontAwesome } from "./FontAwesome";
55
import { titleCase } from "./utils/titleCase";
6+
import btnColors from "./_ButtonColors.scss";
67

78
const colors = ["green", "pink", "dark", "orange", "red", "black"];
89
const stylesIndexSignature: { [index: string]: string } = styles;
10+
const btnColorssIndexSignature: { [index: string]: string } = btnColors;
911

1012
const Button = (color: string, index: number) => {
1113
const button = "button" + titleCase(color);
@@ -26,6 +28,21 @@ const Button = (color: string, index: number) => {
2628
);
2729
};
2830

31+
const Color = (color: string, index: number) => {
32+
return (
33+
<View
34+
className={styles.color}
35+
style={{ backgroundColor: btnColorssIndexSignature[color] }}
36+
key={index}
37+
/>
38+
);
39+
};
40+
2941
export const Buttons = () => {
30-
return <View className={styles.buttonsWrapper}>{colors.map(Button)}</View>;
42+
return (
43+
<React.Fragment>
44+
<View className={styles.wrapper}>{colors.map(Button)}</View>
45+
<View className={styles.wrapper}>{colors.map(Color)}</View>
46+
</React.Fragment>
47+
);
3148
};

src/_ButtonColors.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Button Color
2+
$black: #7e7e7e !default;
3+
$pink: #e27b72 !default;
4+
$green: #1db6b8 !default;
5+
$orange: #e8950a !default;
6+
$red: #e63d00 !default;
7+
$dark: #505050 !default;
8+
9+
$colors-map: (
10+
Green $green,
11+
Pink $pink,
12+
Orange $orange,
13+
Dark $dark,
14+
Red $red,
15+
Black $black
16+
);
17+
18+
:export {
19+
green: $green;
20+
pink: $pink;
21+
orange: $orange;
22+
dark: $dark;
23+
red: $red;
24+
black: $black;
25+
}

src/_ButtonColors.scss.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const green: string;
2+
export const pink: string;
3+
export const orange: string;
4+
export const dark: string;
5+
export const red: string;
6+
export const black: string;

yarn.lock

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2712,9 +2712,9 @@ css-selector-tokenizer@^0.7.0:
27122712
regexpu-core "^1.0.0"
27132713

27142714
css-to-react-native-transform@^1.7.0:
2715-
version "1.7.1"
2716-
resolved "https://registry.yarnpkg.com/css-to-react-native-transform/-/css-to-react-native-transform-1.7.1.tgz#eb428cad0594ab94f91386f64912576c85d18825"
2717-
integrity sha512-SsLvX/nGe1F/4UTpZBzUm9sLj5JMcDTjf0r80sh+XmyPrVybRjurANjzi6mDD1/JYF21vdX1GbMBLXA3ctiSQg==
2715+
version "1.8.0"
2716+
resolved "https://registry.yarnpkg.com/css-to-react-native-transform/-/css-to-react-native-transform-1.8.0.tgz#e3e5811f42e6caa6ef60aace0b71dce583fb8c15"
2717+
integrity sha512-1EVcu6txVHDyQ8ZTkOOjB1xyKH1Kt/e+5mUmHO6CwLKd8hysYYy5cPesxpv10xIOjx2ewew8tCd4fO4ESUtgvg==
27182718
dependencies:
27192719
css "^2.2.4"
27202720
css-mediaquery "^0.1.2"
@@ -5497,10 +5497,10 @@ kleur@^2.0.1:
54975497
resolved "https://registry.yarnpkg.com/kleur/-/kleur-2.0.2.tgz#b704f4944d95e255d038f0cb05fb8a602c55a300"
54985498
integrity sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ==
54995499

5500-
known-css-properties@^0.9.0:
5501-
version "0.9.0"
5502-
resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.9.0.tgz#28f8a7134cfa3b0aa08b1e5edf64a57f64fc23af"
5503-
integrity sha512-2G/A/8XPhH6MmuVgl079wYsgdqfXE3cfm62txk/ajS4wvRWo6tEHcgQCJCHOOy12Fse1Sxlbf7/IJBpR9hnVew==
5500+
known-css-properties@^0.10.0:
5501+
version "0.10.0"
5502+
resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.10.0.tgz#8378a8921e6c815ecc47095744a8900af63d577d"
5503+
integrity sha512-OMPb86bpVbnKN/2VJw1Ggs1Hw/FNGwEL1QYiNIEHaB5FSLybJ4QD7My5Hm9yDhgpRrRnnOgu0oKeuuABzASeBw==
55045504

55055505
lcid@^1.0.0:
55065506
version "1.0.0"
@@ -7006,10 +7006,10 @@ postcss-jsx@^0.35.0:
70067006
optionalDependencies:
70077007
postcss-styled ">=0.34.0"
70087008

7009-
postcss-less@^3.0.1:
7010-
version "3.0.2"
7011-
resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.0.2.tgz#9cf94e2cc90f8566858939e278fb9f0b713908df"
7012-
integrity sha512-+JBOampmDnuaf4w8OIEqkCiF+sOm/nWukDsC+1FTrYcIstptOISzGpYZk24Qh+Ewlmzmi53sRyiTbiGvMCDRwA==
7009+
postcss-less@^3.1.0:
7010+
version "3.1.0"
7011+
resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.0.tgz#0e14a80206b452f44d3a09d082fa72645e8168cc"
7012+
integrity sha512-+fDH2A9zV8B4gFu3Idhq8ma09/mMBXXc03T2lL9CHjBQqKrfUit+TrQrnojc6Y4k7N4E+tyE1Uj5U1tcoKtXLQ==
70137013
dependencies:
70147014
postcss "^7.0.3"
70157015

@@ -8647,20 +8647,22 @@ style-search@^0.1.0:
86478647
version "0.1.0"
86488648
resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
86498649

8650-
stylelint-config-react-native-css-modules@^2.0.1:
8651-
version "2.0.1"
8652-
resolved "https://registry.yarnpkg.com/stylelint-config-react-native-css-modules/-/stylelint-config-react-native-css-modules-2.0.1.tgz#94001c6c4317267b620d70f7bf50fcf04bfcfa65"
8650+
stylelint-config-react-native-css-modules@^2.1.0:
8651+
version "2.1.0"
8652+
resolved "https://registry.yarnpkg.com/stylelint-config-react-native-css-modules/-/stylelint-config-react-native-css-modules-2.1.0.tgz#362985dbc82954336f13961f112387e8bb83614e"
8653+
integrity sha512-UKO56zOzlLZHiaa99YxMiI/P9o/Nqy+zyhWmtMHwzwk7+KaINshrALpIX5UcnutPstaG8B64ZUhSBqvECpXtjA==
86538654

8654-
stylelint-react-native@^2.0.0:
8655-
version "2.0.0"
8656-
resolved "https://registry.yarnpkg.com/stylelint-react-native/-/stylelint-react-native-2.0.0.tgz#2477b295da0a488a2597207297b76b09d0ec9589"
8655+
stylelint-react-native@^2.0.1:
8656+
version "2.0.1"
8657+
resolved "https://registry.yarnpkg.com/stylelint-react-native/-/stylelint-react-native-2.0.1.tgz#a3f9ec2ad8f84acce344de85c15601cca4c6f9c8"
8658+
integrity sha512-DYReEaPFjlITxP3GIpbWF5ioFomF/EEPcCU82uZCdxSFQPlaI4wDg40zL/MB4YtSId5IoLNZA5K1ztDZwlOY0A==
86578659
dependencies:
86588660
react-native-known-styling-properties "^1.0.4"
86598661

8660-
stylelint@^9.8.0:
8661-
version "9.8.0"
8662-
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.8.0.tgz#bfdade6360d82afe820d6b15251b01acf8ffd04d"
8663-
integrity sha512-qYYgP9UnZ6S4uaXrfEGPIMeNv21gP4t3E7BtnYfJIiHKvz7AbrCP0vj1wPgD6OFyxLT5txQxtoznfSkm2vsUkQ==
8662+
stylelint@^9.9.0:
8663+
version "9.9.0"
8664+
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.9.0.tgz#dde466e9b049e0bd30e912ad280f1a2ecf6efdf8"
8665+
integrity sha512-kIuX0/9/I2mZeHz6EoFt7UpLt7Mz+ic9/PmFwKMdq4BkQHikg3FkcgAElLdAmaI8Au1JEUOS996ZFE+mwXytmA==
86648666
dependencies:
86658667
autoprefixer "^9.0.0"
86668668
balanced-match "^1.0.0"
@@ -8677,7 +8679,7 @@ stylelint@^9.8.0:
86778679
ignore "^5.0.4"
86788680
import-lazy "^3.1.0"
86798681
imurmurhash "^0.1.4"
8680-
known-css-properties "^0.9.0"
8682+
known-css-properties "^0.10.0"
86818683
leven "^2.1.0"
86828684
lodash "^4.17.4"
86838685
log-symbols "^2.0.0"
@@ -8689,7 +8691,7 @@ stylelint@^9.8.0:
86898691
postcss "^7.0.0"
86908692
postcss-html "^0.34.0"
86918693
postcss-jsx "^0.35.0"
8692-
postcss-less "^3.0.1"
8694+
postcss-less "^3.1.0"
86938695
postcss-markdown "^0.34.0"
86948696
postcss-media-query-parser "^0.2.3"
86958697
postcss-reporter "^6.0.0"

0 commit comments

Comments
 (0)