@brybrant/postcss-config 0.0.1

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.
Files changed (4) hide show
  1. package/package.json +22 -0
  2. package/postcss.config.d.ts +18 -0
  3. package/postcss.config.js +139 -0
  4. package/postcss.config.ts +40 -0
package/package.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "name": "@brybrant/postcss-config",
3
+ "author": "brybrant",
4
+ "license": "GPL-3.0-only",
5
+ "version": "0.0.1",
6
+ "type": "module",
7
+ "module": "./postcss.config.js",
8
+ "types": "./postcss.config.d.ts",
9
+ "exports": "./postcss.config.js",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/brybrant/configs.git"
13
+ },
14
+ "dependencies": {
15
+ "@brybrant/cssnano-config": "^0.0.1",
16
+ "@brybrant/purgecss-config": "^0.0.1",
17
+ "@brybrant/stylelint-config": "^0.0.1",
18
+ "autoprefixer": "^10.4.27",
19
+ "postcss-load-config": "^6.0.1",
20
+ "postcss-scss": "^4.0.9"
21
+ }
22
+ }
package/postcss.config.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { ConfigFn } from "postcss-load-config";
2
+
3
+ //#region packages/postcss/postcss.config.d.ts
4
+ /**
5
+ * ## PostCSS Config Function
6
+ *
7
+ * ### Syntax:
8
+ * - [SCSS](https://github.com/postcss/postcss-scss#readme)
9
+ *
10
+ * ### Plugins:
11
+ * - Stylelint ([config](https://www.npmjs.com/@brybrant/stylelint-config))
12
+ * - PurgeCSS ([config](https://www.npmjs.com/@brybrant/purgecss-config))
13
+ * - CSSNANO ([config](https://www.npmjs.com/@brybrant/cssnano-config))
14
+ * - [Autoprefixer](https://github.com/postcss/autoprefixer#options)
15
+ */
16
+ declare const postcssConfigFn: ConfigFn;
17
+ //#endregion
18
+ export { postcssConfigFn as default };
package/postcss.config.js ADDED
@@ -0,0 +1,139 @@
1
+ import autoprefixer from "autoprefixer";
2
+ import cssnano from "cssnano";
3
+ import { purgeCSSPlugin } from "@fullhuman/postcss-purgecss";
4
+ import stylelint from "stylelint";
5
+ import defaultPreset from "cssnano-preset-default";
6
+ //#endregion
7
+ //#region packages/cssnano/cssnano.config.mjs
8
+ /**
9
+ * ### CSSNANO Config Object
10
+ *
11
+ * Extends the default preset with [custom SVGO configuration](./node_modules/@brybrant/configs/dist/configs/svgo.config.js)
12
+ */
13
+ const cssnanoConfig = defaultPreset({ svgo: { plugins: [
14
+ "removeDoctype",
15
+ "removeXMLProcInst",
16
+ "removeComments",
17
+ "removeMetadata",
18
+ "removeEditorsNSData",
19
+ "removeDimensions",
20
+ "cleanupAttrs",
21
+ "mergeStyles",
22
+ "inlineStyles",
23
+ "minifyStyles",
24
+ "removeUselessDefs",
25
+ "cleanupNumericValues",
26
+ "convertColors",
27
+ "removeUnknownsAndDefaults",
28
+ "removeNonInheritableGroupAttrs",
29
+ "removeUselessStrokeAndFill",
30
+ "removeHiddenElems",
31
+ "removeEmptyText",
32
+ "convertShapeToPath",
33
+ "convertEllipseToCircle",
34
+ "moveElemsAttrsToGroup",
35
+ "moveGroupAttrsToElems",
36
+ "collapseGroups",
37
+ "convertPathData",
38
+ "convertTransform",
39
+ "removeEmptyAttrs",
40
+ "removeEmptyContainers",
41
+ "removeUnusedNS",
42
+ "reusePaths",
43
+ "mergePaths",
44
+ "cleanupListOfValues",
45
+ "sortAttrs",
46
+ "sortDefsChildren",
47
+ "removeTitle",
48
+ "removeDesc",
49
+ "removeXlink"
50
+ ] } });
51
+ //#endregion
52
+ //#region packages/purgecss/purgecss.config.mjs
53
+ /**
54
+ * ### PurgeCSS Config Object
55
+ *
56
+ * https://purgecss.com/configuration.html
57
+ */
58
+ const purgecssConfig = {
59
+ content: [
60
+ "index.html",
61
+ "./src/**/*.(jsx|tsx|vue)",
62
+ "./modules/*.json"
63
+ ],
64
+ extractors: [{
65
+ extractor: (content) => content.match(/\w+(?="[,}])/g) || [],
66
+ extensions: ["json"]
67
+ }],
68
+ safelist: ["active"]
69
+ };
70
+ //#endregion
71
+ //#region packages/stylelint/stylelint.config.mjs
72
+ /** BEM (block__element--modifier) */
73
+ const bemSyntax = /^[a-z][a-z0-9-]*(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+)?$/;
74
+ const snake_case = /^[a-z][a-z0-9]*(_[a-z0-9]+)*$/;
75
+ const privateKebab = /^_?[a-z][a-z0-9]*(-[a-z0-9]+)*$/;
76
+ /**
77
+ * ### Stylelint Config Object
78
+ *
79
+ * https://stylelint.io/user-guide/configure/
80
+ */
81
+ const stylelintConfig = {
82
+ cache: true,
83
+ extends: [
84
+ "stylelint-config-standard-scss",
85
+ "stylelint-config-prettier-scss",
86
+ "stylelint-config-hudochenkov/order"
87
+ ],
88
+ fix: false,
89
+ plugins: ["stylelint-high-performance-animation"],
90
+ rules: {
91
+ "alpha-value-notation": "number",
92
+ "hue-degree-notation": "number",
93
+ "number-max-precision": [5, { ignoreUnits: ["%"] }],
94
+ "scss/at-function-pattern": [privateKebab, { message: "Expected function \"%s\" to be kebab-case (private functions must start with an underscore)" }],
95
+ "scss/at-mixin-pattern": [privateKebab, { message: "Expected mixin \"%s\" to be kebab-case (private mixins must start with an underscore)" }],
96
+ "scss/dollar-variable-pattern": [privateKebab, { message: "Expected variable \"%s\" to be kebab-case (private variables must start with an underscore)" }],
97
+ "scss/percent-placeholder-pattern": [privateKebab, { message: "Expected placeholder \"%s\" to be kebab-case (private placeholders must start with an underscore)" }],
98
+ "selector-attribute-quotes": "never",
99
+ "selector-class-pattern": [bemSyntax, { message: "Expected class selector \"%s\" to be BEM syntax" }],
100
+ "selector-pseudo-element-colon-notation": "single",
101
+ "value-keyword-case": ["lower", { camelCaseSvgKeywords: true }],
102
+ "plugin/no-low-performance-animation-properties": true
103
+ },
104
+ overrides: [{
105
+ files: ["**/*.module.scss"],
106
+ rules: {
107
+ "selector-class-pattern": [snake_case, { message: "Expected class selector \"%s\" to be snake_case" }],
108
+ "selector-pseudo-class-no-unknown": [true, { ignorePseudoClasses: ["export"] }],
109
+ "property-no-unknown": [true, { ignoreSelectors: [":export"] }]
110
+ }
111
+ }]
112
+ };
113
+ //#endregion
114
+ //#region packages/postcss/postcss.config.ts
115
+ /**
116
+ * ## PostCSS Config Function
117
+ *
118
+ * ### Syntax:
119
+ * - [SCSS](https://github.com/postcss/postcss-scss#readme)
120
+ *
121
+ * ### Plugins:
122
+ * - Stylelint ([config](https://www.npmjs.com/@brybrant/stylelint-config))
123
+ * - PurgeCSS ([config](https://www.npmjs.com/@brybrant/purgecss-config))
124
+ * - CSSNANO ([config](https://www.npmjs.com/@brybrant/cssnano-config))
125
+ * - [Autoprefixer](https://github.com/postcss/autoprefixer#options)
126
+ */
127
+ const postcssConfigFn = function() {
128
+ return {
129
+ syntax: "postcss-scss",
130
+ plugins: [
131
+ stylelint(stylelintConfig),
132
+ purgeCSSPlugin(purgecssConfig),
133
+ cssnano(cssnanoConfig),
134
+ autoprefixer()
135
+ ]
136
+ };
137
+ };
138
+ //#endregion
139
+ export { postcssConfigFn as default };
package/postcss.config.ts ADDED
@@ -0,0 +1,40 @@
1
+ import type { Config, ConfigFn } from 'postcss-load-config';
2
+
3
+ import autoprefixer from 'autoprefixer';
4
+ import cssnano from 'cssnano';
5
+ import { purgeCSSPlugin } from '@fullhuman/postcss-purgecss';
6
+ import stylelint from 'stylelint';
7
+
8
+ import cssnanoConfig from '@brybrant/cssnano-config';
9
+ import purgeCSSConfig from '@brybrant/purgecss-config';
10
+ import stylelintConfig from '@brybrant/stylelint-config';
11
+
12
+ /**
13
+ * ## PostCSS Config Function
14
+ *
15
+ * ### Syntax:
16
+ * - [SCSS](https://github.com/postcss/postcss-scss#readme)
17
+ *
18
+ * ### Plugins:
19
+ * - Stylelint ([config](https://www.npmjs.com/@brybrant/stylelint-config))
20
+ * - PurgeCSS ([config](https://www.npmjs.com/@brybrant/purgecss-config))
21
+ * - CSSNANO ([config](https://www.npmjs.com/@brybrant/cssnano-config))
22
+ * - [Autoprefixer](https://github.com/postcss/autoprefixer#options)
23
+ */
24
+ const postcssConfigFn: ConfigFn = function(/* ctx */) {
25
+ // const development = ctx.env === 'development';
26
+
27
+ const postcssConfig: Config = {
28
+ syntax: 'postcss-scss',
29
+ plugins: [
30
+ stylelint(stylelintConfig),
31
+ purgeCSSPlugin(purgeCSSConfig),
32
+ cssnano(cssnanoConfig),
33
+ autoprefixer(),
34
+ ],
35
+ };
36
+
37
+ return postcssConfig;
38
+ }
39
+
40
+ export default postcssConfigFn;