All files / packages/design-system/scripts/compile lwc-style-loader.js

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
140
141
142
143
144
145
146
147
148
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// lwc-style-loader
// This custom loader is a combination of
// `style-loader` (https://github.com/webpack-contrib/style-loader#readme) and
// `css-to-string-loader` (https://github.com/smithad15/css-to-string-loader)
// with dependencies on `loader-utils` and `style-loader`
 
var path = require('path');
 
var loaderUtils = require('loader-utils');
var validateOptions = require('schema-utils');
 
module.exports = function() {};
 
module.exports.pitch = function(request) {
  if (this.cacheable) this.cacheable();
 
  var options = loaderUtils.getOptions(this) || {};
 
  validateOptions(
    require('../../node_modules/style-loader/options.json'),
    options,
    'Style Loader'
  );
 
  options.hmr = typeof options.hmr === 'undefined' ? true : options.hmr;
 
  // The variable is needed, because the function should be inlined.
  // If is just stored it in options, JSON.stringify will quote
  // the function and it would be just a string at runtime
  var insertInto;
 
  if (typeof options.insertInto === 'function') {
    insertInto = options.insertInto.toString();
  }
 
  // We need to check if it a string, or variable will be "undefined"
  // and the loader crashes
  if (typeof options.insertInto === 'string') {
    insertInto = '"' + options.insertInto + '"';
  }
 
  if (this.cacheable) {
    this.cacheable();
  }
 
  var stringExport = [
    '// css-to-string-loader: transforms styles from css-loader to a string output',
    '',
    '// Get the styles',
    'var styles = require(' +
      loaderUtils.stringifyRequest(this, '!!' + request) +
      ');',
    '',
    "if (typeof styles === 'string') {",
    '  // Return an existing string',
    '  module.exports = styles;',
    '} else {',
    '  // Call the custom toString method from css-loader module',
    '  module.exports = styles.toString();',
    '}'
  ].join('\n');
 
  var hmr = [
    // Hot Module Replacement,
    'if(module.hot) {',
    // When the styles change, update the <style> tags
    '	module.hot.accept(' +
      loaderUtils.stringifyRequest(this, '!!' + request) +
      ', function() {',
    '		var newContent = require(' +
      loaderUtils.stringifyRequest(this, '!!' + request) +
      ');',
    '',
    "		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
    '',
    '		var locals = (function(a, b) {',
    '			var key, idx = 0;',
    '',
    '			for(key in a) {',
    '				if(!b || a[key] !== b[key]) return false;',
    '				idx++;',
    '			}',
    '',
    '			for(key in b) idx--;',
    '',
    '			return idx === 0;',
    '		}(content.locals, newContent.locals));',
    '',
    // This error is caught and not shown and causes a full reload
    "		if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');",
    '',
    '		update(newContent);',
    '	});',
    '',
    // When the module is disposed, remove the <style> tags
    '	module.hot.dispose(function() { update(); });',
    '}'
  ].join('\n');
 
  return [
    // Style Loader
    // Adds CSS to the DOM by adding a <style> tag
    '',
    // Load styles
    'var content = require(' +
      loaderUtils.stringifyRequest(this, '!!' + request) +
      ');',
    '',
    "if(typeof content === 'string') content = [[module.id, content, '']];",
    '',
    // Transform styles",
    'var transform;',
    'var insertInto;',
    '',
    options.transform
      ? 'transform = require(' +
        loaderUtils.stringifyRequest(
          this,
          '!' + path.resolve(options.transform)
        ) +
        ');'
      : '',
    '',
    'var options = ' + JSON.stringify(options),
    '',
    'options.transform = transform',
    'options.insertInto = ' + insertInto + ';',
    '',
    // Add styles to the DOM
    'var update = require(' +
      loaderUtils.stringifyRequest(
        this,
        '!' +
          path.join(
            __dirname,
            '../../node_modules/style-loader/lib',
            'addStyles.js'
          )
      ) +
      ')(content, options);',
    '',
    'if(content.locals) module.exports = content.locals;',
    '',
    options.hmr ? hmr : '',
    stringExport
  ].join('\n');
};