@wordpress/style-engine 1.1.1-next.4d3b314fd5.0 → 1.3.0

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.
@@ -1,188 +0,0 @@
1
- <?php
2
- /**
3
- * Tests the Style Engine CSS Rules Store class.
4
- *
5
- * @package Gutenberg
6
- * @subpackage style-engine
7
- */
8
-
9
- // Check for the existence of Style Engine classes and methods.
10
- // Once the Style Engine has been migrated to Core we can remove the if statements and require imports.
11
- // Testing new features from the Gutenberg package may require
12
- // testing against `gutenberg_` and `_Gutenberg` functions and methods in the future.
13
- if ( ! class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
14
- require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
15
- }
16
-
17
- if ( ! class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
18
- require __DIR__ . '/../class-wp-style-engine-css-rule.php';
19
- }
20
-
21
- if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
22
- require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
23
- }
24
-
25
- /**
26
- * Tests for registering, storing and retrieving a collection of CSS Rules (a store).
27
- *
28
- * @coversDefaultClass WP_Style_Engine_CSS_Rules_Store
29
- */
30
- class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
31
- /**
32
- * Cleans up stores after each test.
33
- */
34
- public function tear_down() {
35
- WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
36
- parent::tear_down();
37
- }
38
-
39
- /**
40
- * Tests creating a new store on instantiation.
41
- *
42
- * @covers ::__construct
43
- */
44
- public function test_should_create_new_store_on_instantiation() {
45
- $new_pancakes_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
46
-
47
- $this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $new_pancakes_store );
48
- }
49
-
50
- /**
51
- * Tests that a `$store_name` argument is required and no store will be created without one.
52
- *
53
- * @covers ::get_store
54
- */
55
- public function test_should_not_create_store_without_a_store_name() {
56
- $not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( '' );
57
-
58
- $this->assertEmpty( $not_a_store, 'get_store() did not return an empty value with empty string as argument.' );
59
-
60
- $also_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( 123 );
61
-
62
- $this->assertEmpty( $also_not_a_store, 'get_store() did not return an empty value with number as argument.' );
63
-
64
- $definitely_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( null );
65
-
66
- $this->assertEmpty( $definitely_not_a_store, 'get_store() did not return an empty value with `null` as argument.' );
67
- }
68
-
69
- /**
70
- * Tests returning a previously created store when the same selector key is passed.
71
- *
72
- * @covers ::get_store
73
- */
74
- public function test_should_return_existing_store() {
75
- $new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
76
- $selector = '.haddock';
77
-
78
- $new_fish_store->add_rule( $selector );
79
-
80
- $this->assertSame( $selector, $new_fish_store->add_rule( $selector )->get_selector(), 'Selector string of store rule does not match expected value' );
81
-
82
- $the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
83
-
84
- $this->assertSame( $selector, $the_same_fish_store->add_rule( $selector )->get_selector(), 'Selector string of existing store rule does not match expected value' );
85
- }
86
-
87
- /**
88
- * Tests returning all previously created stores.
89
- *
90
- * @covers ::get_stores
91
- */
92
- public function test_should_get_all_existing_stores() {
93
- $burrito_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'burrito' );
94
- $quesadilla_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'quesadilla' );
95
-
96
- $this->assertEquals(
97
- array(
98
- 'burrito' => $burrito_store,
99
- 'quesadilla' => $quesadilla_store,
100
- ),
101
- WP_Style_Engine_CSS_Rules_Store::get_stores()
102
- );
103
- }
104
-
105
- /**
106
- * Tests that all previously created stores are deleted.
107
- *
108
- * @covers ::remove_all_stores
109
- */
110
- public function test_should_remove_all_stores() {
111
- $dolmades_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'dolmades' );
112
- $tzatziki_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'tzatziki' );
113
-
114
- $this->assertEquals(
115
- array(
116
- 'dolmades' => $dolmades_store,
117
- 'tzatziki' => $tzatziki_store,
118
- ),
119
- WP_Style_Engine_CSS_Rules_Store::get_stores(),
120
- 'Return value of get_stores() does not match expectation'
121
- );
122
- WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
123
-
124
- $this->assertEquals(
125
- array(),
126
- WP_Style_Engine_CSS_Rules_Store::get_stores(),
127
- 'Return value of get_stores() is not an empty array after remove_all_stores() called.'
128
- );
129
- }
130
-
131
- /**
132
- * Tests adding rules to an existing store.
133
- *
134
- * @covers ::add_rule
135
- */
136
- public function test_should_add_rule_to_existing_store() {
137
- $new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
138
- $selector = '.wp-block-sauce a:hover';
139
- $store_rule = $new_pie_store->add_rule( $selector );
140
- $expected = '';
141
-
142
- $this->assertSame( $expected, $store_rule->get_css(), 'Return value of get_css() is not a empty string where a rule has no CSS declarations.' );
143
-
144
- $pie_declarations = array(
145
- 'color' => 'brown',
146
- 'border-color' => 'yellow',
147
- 'border-radius' => '10rem',
148
- );
149
- $css_declarations = new WP_Style_Engine_CSS_Declarations( $pie_declarations );
150
- $store_rule->add_declarations( $css_declarations );
151
-
152
- $store_rule = $new_pie_store->add_rule( $selector );
153
- $expected = "$selector{{$css_declarations->get_declarations_string()}}";
154
-
155
- $this->assertSame( $expected, $store_rule->get_css(), 'Return value of get_css() does not match expected CSS from existing store rules.' );
156
- }
157
-
158
- /**
159
- * Tests that all stored rule objects are returned.
160
- *
161
- * @covers ::get_all_rules
162
- */
163
- public function test_should_get_all_rule_objects_for_a_store() {
164
- $new_pizza_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pizza-with-mozzarella' );
165
- $selector = '.wp-block-anchovies a:hover';
166
- $store_rule = $new_pizza_store->add_rule( $selector );
167
- $expected = array(
168
- $selector => $store_rule,
169
- );
170
-
171
- $this->assertSame( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations.' );
172
-
173
- $new_selector = '.wp-block-mushroom a:hover';
174
- $newer_pizza_declarations = array(
175
- 'padding' => '100px',
176
- );
177
- $new_store_rule = $new_pizza_store->add_rule( $new_selector );
178
- $css_declarations = new WP_Style_Engine_CSS_Declarations( $newer_pizza_declarations );
179
- $new_store_rule->add_declarations( array( $css_declarations ) );
180
-
181
- $expected = array(
182
- $selector => $store_rule,
183
- $new_selector => $new_store_rule,
184
- );
185
-
186
- $this->assertSame( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations after adding new rules to store.' );
187
- }
188
- }
@@ -1,314 +0,0 @@
1
- <?php
2
- /**
3
- * Tests the Style Engine Processor class.
4
- *
5
- * @package Gutenberg
6
- * @subpackage style-engine
7
- */
8
-
9
- // Check for the existence of Style Engine classes and methods.
10
- // Once the Style Engine has been migrated to Core we can remove the if statements and require imports.
11
- // Testing new features from the Gutenberg package may require
12
- // testing against `gutenberg_` and `_Gutenberg` functions and methods in the future.
13
- if ( ! class_exists( 'WP_Style_Engine_Processor' ) ) {
14
- require __DIR__ . '/../class-wp-style-engine-processor.php';
15
- }
16
-
17
- if ( ! class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
18
- require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
19
- }
20
-
21
- if ( ! class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
22
- require __DIR__ . '/../class-wp-style-engine-css-rule.php';
23
- }
24
-
25
- if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
26
- require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
27
- }
28
-
29
- /**
30
- * Tests for compiling and rendering styles from a store of CSS rules.
31
- *
32
- * @coversDefaultClass WP_Style_Engine_Processor
33
- */
34
- class WP_Style_Engine_Processor_Test extends WP_UnitTestCase {
35
- /**
36
- * Tests adding rules and returning compiled CSS rules.
37
- *
38
- * @covers ::add_rules
39
- * @covers ::get_css
40
- */
41
- public function test_should_return_rules_as_compiled_css() {
42
- $a_nice_css_rule = new WP_Style_Engine_CSS_Rule( '.a-nice-rule' );
43
- $a_nice_css_rule->add_declarations(
44
- array(
45
- 'color' => 'var(--nice-color)',
46
- 'background-color' => 'purple',
47
- )
48
- );
49
- $a_nicer_css_rule = new WP_Style_Engine_CSS_Rule( '.a-nicer-rule' );
50
- $a_nicer_css_rule->add_declarations(
51
- array(
52
- 'font-family' => 'Nice sans',
53
- 'font-size' => '1em',
54
- 'background-color' => 'purple',
55
- )
56
- );
57
- $a_nice_processor = new WP_Style_Engine_Processor();
58
- $a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
59
-
60
- $this->assertSame(
61
- '.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
62
- $a_nice_processor->get_css( array( 'prettify' => false ) )
63
- );
64
- }
65
-
66
- /**
67
- * Tests compiling CSS rules and formatting them with new lines and indents.
68
- *
69
- * @covers ::get_css
70
- */
71
- public function test_should_return_prettified_css_rules() {
72
- $a_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-wonderful-rule' );
73
- $a_wonderful_css_rule->add_declarations(
74
- array(
75
- 'color' => 'var(--wonderful-color)',
76
- 'background-color' => 'orange',
77
- )
78
- );
79
- $a_very_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-very_wonderful-rule' );
80
- $a_very_wonderful_css_rule->add_declarations(
81
- array(
82
- 'color' => 'var(--wonderful-color)',
83
- 'background-color' => 'orange',
84
- )
85
- );
86
- $a_more_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-more-wonderful-rule' );
87
- $a_more_wonderful_css_rule->add_declarations(
88
- array(
89
- 'font-family' => 'Wonderful sans',
90
- 'font-size' => '1em',
91
- 'background-color' => 'orange',
92
- )
93
- );
94
- $a_wonderful_processor = new WP_Style_Engine_Processor();
95
- $a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule, $a_more_wonderful_css_rule ) );
96
-
97
- $expected = '.a-more-wonderful-rule {
98
- font-family: Wonderful sans;
99
- font-size: 1em;
100
- background-color: orange;
101
- }
102
- .a-wonderful-rule,
103
- .a-very_wonderful-rule {
104
- color: var(--wonderful-color);
105
- background-color: orange;
106
- }
107
- ';
108
- $this->assertSame(
109
- $expected,
110
- $a_wonderful_processor->get_css( array( 'prettify' => true ) )
111
- );
112
- }
113
-
114
- /**
115
- * Tests adding a store and compiling CSS rules from that store.
116
- *
117
- * @covers ::add_store
118
- */
119
- public function test_should_return_store_rules_as_css() {
120
- $a_nice_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'nice' );
121
- $a_nice_store->add_rule( '.a-nice-rule' )->add_declarations(
122
- array(
123
- 'color' => 'var(--nice-color)',
124
- 'background-color' => 'purple',
125
- )
126
- );
127
- $a_nice_store->add_rule( '.a-nicer-rule' )->add_declarations(
128
- array(
129
- 'font-family' => 'Nice sans',
130
- 'font-size' => '1em',
131
- 'background-color' => 'purple',
132
- )
133
- );
134
- $a_nice_renderer = new WP_Style_Engine_Processor();
135
- $a_nice_renderer->add_store( $a_nice_store );
136
- $this->assertSame(
137
- '.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
138
- $a_nice_renderer->get_css( array( 'prettify' => false ) )
139
- );
140
- }
141
-
142
- /**
143
- * Tests that CSS declarations are merged and deduped in the final CSS rules output.
144
- *
145
- * @covers ::add_rules
146
- * @covers ::get_css
147
- */
148
- public function test_should_dedupe_and_merge_css_declarations() {
149
- $an_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
150
- $an_excellent_processor = new WP_Style_Engine_Processor();
151
- $an_excellent_rule->add_declarations(
152
- array(
153
- 'color' => 'var(--excellent-color)',
154
- 'border-style' => 'dotted',
155
- )
156
- );
157
- $an_excellent_processor->add_rules( $an_excellent_rule );
158
-
159
- $another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
160
- $another_excellent_rule->add_declarations(
161
- array(
162
- 'color' => 'var(--excellent-color)',
163
- 'border-style' => 'dotted',
164
- 'border-color' => 'brown',
165
- )
166
- );
167
- $an_excellent_processor->add_rules( $another_excellent_rule );
168
- $this->assertSame(
169
- '.an-excellent-rule{color:var(--excellent-color);border-style:dotted;border-color:brown;}',
170
- $an_excellent_processor->get_css( array( 'prettify' => false ) ),
171
- 'Return value of get_css() does not match expectations with new, deduped and merged declarations.'
172
- );
173
-
174
- $yet_another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
175
- $yet_another_excellent_rule->add_declarations(
176
- array(
177
- 'color' => 'var(--excellent-color)',
178
- 'border-style' => 'dashed',
179
- 'border-width' => '2px',
180
- )
181
- );
182
- $an_excellent_processor->add_rules( $yet_another_excellent_rule );
183
- $this->assertSame(
184
- '.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}',
185
- $an_excellent_processor->get_css( array( 'prettify' => false ) ),
186
- 'Return value of get_css() does not match expectations with deduped and merged declarations.'
187
- );
188
- }
189
-
190
- /**
191
- * Tests printing out 'unoptimized' CSS, that is, uncombined selectors and duplicate CSS rules.
192
- *
193
- * @covers ::get_css
194
- */
195
- public function test_should_not_optimize_css_output() {
196
- $a_sweet_rule = new WP_Style_Engine_CSS_Rule(
197
- '.a-sweet-rule',
198
- array(
199
- 'color' => 'var(--sweet-color)',
200
- 'background-color' => 'purple',
201
- )
202
- );
203
-
204
- $a_sweeter_rule = new WP_Style_Engine_CSS_Rule(
205
- '#an-even-sweeter-rule > marquee',
206
- array(
207
- 'color' => 'var(--sweet-color)',
208
- 'background-color' => 'purple',
209
- )
210
- );
211
-
212
- $the_sweetest_rule = new WP_Style_Engine_CSS_Rule(
213
- '.the-sweetest-rule-of-all a',
214
- array(
215
- 'color' => 'var(--sweet-color)',
216
- 'background-color' => 'purple',
217
- )
218
- );
219
-
220
- $a_sweet_processor = new WP_Style_Engine_Processor();
221
- $a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule, $the_sweetest_rule ) );
222
-
223
- $this->assertSame(
224
- '.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}.the-sweetest-rule-of-all a{color:var(--sweet-color);background-color:purple;}',
225
- $a_sweet_processor->get_css(
226
- array(
227
- 'optimize' => false,
228
- 'prettify' => false,
229
- )
230
- )
231
- );
232
- }
233
-
234
- /**
235
- * Tests that 'optimized' CSS is output, that is, that duplicate CSS rules are combined under their corresponding selectors.
236
- *
237
- * @covers ::get_css
238
- */
239
- public function test_should_optimize_css_output_by_default() {
240
- $a_sweet_rule = new WP_Style_Engine_CSS_Rule(
241
- '.a-sweet-rule',
242
- array(
243
- 'color' => 'var(--sweet-color)',
244
- 'background-color' => 'purple',
245
- )
246
- );
247
-
248
- $a_sweeter_rule = new WP_Style_Engine_CSS_Rule(
249
- '#an-even-sweeter-rule > marquee',
250
- array(
251
- 'color' => 'var(--sweet-color)',
252
- 'background-color' => 'purple',
253
- )
254
- );
255
-
256
- $a_sweet_processor = new WP_Style_Engine_Processor();
257
- $a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) );
258
-
259
- $this->assertSame(
260
- '.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
261
- $a_sweet_processor->get_css( array( 'prettify' => false ) )
262
- );
263
- }
264
-
265
- /**
266
- * Tests that incoming CSS rules are merged with existing CSS rules.
267
- *
268
- * @covers ::add_rules
269
- */
270
- public function test_should_combine_previously_added_css_rules() {
271
- $a_lovely_processor = new WP_Style_Engine_Processor();
272
- $a_lovely_rule = new WP_Style_Engine_CSS_Rule(
273
- '.a-lovely-rule',
274
- array(
275
- 'border-color' => 'purple',
276
- )
277
- );
278
- $a_lovely_processor->add_rules( $a_lovely_rule );
279
- $a_lovelier_rule = new WP_Style_Engine_CSS_Rule(
280
- '.a-lovelier-rule',
281
- array(
282
- 'border-color' => 'purple',
283
- )
284
- );
285
- $a_lovely_processor->add_rules( $a_lovelier_rule );
286
- $this->assertSame(
287
- '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}',
288
- $a_lovely_processor->get_css( array( 'prettify' => false ) ),
289
- 'Return value of get_css() does not match expectations when combining 2 CSS rules'
290
- );
291
-
292
- $a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
293
- '.a-most-lovely-rule',
294
- array(
295
- 'border-color' => 'purple',
296
- )
297
- );
298
- $a_lovely_processor->add_rules( $a_most_lovely_rule );
299
-
300
- $a_perfectly_lovely_rule = new WP_Style_Engine_CSS_Rule(
301
- '.a-perfectly-lovely-rule',
302
- array(
303
- 'border-color' => 'purple',
304
- )
305
- );
306
- $a_lovely_processor->add_rules( $a_perfectly_lovely_rule );
307
-
308
- $this->assertSame(
309
- '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
310
- $a_lovely_processor->get_css( array( 'prettify' => false ) ),
311
- 'Return value of get_css() does not match expectations when combining 4 CSS rules'
312
- );
313
- }
314
- }