combine all languages

6 files changed, 266 insertions, 0 deletions

diff --git a/examples/postcss/gulp/dest/main.css b/examples/postcss/gulp/dest/main.css
new file mode 100644
index 0000000..121ce9a
--- /dev/null
+++ b/examples/postcss/gulp/dest/main.css
@@ -0,0 +1,73 @@
+/* responsive-font-size property with `px` unit */
+.selector-1,
+.disable-responsive-font-size .selector-1,
+.disable-responsive-font-size.selector-1 {
+    background-color: red;
+    width: 300px;
+    font-size: 2rem;
+}
+@media (max-width: 1200px) {
+    .selector-1 {
+    font-size: calc(1.2rem + 1.066667vw);
+    }
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2,
+.disable-responsive-font-size.selector-2 {
+    font-size: 2rem;
+}
+@media (max-width: 1200px) {
+    .selector-2 {
+    font-size: calc(1.2rem + 1.066667vw);
+    }
+}
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3,
+.disable-responsive-font-size.selector-3 {
+    font-size: 2rem !important;
+}
+@media (max-width: 1200px) {
+    .selector-3 {
+    font-size: calc(1.2rem + 1.066667vw) !important;
+    }
+}
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4,
+.disable-responsive-font-size.selector-4 {
+    font-size: 2rem;
+}
+@media (max-width: 1200px) {
+    .selector-4 {
+    font-size: calc(1.2rem + 1.066667vw);
+    }
+}
+
+/* not supported unit */
+.selector-5 {
+    font-size: 2em;
+}
+
+/* special value */
+.selector-6 {
+    font-size: inherit;
+}
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+    .selector-7,
+.disable-responsive-font-size .selector-7,
+.disable-responsive-font-size.selector-7 {
+        font-size: 1.75rem;
+    }
+    @media (max-width: 1200px) {
+        .selector-7 {
+        font-size: calc(1.15rem + 0.8vw);
+        }
+    }
+}
diff --git a/examples/postcss/gulp/gulpfile.js b/examples/postcss/gulp/gulpfile.js
new file mode 100644
index 0000000..873a17d
--- /dev/null
+++ b/examples/postcss/gulp/gulpfile.js
@@ -0,0 +1,20 @@
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const rfs = require('../..');
+const options = {
+    twoDimensional: false,
+    minimumFontSize: 16,
+    fontSizeUnit: 'rem',
+    breakpoint: 1200,
+    breakpointUnit: 'px',
+    factor: 5,
+    unitPrecision: 6,
+    remValue: 16,
+    propList: ['responsive-font-size', 'rfs']
+};
+
+gulp.task('css', () => {
+    return gulp.src('./src/main.css')
+        .pipe(postcss([rfs(options)]))
+        .pipe(gulp.dest('./dest'));
+});
diff --git a/examples/postcss/gulp/src/main.css b/examples/postcss/gulp/src/main.css
new file mode 100644
index 0000000..ebc55d4
--- /dev/null
+++ b/examples/postcss/gulp/src/main.css
@@ -0,0 +1,38 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+    background-color: red;
+    width: 300px;
+    responsive-font-size: 32px;
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2 {
+    responsive-font-size: 2rem;
+}
+
+/* responsive-font-size property with !important */
+.selector-3 {
+    responsive-font-size: 2rem !important;
+}
+
+/* rfs shorthand */
+.selector-4 {
+    rfs: 2rem;
+}
+
+/* not supported unit */
+.selector-5 {
+    responsive-font-size: 2em;
+}
+
+/* special value */
+.selector-6 {
+    responsive-font-size: inherit;
+}
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+    .selector-7 {
+        rfs: 28px;
+    }
+}
diff --git a/examples/postcss/node/index.js b/examples/postcss/node/index.js
new file mode 100644
index 0000000..e0390b6
--- /dev/null
+++ b/examples/postcss/node/index.js
@@ -0,0 +1,24 @@
+const fs = require('fs');
+const postcss = require('postcss');
+const rfs = require('../..');
+const css = fs.readFileSync('main.css', 'utf8');
+const options = {
+    twoDimensional: false,
+    minimumFontSize: 16,
+    fontSizeUnit: 'rem',
+    // breakpoint: 1200,
+    breakpointUnit: 'px',
+    factor: 5,
+    unitPrecision: 6,
+    remValue: 16,
+    propList: ['responsive-font-size', 'rfs']
+};
+
+const processedCss = postcss(rfs(options)).process(css).css;
+
+fs.writeFile('main.dest.css', processedCss, (err) => {
+    if (err) {
+        throw err;
+    }
+    console.log('Responsive font sizes generated.');
+});
diff --git a/examples/postcss/node/main.css b/examples/postcss/node/main.css
new file mode 100644
index 0000000..ebc55d4
--- /dev/null
+++ b/examples/postcss/node/main.css
@@ -0,0 +1,38 @@
+/* responsive-font-size property with `px` unit */
+.selector-1 {
+    background-color: red;
+    width: 300px;
+    responsive-font-size: 32px;
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2 {
+    responsive-font-size: 2rem;
+}
+
+/* responsive-font-size property with !important */
+.selector-3 {
+    responsive-font-size: 2rem !important;
+}
+
+/* rfs shorthand */
+.selector-4 {
+    rfs: 2rem;
+}
+
+/* not supported unit */
+.selector-5 {
+    responsive-font-size: 2em;
+}
+
+/* special value */
+.selector-6 {
+    responsive-font-size: inherit;
+}
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+    .selector-7 {
+        rfs: 28px;
+    }
+}
diff --git a/examples/postcss/node/main.dest.css b/examples/postcss/node/main.dest.css
new file mode 100644
index 0000000..121ce9a
--- /dev/null
+++ b/examples/postcss/node/main.dest.css
@@ -0,0 +1,73 @@
+/* responsive-font-size property with `px` unit */
+.selector-1,
+.disable-responsive-font-size .selector-1,
+.disable-responsive-font-size.selector-1 {
+    background-color: red;
+    width: 300px;
+    font-size: 2rem;
+}
+@media (max-width: 1200px) {
+    .selector-1 {
+    font-size: calc(1.2rem + 1.066667vw);
+    }
+}
+
+/* responsive-font-size property with `rem` unit */
+.selector-2,
+.disable-responsive-font-size .selector-2,
+.disable-responsive-font-size.selector-2 {
+    font-size: 2rem;
+}
+@media (max-width: 1200px) {
+    .selector-2 {
+    font-size: calc(1.2rem + 1.066667vw);
+    }
+}
+
+/* responsive-font-size property with !important */
+.selector-3,
+.disable-responsive-font-size .selector-3,
+.disable-responsive-font-size.selector-3 {
+    font-size: 2rem !important;
+}
+@media (max-width: 1200px) {
+    .selector-3 {
+    font-size: calc(1.2rem + 1.066667vw) !important;
+    }
+}
+
+/* rfs shorthand */
+.selector-4,
+.disable-responsive-font-size .selector-4,
+.disable-responsive-font-size.selector-4 {
+    font-size: 2rem;
+}
+@media (max-width: 1200px) {
+    .selector-4 {
+    font-size: calc(1.2rem + 1.066667vw);
+    }
+}
+
+/* not supported unit */
+.selector-5 {
+    font-size: 2em;
+}
+
+/* special value */
+.selector-6 {
+    font-size: inherit;
+}
+
+/* responsive-font-size property inside @support-query */
+@supports (display: flex) {
+    .selector-7,
+.disable-responsive-font-size .selector-7,
+.disable-responsive-font-size.selector-7 {
+        font-size: 1.75rem;
+    }
+    @media (max-width: 1200px) {
+        .selector-7 {
+        font-size: calc(1.15rem + 0.8vw);
+        }
+    }
+}