Merge pull request #5 from kristerkari/feature/export-pseudo-selector

Add test case for using ICSS :export pseudo-selector

Author: kristerkari

package.json

@@ -52,9 +52,9 @@
     "react-test-renderer": "16.6.3",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "stylelint": "^9.8.0",
-    "stylelint-config-react-native-css-modules": "^2.0.1",
-    "stylelint-react-native": "^2.0.0",
+    "stylelint": "^9.9.0",
+    "stylelint-config-react-native-css-modules": "^2.1.0",
+    "stylelint-react-native": "^2.0.1",
     "ts-loader": "^5.3.0",
     "typescript": "^3.1.6",
     "typescript-eslint-parser": "^21.0.2",

src/Buttons.scss

@@ -1,10 +1,4 @@
-// Button Color
-$black: #7e7e7e !default;
-$pink: #e27b72 !default;
-$green: #1db6b8 !default;
-$orange: #e8950a !default;
-$red: #e63d00 !default;
-$dark: #505050 !default;
+@import "ButtonColors";
 
 @mixin text($color) {
   background-color: $color;
@@ -17,12 +11,17 @@ $dark: #505050 !default;
   background-color: lighten($color, 4%);
 }
 
-.buttonsWrapper {
+.wrapper {
   flex: 1;
   flex-direction: row;
   flex-wrap: wrap;
 }
 
+.color {
+  width: 6px;
+  height: 6px;
+}
+
 .buttonWrapper {
   height: 32px;
   margin-bottom: 12px;
@@ -62,15 +61,6 @@ $dark: #505050 !default;
   color: #fff;
 }
 
-$colors-map: (
-  Green $green,
-  Pink $pink,
-  Orange $orange,
-  Dark $dark,
-  Red $red,
-  Black $black
-);
-
 @each $color in $colors-map {
   .button#{nth($color, 1)} {
     @extend .button;

src/Buttons.scss.d.ts

@@ -1,4 +1,11 @@
-export const buttonsWrapper: string;
+export const green: string;
+export const pink: string;
+export const orange: string;
+export const dark: string;
+export const red: string;
+export const black: string;
+export const wrapper: string;
+export const color: string;
 export const buttonWrapper: string;
 export const button: string;
 export const buttonGreen: string;

src/Buttons.tsx

@@ -3,9 +3,11 @@ import { Text, TouchableHighlight, View } from "react-native";
 import styles from "./Buttons.scss";
 import { FontAwesome } from "./FontAwesome";
 import { titleCase } from "./utils/titleCase";
+import btnColors from "./_ButtonColors.scss";
 
 const colors = ["green", "pink", "dark", "orange", "red", "black"];
 const stylesIndexSignature: { [index: string]: string } = styles;
+const btnColorssIndexSignature: { [index: string]: string } = btnColors;
 
 const Button = (color: string, index: number) => {
   const button = "button" + titleCase(color);
@@ -26,6 +28,21 @@ const Button = (color: string, index: number) => {
   );
 };
 
+const Color = (color: string, index: number) => {
+  return (
+    <View
+      className={styles.color}
+      style={{ backgroundColor: btnColorssIndexSignature[color] }}
+      key={index}
+    />
+  );
+};
+
 export const Buttons = () => {
-  return <View className={styles.buttonsWrapper}>{colors.map(Button)}</View>;
+  return (
+    <React.Fragment>
+      <View className={styles.wrapper}>{colors.map(Button)}</View>
+      <View className={styles.wrapper}>{colors.map(Color)}</View>
+    </React.Fragment>
+  );
 };

src/_ButtonColors.scss

@@ -0,0 +1,25 @@
+// Button Color
+$black: #7e7e7e !default;
+$pink: #e27b72 !default;
+$green: #1db6b8 !default;
+$orange: #e8950a !default;
+$red: #e63d00 !default;
+$dark: #505050 !default;
+
+$colors-map: (
+  Green $green,
+  Pink $pink,
+  Orange $orange,
+  Dark $dark,
+  Red $red,
+  Black $black
+);
+
+:export {
+  green: $green;
+  pink: $pink;
+  orange: $orange;
+  dark: $dark;
+  red: $red;
+  black: $black;
+}

src/_ButtonColors.scss.d.ts

@@ -0,0 +1,6 @@
+export const green: string;
+export const pink: string;
+export const orange: string;
+export const dark: string;
+export const red: string;
+export const black: string;

yarn.lock

@@ -2712,9 +2712,9 @@ css-selector-tokenizer@^0.7.0:
     regexpu-core "^1.0.0"
 
 css-to-react-native-transform@^1.7.0:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/css-to-react-native-transform/-/css-to-react-native-transform-1.7.1.tgz#eb428cad0594ab94f91386f64912576c85d18825"
-  integrity sha512-SsLvX/nGe1F/4UTpZBzUm9sLj5JMcDTjf0r80sh+XmyPrVybRjurANjzi6mDD1/JYF21vdX1GbMBLXA3ctiSQg==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native-transform/-/css-to-react-native-transform-1.8.0.tgz#e3e5811f42e6caa6ef60aace0b71dce583fb8c15"
+  integrity sha512-1EVcu6txVHDyQ8ZTkOOjB1xyKH1Kt/e+5mUmHO6CwLKd8hysYYy5cPesxpv10xIOjx2ewew8tCd4fO4ESUtgvg==
   dependencies:
     css "^2.2.4"
     css-mediaquery "^0.1.2"
@@ -5497,10 +5497,10 @@ kleur@^2.0.1:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-2.0.2.tgz#b704f4944d95e255d038f0cb05fb8a602c55a300"
   integrity sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ==
 
-known-css-properties@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.9.0.tgz#28f8a7134cfa3b0aa08b1e5edf64a57f64fc23af"
-  integrity sha512-2G/A/8XPhH6MmuVgl079wYsgdqfXE3cfm62txk/ajS4wvRWo6tEHcgQCJCHOOy12Fse1Sxlbf7/IJBpR9hnVew==
+known-css-properties@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.10.0.tgz#8378a8921e6c815ecc47095744a8900af63d577d"
+  integrity sha512-OMPb86bpVbnKN/2VJw1Ggs1Hw/FNGwEL1QYiNIEHaB5FSLybJ4QD7My5Hm9yDhgpRrRnnOgu0oKeuuABzASeBw==
 
 lcid@^1.0.0:
   version "1.0.0"
@@ -7006,10 +7006,10 @@ postcss-jsx@^0.35.0:
   optionalDependencies:
     postcss-styled ">=0.34.0"
 
-postcss-less@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.0.2.tgz#9cf94e2cc90f8566858939e278fb9f0b713908df"
-  integrity sha512-+JBOampmDnuaf4w8OIEqkCiF+sOm/nWukDsC+1FTrYcIstptOISzGpYZk24Qh+Ewlmzmi53sRyiTbiGvMCDRwA==
+postcss-less@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.0.tgz#0e14a80206b452f44d3a09d082fa72645e8168cc"
+  integrity sha512-+fDH2A9zV8B4gFu3Idhq8ma09/mMBXXc03T2lL9CHjBQqKrfUit+TrQrnojc6Y4k7N4E+tyE1Uj5U1tcoKtXLQ==
   dependencies:
     postcss "^7.0.3"
 
@@ -8647,20 +8647,22 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-stylelint-config-react-native-css-modules@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stylelint-config-react-native-css-modules/-/stylelint-config-react-native-css-modules-2.0.1.tgz#94001c6c4317267b620d70f7bf50fcf04bfcfa65"
+stylelint-config-react-native-css-modules@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-react-native-css-modules/-/stylelint-config-react-native-css-modules-2.1.0.tgz#362985dbc82954336f13961f112387e8bb83614e"
+  integrity sha512-UKO56zOzlLZHiaa99YxMiI/P9o/Nqy+zyhWmtMHwzwk7+KaINshrALpIX5UcnutPstaG8B64ZUhSBqvECpXtjA==
 
-stylelint-react-native@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-react-native/-/stylelint-react-native-2.0.0.tgz#2477b295da0a488a2597207297b76b09d0ec9589"
+stylelint-react-native@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-react-native/-/stylelint-react-native-2.0.1.tgz#a3f9ec2ad8f84acce344de85c15601cca4c6f9c8"
+  integrity sha512-DYReEaPFjlITxP3GIpbWF5ioFomF/EEPcCU82uZCdxSFQPlaI4wDg40zL/MB4YtSId5IoLNZA5K1ztDZwlOY0A==
   dependencies:
     react-native-known-styling-properties "^1.0.4"
 
-stylelint@^9.8.0:
-  version "9.8.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.8.0.tgz#bfdade6360d82afe820d6b15251b01acf8ffd04d"
-  integrity sha512-qYYgP9UnZ6S4uaXrfEGPIMeNv21gP4t3E7BtnYfJIiHKvz7AbrCP0vj1wPgD6OFyxLT5txQxtoznfSkm2vsUkQ==
+stylelint@^9.9.0:
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-9.9.0.tgz#dde466e9b049e0bd30e912ad280f1a2ecf6efdf8"
+  integrity sha512-kIuX0/9/I2mZeHz6EoFt7UpLt7Mz+ic9/PmFwKMdq4BkQHikg3FkcgAElLdAmaI8Au1JEUOS996ZFE+mwXytmA==
   dependencies:
     autoprefixer "^9.0.0"
     balanced-match "^1.0.0"
@@ -8677,7 +8679,7 @@ stylelint@^9.8.0:
     ignore "^5.0.4"
     import-lazy "^3.1.0"
     imurmurhash "^0.1.4"
-    known-css-properties "^0.9.0"
+    known-css-properties "^0.10.0"
     leven "^2.1.0"
     lodash "^4.17.4"
     log-symbols "^2.0.0"
@@ -8689,7 +8691,7 @@ stylelint@^9.8.0:
     postcss "^7.0.0"
     postcss-html "^0.34.0"
     postcss-jsx "^0.35.0"
-    postcss-less "^3.0.1"
+    postcss-less "^3.1.0"
     postcss-markdown "^0.34.0"
     postcss-media-query-parser "^0.2.3"
     postcss-reporter "^6.0.0"