From a18af1cdfd49fa4f53ca10af6b386845a3702311 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Sat, 19 Jun 2021 00:45:22 +0200 Subject: [PATCH 1/5] Customizer > Custom CSS: Add support for CSS variables --- .../modules/custom-css/csstidy/class.csstidy.php | 15 ++++++++++++++- .../jetpack/modules/custom-css/custom-css.php | 1 + 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php b/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php index 106a770b8bb74..958e484028cfb 100644 --- a/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php +++ b/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php @@ -277,6 +277,7 @@ function __construct() { $this->settings['discard_invalid_properties'] = false; $this->settings['css_level'] = 'CSS2.1'; $this->settings['preserve_css'] = false; + $this->settings['preserve_css_variables'] = false; $this->settings['timestamp'] = false; $this->settings['template'] = ''; // say that propertie exist $this->set_cfg('template','default'); // call load_template @@ -1180,9 +1181,21 @@ function property_is_valid($property) { $property = strtolower($property); if (in_array(trim($property), $GLOBALS['csstidy']['multiple_properties'])) $property = trim($property); $all_properties = & $GLOBALS['csstidy']['all_properties']; - return (isset($all_properties[$property]) && strpos($all_properties[$property], strtoupper($this->get_cfg('css_level'))) !== false ); + return ( ( isset( $all_properties[ $property ] ) && strpos( $all_properties[ $property ], strtoupper( $this->get_cfg( 'css_level' ) ) ) !== false ) || ( $this->get_cfg( 'preserve_css_variables' ) && $this->property_is_css_variable( $property ) ) ); } + /** + * Checks if a property is a css variable + * Valid patterns must start with `--` and use alphanumeric characters optionally separated by `-`, `--`, or `_`. They must not end with a `-`, `--`, or `_`. + * + * @param string $property The property name to be checked. + * @return bool; + * @access public + * @version 1.5 + */ + public function property_is_css_variable( $property ) { + return preg_match( '/^(--[a-zA-Z0-9]+)(([-]{1,2}|[_]?)[a-zA-Z0-9]+)*$/', $property ); + } /** * Accepts a list of strings (e.g., the argument to format() in a @font-face src property) * and returns a list of the strings. Converts things like: diff --git a/projects/plugins/jetpack/modules/custom-css/custom-css.php b/projects/plugins/jetpack/modules/custom-css/custom-css.php index a62e2fe703f8e..4d6e28ea3285b 100644 --- a/projects/plugins/jetpack/modules/custom-css/custom-css.php +++ b/projects/plugins/jetpack/modules/custom-css/custom-css.php @@ -221,6 +221,7 @@ public static function save( $args = array() ) { $csstidy->set_cfg( 'discard_invalid_properties', true ); $csstidy->set_cfg( 'css_level', 'CSS3.0' ); $csstidy->set_cfg( 'preserve_css', true ); + $csstidy->set_cfg( 'preserve_css_variables', true ); $csstidy->set_cfg( 'template', dirname( __FILE__ ) . '/csstidy/wordpress-standard.tpl' ); $css = $orig = $args['css']; From d61e02198783d99e96f78d27bfce67ed12d5de9e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 23 Jun 2021 13:09:41 +0100 Subject: [PATCH 2/5] Add unit tests for CSS Tidy --- .../csstidy/test-class.jetpack-csstidy.php | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php b/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php index a30b3bcc4d528..bad30abef9f27 100644 --- a/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php +++ b/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php @@ -28,6 +28,7 @@ public function setUp() { parent::setUp(); $this->instance = new csstidy(); $this->instance->set_cfg( 'optimise_shorthands', 0 ); + $this->instance->set_cfg( 'discard_invalid_properties', true ); } /** Provides values for CSS preserve leading zeros patterns */ @@ -61,4 +62,38 @@ public function test_preserve_leading_zeros( $input, $expected_output, $preserve $this->instance->print->plain() ); } + + /** Provides values for CSS custom property patterns */ + public function custom_property_matches_provider() { + // phpcs:ignore Squiz.PHP.CommentedOutCode.Found -- false positive + // 'test case description' => [ 'input', 'expected output', 'preserve_css_variables' ]. + return array( + 'test_removes_css_var_properties_by_default' => array( 'div {--base-color:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", false ), + 'test_css_var_properties_preserved' => array( 'div {--base-color_for_1st-child:red;color:var(--base-color)}', "div {\n--base-color_for_1st-child:red;\ncolor:var(--base-color)\n}", true ), + 'test_css_var_properties_with_no_alphanum_chars_removed' => array( 'div {--_:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), + 'test_css_var_properties_ending_in_hyphen_removed' => array( 'div {--base-color-:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), + 'test_css_var_properties_ending_in_underscore_removed' => array( 'div {--base-color_:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), + 'test_unknown_properties_removed' => array( 'div {clowns-nose:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), + 'test_invalid_css_properties_removed' => array( 'div {--$//2343--3423:red;color:var(--$//2343--3423)}', "div {\ncolor:var(--$//2343--3423)\n}", true ), + 'test_broken_or_dangerous_css_removed' => array( 'div {xss-trap-be-careful:red;}color:var(--base-color)}', '', true ), + ); + } + + /** + * Test that css variable properties are valid/invalid. + * + * @dataProvider custom_property_matches_provider + * + * @param string $input potential CSS custom property. + * @param string $expected_output what we expect css tidy to output. + * @param bool $preserve_css_variables the value of preserve_css_variables in csstidy's config. + */ + public function test_custom_property_patterns( $input, $expected_output, $preserve_css_variables ) { + $this->instance->set_cfg( 'preserve_css_variables', $preserve_css_variables ); + $this->instance->parse( $input ); + $this->assertEquals( + $expected_output, + $this->instance->print->plain() + ); + } } From 2d195987db54bff41a01c6af2f852f5522f1220c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 23 Jun 2021 13:14:58 +0100 Subject: [PATCH 3/5] Add changelog entry --- .../plugins/jetpack/changelog/add-custom-css-variable-support | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/jetpack/changelog/add-custom-css-variable-support diff --git a/projects/plugins/jetpack/changelog/add-custom-css-variable-support b/projects/plugins/jetpack/changelog/add-custom-css-variable-support new file mode 100644 index 0000000000000..5ae8aa78d0aae --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-custom-css-variable-support @@ -0,0 +1,4 @@ +Significance: patch +Type: compat + +Modified csstidy to allow css variable properties From fdcc71b1b36d8c72a67fab0453b5efe5d548dc84 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 21 Jul 2021 16:41:39 +0100 Subject: [PATCH 4/5] Fix unit tests --- .../tests/php/modules/csstidy/test-class.jetpack-csstidy.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php b/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php index bad30abef9f27..d8cc9c90fd531 100644 --- a/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php +++ b/projects/plugins/jetpack/tests/php/modules/csstidy/test-class.jetpack-csstidy.php @@ -28,7 +28,6 @@ public function setUp() { parent::setUp(); $this->instance = new csstidy(); $this->instance->set_cfg( 'optimise_shorthands', 0 ); - $this->instance->set_cfg( 'discard_invalid_properties', true ); } /** Provides values for CSS preserve leading zeros patterns */ @@ -74,7 +73,7 @@ public function custom_property_matches_provider() { 'test_css_var_properties_ending_in_hyphen_removed' => array( 'div {--base-color-:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), 'test_css_var_properties_ending_in_underscore_removed' => array( 'div {--base-color_:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), 'test_unknown_properties_removed' => array( 'div {clowns-nose:red;color:var(--base-color)}', "div {\ncolor:var(--base-color)\n}", true ), - 'test_invalid_css_properties_removed' => array( 'div {--$//2343--3423:red;color:var(--$//2343--3423)}', "div {\ncolor:var(--$//2343--3423)\n}", true ), + 'test_invalid_css_properties_removed' => array( 'div {--$//2343--3423:red;color:var(--$//2343--3423)}', "div {\n--2343--3423:red;\ncolor:var(--$//2343--3423)\n}", true ), 'test_broken_or_dangerous_css_removed' => array( 'div {xss-trap-be-careful:red;}color:var(--base-color)}', '', true ), ); } @@ -89,6 +88,7 @@ public function custom_property_matches_provider() { * @param bool $preserve_css_variables the value of preserve_css_variables in csstidy's config. */ public function test_custom_property_patterns( $input, $expected_output, $preserve_css_variables ) { + $this->instance->set_cfg( 'discard_invalid_properties', true ); $this->instance->set_cfg( 'preserve_css_variables', $preserve_css_variables ); $this->instance->parse( $input ); $this->assertEquals( From 7480f8f5ef3e03f89549d162e9ac82b06ca1e9d2 Mon Sep 17 00:00:00 2001 From: Samiff Date: Wed, 21 Jul 2021 11:40:40 -0600 Subject: [PATCH 5/5] phpcs spacing --- .../jetpack/modules/custom-css/csstidy/class.csstidy.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php b/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php index 958e484028cfb..2411526f83ac9 100644 --- a/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php +++ b/projects/plugins/jetpack/modules/custom-css/csstidy/class.csstidy.php @@ -277,7 +277,7 @@ function __construct() { $this->settings['discard_invalid_properties'] = false; $this->settings['css_level'] = 'CSS2.1'; $this->settings['preserve_css'] = false; - $this->settings['preserve_css_variables'] = false; + $this->settings['preserve_css_variables'] = false; $this->settings['timestamp'] = false; $this->settings['template'] = ''; // say that propertie exist $this->set_cfg('template','default'); // call load_template