@lipemat/js-boilerplate 9.1.0-beta.1 → 9.1.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -9
- package/config/postcss.config.js +22 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -106,15 +106,6 @@ Now you may write `jest` tests as desired and run them via `yarn run test`
|
|
|
106
106
|
By default, IE11 is disabled via an internal Browserslist configuration. If you would like to support IE11, add it
|
|
107
107
|
as a target to your project's Browserslist configuration and all tooling will automatically support it.
|
|
108
108
|
|
|
109
|
-
#### Custom properties
|
|
110
|
-
|
|
111
|
-
IE11 (and some older browsers) do not support custom properties e.g. `--color-red: red;` natively. To make custom properties work with this
|
|
112
|
-
library create `src/globals/pcss/variables.css` file and add any used custom properties to it.
|
|
113
|
-
|
|
114
|
-
The app will automatically compile with fallback values for older browsers.
|
|
115
|
-
|
|
116
|
-
An alternative/extra location is `../pcss/globals/variables.css`.
|
|
117
|
-
|
|
118
109
|
#### ES6 Modules
|
|
119
110
|
|
|
120
111
|
The app will automatically detect any packages in your `package.json` which do not support ES5 and add them to the list
|
|
@@ -144,3 +135,11 @@ If you are using https in your local environment, you may point to the certifica
|
|
|
144
135
|
}
|
|
145
136
|
}
|
|
146
137
|
```
|
|
138
|
+
|
|
139
|
+
## PostCSS Custom Media
|
|
140
|
+
|
|
141
|
+
`@custom-media` declarations will automatically be loaded from the following locations.
|
|
142
|
+
1. `pcss/globals/media-queries.pcss`.
|
|
143
|
+
2. `<jsPath>/src/pcss/media-queries.pcss`.
|
|
144
|
+
|
|
145
|
+
@notice `@import` do not work inside the `media-queries` files.
|
package/config/postcss.config.js
CHANGED
|
@@ -37,16 +37,31 @@ if ( getDefaultBrowsersList() ) {
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
|
-
* If a media-queries
|
|
40
|
+
* If a media-queries files exist, automatically load them.
|
|
41
41
|
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
42
|
+
* 1. pcss/globals/media-queries.pcss
|
|
43
|
+
* 2. js/src/pcss/media-queries.pcss
|
|
44
|
+
*
|
|
45
|
+
* @notice `@import` will not work inside the media-queries file so
|
|
46
|
+
* there is no point in having a JS version if all it does is
|
|
47
|
+
* import from the global pcss version.
|
|
44
48
|
*/
|
|
45
|
-
const customMedia = {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
const customMedia = {
|
|
50
|
+
importFrom: [],
|
|
51
|
+
};
|
|
52
|
+
[
|
|
53
|
+
path.resolve( packageConfig.packageDirectory, 'pcss/globals/media-queries.pcss' ),
|
|
54
|
+
path.resolve( packageConfig.workingDirectory, 'src/pcss/media-queries.pcss' ),
|
|
55
|
+
].forEach( possibleFile => {
|
|
56
|
+
if ( fs.existsSync( possibleFile ) ) {
|
|
57
|
+
customMedia.importFrom.push( possibleFile );
|
|
58
|
+
}
|
|
59
|
+
} );
|
|
49
60
|
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Put the config together.
|
|
64
|
+
*/
|
|
50
65
|
const config = {
|
|
51
66
|
plugins: [
|
|
52
67
|
require( 'postcss-import' )( {
|