Skip to content

Commit 2954d97

Browse files
mertasanmertasan
committed
PostCSS 7 compatibility
1 parent 0699dcd commit 2954d97

File tree

13 files changed

+335
-304
lines changed

13 files changed

+335
-304
lines changed

‎examples/dark-custom-selector/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
"build:clean": "env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css"
77
},
88
"devDependencies": {
9-
"tailwindcss": "^2.0.4",
10-
"@mertasan/tailwindcss-variables": "latest"
9+
"@mertasan/tailwindcss-variables": "latest",
10+
"autoprefixer": "^10.2.5",
11+
"postcss": "^8.2.13",
12+
"tailwindcss": "^2.1.2"
1113
},
1214
"license": "MIT"
1315
}

‎examples/dark-custom-selector/style.css‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com */
1+
/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */
22

3-
/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
3+
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
44

55
/*
66
Document
@@ -12,16 +12,16 @@ Use a better box model (opinionated).
1212
*/
1313

1414
*,
15-
*::before,
16-
*::after {
15+
::before,
16+
::after {
1717
box-sizing: border-box;
1818
}
1919

2020
/**
2121
Use a more readable tab size (opinionated).
2222
*/
2323

24-
:root {
24+
html {
2525
-moz-tab-size: 4;
2626
tab-size: 4;
2727
}
@@ -54,14 +54,16 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
5454
*/
5555

5656
body {
57-
font-family: system-ui,
58-
-apple-system, /* Firefox supports this but not yet `system-ui` */ 'Segoe UI',
59-
Roboto,
60-
Helvetica,
61-
Arial,
62-
sans-serif,
63-
'Apple Color Emoji',
64-
'Segoe UI Emoji';
57+
font-family:
58+
system-ui,
59+
-apple-system, /* Firefox supports this but not yet `system-ui` */
60+
'Segoe UI',
61+
Roboto,
62+
Helvetica,
63+
Arial,
64+
sans-serif,
65+
'Apple Color Emoji',
66+
'Segoe UI Emoji';
6567
}
6668

6769
/*
@@ -90,7 +92,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
9092

9193
abbr[title] {
9294
-webkit-text-decoration: underline dotted;
93-
text-decoration: underline dotted;
95+
text-decoration: underline dotted;
9496
}
9597

9698
/**
@@ -111,12 +113,13 @@ code,
111113
kbd,
112114
samp,
113115
pre {
114-
font-family: ui-monospace,
115-
SFMono-Regular,
116-
Consolas,
117-
'Liberation Mono',
118-
Menlo,
119-
monospace; /* 1 */
116+
font-family:
117+
ui-monospace,
118+
SFMono-Regular,
119+
Consolas,
120+
'Liberation Mono',
121+
Menlo,
122+
monospace; /* 1 */
120123
font-size: 1em; /* 2 */
121124
}
122125

@@ -490,7 +493,7 @@ object {
490493

491494
/**
492495
* Constrain images and videos to the parent width and preserve
493-
* their instrinsic aspect ratio.
496+
* their intrinsic aspect ratio.
494497
*
495498
* https://github.com/mozdevs/cssremedy/issues/14
496499
*/
@@ -501,6 +504,30 @@ video {
501504
height: auto;
502505
}
503506

507+
:root {
508+
--sizes-small: 1rem;
509+
--sizes-medium: 2rem;
510+
--sizes-large: 3rem;
511+
--colors-red-50: #ff3232;
512+
--colors-red-500: #ff0000;
513+
--colors-red-900: #d70000;
514+
}
515+
516+
.container {
517+
--sizes-medium: 1.5rem;
518+
--sizes-container: 2rem;
519+
}
520+
521+
:root.custom-dark-selector {
522+
--colors-red-50: #c665ff;
523+
--colors-red-500: #9433f1;
524+
--colors-red-900: #6c0bc9;
525+
}
526+
527+
:root.custom-dark-selector .container {
528+
--colors-red-50: #ff0000;
529+
}
530+
504531
.container {
505532
width: 100%;
506533
}
@@ -535,30 +562,6 @@ video {
535562
}
536563
}
537564

538-
:root {
539-
--sizes-small: 1rem;
540-
--sizes-medium: 2rem;
541-
--sizes-large: 3rem;
542-
--colors-red-50: #ff3232;
543-
--colors-red-500: #ff0000;
544-
--colors-red-900: #d70000;
545-
}
546-
547-
.container {
548-
--sizes-medium: 1.5rem;
549-
--sizes-container: 2rem;
550-
}
551-
552-
:root.custom-dark-selector {
553-
--colors-red-50: #c665ff;
554-
--colors-red-500: #9433f1;
555-
--colors-red-900: #6c0bc9;
556-
}
557-
558-
:root.custom-dark-selector .container {
559-
--colors-red-50: #ff0000;
560-
}
561-
562565
.bg-gray-50 {
563566
--tw-bg-opacity: 1;
564567
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
@@ -666,7 +669,7 @@ video {
666669
}
667670

668671
* {
669-
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
672+
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
670673
--tw-ring-offset-width: 0px;
671674
--tw-ring-offset-color: #fff;
672675
--tw-ring-color: rgba(59, 130, 246, 0.5);
@@ -719,12 +722,12 @@ video {
719722
@keyframes bounce {
720723
0%, 100% {
721724
transform: translateY(-25%);
722-
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
725+
animation-timing-function: cubic-bezier(0.8,0,1,1);
723726
}
724727

725728
50% {
726729
transform: none;
727-
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
730+
animation-timing-function: cubic-bezier(0,0,0.2,1);
728731
}
729732
}
730733

@@ -794,4 +797,4 @@ video {
794797
}
795798

796799
@media (min-width: 1536px) {
797-
}
800+
}

‎examples/dark-with-class-to-root/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
"build:clean": "env NODE_ENV=production CLEAN=true npx tailwindcss build ./tailwind.css -c ./tailwind.config.js -o ./clean.css"
77
},
88
"devDependencies": {
9-
"tailwindcss": "^2.0.4",
10-
"@mertasan/tailwindcss-variables": "latest"
9+
"@mertasan/tailwindcss-variables": "latest",
10+
"autoprefixer": "^10.2.5",
11+
"postcss": "^8.2.13",
12+
"tailwindcss": "^2.1.2"
1113
},
1214
"license": "MIT"
1315
}

‎examples/dark-with-class-to-root/style.css‎

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com */
1+
/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */
22

3-
/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
3+
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
44

55
/*
66
Document
@@ -12,16 +12,16 @@ Use a better box model (opinionated).
1212
*/
1313

1414
*,
15-
*::before,
16-
*::after {
15+
::before,
16+
::after {
1717
box-sizing: border-box;
1818
}
1919

2020
/**
2121
Use a more readable tab size (opinionated).
2222
*/
2323

24-
:root {
24+
html {
2525
-moz-tab-size: 4;
2626
tab-size: 4;
2727
}
@@ -54,14 +54,16 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
5454
*/
5555

5656
body {
57-
font-family: system-ui,
58-
-apple-system, /* Firefox supports this but not yet `system-ui` */ 'Segoe UI',
59-
Roboto,
60-
Helvetica,
61-
Arial,
62-
sans-serif,
63-
'Apple Color Emoji',
64-
'Segoe UI Emoji';
57+
font-family:
58+
system-ui,
59+
-apple-system, /* Firefox supports this but not yet `system-ui` */
60+
'Segoe UI',
61+
Roboto,
62+
Helvetica,
63+
Arial,
64+
sans-serif,
65+
'Apple Color Emoji',
66+
'Segoe UI Emoji';
6567
}
6668

6769
/*
@@ -90,7 +92,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
9092

9193
abbr[title] {
9294
-webkit-text-decoration: underline dotted;
93-
text-decoration: underline dotted;
95+
text-decoration: underline dotted;
9496
}
9597

9698
/**
@@ -111,12 +113,13 @@ code,
111113
kbd,
112114
samp,
113115
pre {
114-
font-family: ui-monospace,
115-
SFMono-Regular,
116-
Consolas,
117-
'Liberation Mono',
118-
Menlo,
119-
monospace; /* 1 */
116+
font-family:
117+
ui-monospace,
118+
SFMono-Regular,
119+
Consolas,
120+
'Liberation Mono',
121+
Menlo,
122+
monospace; /* 1 */
120123
font-size: 1em; /* 2 */
121124
}
122125

@@ -490,7 +493,7 @@ object {
490493

491494
/**
492495
* Constrain images and videos to the parent width and preserve
493-
* their instrinsic aspect ratio.
496+
* their intrinsic aspect ratio.
494497
*
495498
* https://github.com/mozdevs/cssremedy/issues/14
496499
*/
@@ -501,6 +504,30 @@ video {
501504
height: auto;
502505
}
503506

507+
:root {
508+
--sizes-small: 1rem;
509+
--sizes-medium: 2rem;
510+
--sizes-large: 3rem;
511+
--colors-red-50: #ff3232;
512+
--colors-red-500: #ff0000;
513+
--colors-red-900: #d70000;
514+
}
515+
516+
.container {
517+
--sizes-medium: 1.5rem;
518+
--sizes-container: 2rem;
519+
}
520+
521+
:root.dark {
522+
--colors-red-50: #c665ff;
523+
--colors-red-500: #9433f1;
524+
--colors-red-900: #6c0bc9;
525+
}
526+
527+
:root.dark .container {
528+
--colors-red-50: #ff0000;
529+
}
530+
504531
.container {
505532
width: 100%;
506533
}
@@ -535,30 +562,6 @@ video {
535562
}
536563
}
537564

538-
:root {
539-
--sizes-small: 1rem;
540-
--sizes-medium: 2rem;
541-
--sizes-large: 3rem;
542-
--colors-red-50: #ff3232;
543-
--colors-red-500: #ff0000;
544-
--colors-red-900: #d70000;
545-
}
546-
547-
.container {
548-
--sizes-medium: 1.5rem;
549-
--sizes-container: 2rem;
550-
}
551-
552-
:root.dark {
553-
--colors-red-50: #c665ff;
554-
--colors-red-500: #9433f1;
555-
--colors-red-900: #6c0bc9;
556-
}
557-
558-
:root.dark .container {
559-
--colors-red-50: #ff0000;
560-
}
561-
562565
.bg-gray-50 {
563566
--tw-bg-opacity: 1;
564567
background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
@@ -666,7 +669,7 @@ video {
666669
}
667670

668671
* {
669-
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
672+
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
670673
--tw-ring-offset-width: 0px;
671674
--tw-ring-offset-color: #fff;
672675
--tw-ring-color: rgba(59, 130, 246, 0.5);
@@ -719,12 +722,12 @@ video {
719722
@keyframes bounce {
720723
0%, 100% {
721724
transform: translateY(-25%);
722-
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
725+
animation-timing-function: cubic-bezier(0.8,0,1,1);
723726
}
724727

725728
50% {
726729
transform: none;
727-
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
730+
animation-timing-function: cubic-bezier(0,0,0.2,1);
728731
}
729732
}
730733

@@ -794,4 +797,4 @@ video {
794797
}
795798

796799
@media (min-width: 1536px) {
797-
}
800+
}

0 commit comments

Comments
 (0)