styles/webpack.config.js at master · SmolinPavel/styles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
const path = require('path');
const { sync: glob } = require('glob');
const yaml = require('js-yaml');
const template = require('es6-template-strings');
const { decamelize, pascalize } = require('humps');

const mode = process.env.NODE_ENV || 'development';
const context = path.resolve(__dirname, 'src');

module.exports = {
  mode,
  context,
  entry: [path.resolve(context, 'index.scss')],
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].css',
              emitFile: true,
            },
          },
          {
            loader: 'extract-loader',
          },
        ].concat([
          {
            loader: 'css-loader',
          },
          {
            loader: 'resolve-url-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              config: {
                path: __dirname,
              },
            },
          },
          {
            loader: 'fast-sass-loader',
            options: {
              includePaths: [path.resolve(__dirname, 'node_modules')],
              transformers: [
                {
                  extensions: ['.yml'],
                  transform: (source) => {
                    const theme = yaml.load(source);
                    const getters = Object.assign(
                      {},
                      ...Object.entries(theme).map(([prop, value]) => ({
                        [prop]:
                          typeof value === 'object'
                            ? Object.assign(
                                {},
                                ...Object.entries(value).map(
                                  ([key, value]) => ({
                                    [key]: `#{var-get('${prop}${pascalize(
                                      key,
                                    )}')}`,
                                  }),
                                ),
                              )
                            : `#{var-get('${prop}')}`,
                      })),
                    );
                    const variables = {
                      varPrefix: 'olt-',
                      varStyle: 'camelCase',
                    };
                    const content = `\n${Object.entries(variables)
                      .map(
                        ([key, value]) => `\t$${decamelize(key)}: '${value}'`,
                      )
                      .join(';\n')}\n:root {\n${Object.entries(theme)
                      .map(([key, value]) => {
                        value =
                          typeof value === 'object'
                            ? `(\n${Object.entries(value)
                                .map(([key, value]) => `\t\t${key}: ${value}`)
                                .join(',\n')}\n)`
                            : `${value}`;
                        value = template(value, getters);

                        return `\t@include var-set('${key}', ${value})`;
                      })
                      .join(';\n')}}`;

                    return content;
                  },
                },
              ],
            },
          },
        ]),
      },
      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: context,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]',
              publicPath: './',
            },
          },
        ],
      },
      {
        test: require.resolve(
          path.resolve(context, 'components/Navbar/lightelligence.svg'),
        ),
        use: [
          {
            loader: 'svg-url-loader',
          },
        ],
      },
    ],
  },
  resolve: {
    modules: [
      path.resolve(__dirname, './'),
      path.resolve(__dirname, './node_modules'),
    ],
  },
};