Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(scss): updated to current scss spec, updated deps #7150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mattnolting wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(scss): updated to current scss spec, updated deps #7150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions gulpfile.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import fs from'fs';
import path from 'path';
import gulp from'gulp';
import rimraf from'rimraf';
import gulp from 'gulp';
import { rimraf } from 'rimraf';
import { copyFA, copySource, copyAssets, copyDocs, watchCopyDocs } from'./scripts/gulp/copy.mjs';
import { compileSASS, minifyCSS, watchSASS } from'./scripts/gulp/sass.mjs';
import { pfIconFont as definedPfIconFont, pfIcons as definedPfIcons } from'./scripts/gulp/icons.mjs';
Expand Down
9 changes: 6 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"@patternfly/react-table": "6.0.0-prerelease.19",
"@starptech/prettyhtml": "^0.10.0",
"backstopjs": "^6.3.23",
"cheerio": "^1.0.0-rc.12",
"cheerio": "^1.0.0",
"commander": "^12.0.0",
"cssnano": "^6.1.2",
"eslint": "^8.57.0",
Expand Down Expand Up @@ -87,7 +87,7 @@
"remark-parse": "^11.0.0",
"remark-stringify": "^11.0.0",
"rimraf": "*",
"sass": "^1.74.1",
"sass": "^1.80.1",
"stylelint": "^16.3.1",
"stylelint-config-recess-order": "^5.0.0",
"stylelint-config-standard": "^36.0.0",
Expand All @@ -109,5 +109,8 @@
"registry": "https://registry.npmjs.org/",
"access": "public"
},
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
"dependencies": {
"@babel/helper-hoist-variables": "^7.24.7"
}
}
8 changes: 1 addition & 7 deletions scripts/gulp/sass.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,12 @@ function compileSASS0(srcFiles) {
return srcFiles.pipe(
through2.obj((chunk, _, cb2) => {
let cssString;
let scss = chunk.contents.toString();
const relativePath = path.relative(path.join(chunk._cwd, '/src/patternfly'), chunk.history[0]);
const loggedPath = path.relative(process.cwd(), chunk.history[0]);
const numDirectories = relativePath.split(path.sep).length - 1;

try {
const css = sass.renderSync({
// Pass filename for import resolution. Contents are not compiled.
file: chunk.history[0],
// Contents to compile
data: scss
});
const css = sass.compile(chunk.history[0]);
cssString = css.css.toString();
// TODO: Cleaner way to to do relative image assets in component CSS
if (numDirectories > 0) {
Expand Down
2 changes: 1 addition & 1 deletion scripts/gulp/snippets.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import fs from 'fs';
import gulp from 'gulp';
import through2 from 'through2';
import prettyhtml from '@starptech/prettyhtml';
import cheerio from 'cheerio';
import { hbsInstance, hbsFileMap } from './html.mjs';
import * as cheerio from 'cheerio';

const { src } = gulp;

Expand Down
3 changes: 2 additions & 1 deletion src/patternfly/assets/fontawesome/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Variables
// --------------------------
@use 'sass:math';
@use 'sass:string';

$fa-font-size-base: 16px !default;
$fa-css-prefix: 'fa' !default;
Expand All @@ -12,7 +13,7 @@ $fa-fw-width: math.div(20em, 16);
$pf-v6-global--disable-fontawesome: false !default;
// Convenience function used to set content property
@function fa-content($fa-var) {
@return unquote("\"#{ $fa-var }\"");
@return string.unquote("\"#{ $fa-var }\"");
}

$fa-var-500px: \f26e;
Expand Down
49 changes: 19 additions & 30 deletions src/patternfly/components/AboutModalBox/about-modal-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,6 @@
--#{$about-modal-box}__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
--#{$about-modal-box}__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);

@media screen and (min-width: $pf-v6-global--breakpoint--sm) {
--#{$about-modal-box}__brand--PaddingInlineEnd: var(--#{$about-modal-box}__brand--sm--PaddingInlineEnd);
--#{$about-modal-box}__brand--PaddingInlineStart: var(--#{$about-modal-box}__brand--sm--PaddingInlineStart);
--#{$about-modal-box}__brand--PaddingBlockEnd: var(--#{$about-modal-box}__brand--sm--PaddingBlockEnd);
}

// Close
--#{$about-modal-box}__close--ZIndex: var(--pf-t--global--z-index--2xl);
--#{$about-modal-box}__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
Expand All @@ -37,14 +31,6 @@
--#{$about-modal-box}__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
--#{$about-modal-box}__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);

@media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
--#{$about-modal-box}__close--PaddingBlockEnd: var(--#{$about-modal-box}__close--sm--PaddingBlockEnd);
}

@media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
--#{$about-modal-box}__close--PaddingInlineEnd: var(--#{$about-modal-box}__close--lg--PaddingInlineEnd);
}

// Close Button
--#{$about-modal-box}__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);

Expand All @@ -58,21 +44,12 @@
--#{$about-modal-box}__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
--#{$about-modal-box}__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);

@media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
--#{$about-modal-box}__header--PaddingInlineEnd: var(--#{$about-modal-box}__header--sm--PaddingInlineEnd);
--#{$about-modal-box}__header--PaddingInlineStart: var(--#{$about-modal-box}__header--sm--PaddingInlineStart);
}

// Strapline
--#{$about-modal-box}__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
--#{$about-modal-box}__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
--#{$about-modal-box}__strapline--Color: var(--pf-t--global--text--color--subtle);
--#{$about-modal-box}__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);

@media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
--#{$about-modal-box}__strapline--PaddingBlockStart: var(--#{$about-modal-box}__strapline--sm--PaddingBlockStart);
}

// Content
--#{$about-modal-box}__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
--#{$about-modal-box}__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
Expand All @@ -83,12 +60,24 @@
--#{$about-modal-box}__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
--#{$about-modal-box}__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);

@media only screen and (min-width: $pf-v6-global--breakpoint--sm) {

@media screen and (min-width: $pf-v6-global--breakpoint--sm) {
--#{$about-modal-box}__brand--PaddingInlineEnd: var(--#{$about-modal-box}__brand--sm--PaddingInlineEnd);
--#{$about-modal-box}__brand--PaddingInlineStart: var(--#{$about-modal-box}__brand--sm--PaddingInlineStart);
--#{$about-modal-box}__brand--PaddingBlockEnd: var(--#{$about-modal-box}__brand--sm--PaddingBlockEnd);
--#{$about-modal-box}__header--PaddingInlineEnd: var(--#{$about-modal-box}__header--sm--PaddingInlineEnd);
--#{$about-modal-box}__header--PaddingInlineStart: var(--#{$about-modal-box}__header--sm--PaddingInlineStart);
--#{$about-modal-box}__close--PaddingBlockEnd: var(--#{$about-modal-box}__close--sm--PaddingBlockEnd);
--#{$about-modal-box}__strapline--PaddingBlockStart: var(--#{$about-modal-box}__strapline--sm--PaddingBlockStart);
--#{$about-modal-box}__content--MarginBlockStart: var(--#{$about-modal-box}__content--sm--MarginBlockStart);
--#{$about-modal-box}__content--MarginInlineEnd: var(--#{$about-modal-box}__content--sm--MarginInlineEnd);
--#{$about-modal-box}__content--MarginBlockEnd: var(--#{$about-modal-box}__content--sm--MarginBlockEnd);
--#{$about-modal-box}__content--MarginInlineStart: var(--#{$about-modal-box}__content--sm--MarginInlineStart);
}

@media only screen and (min-width: $pf-v6-global--breakpoint--lg) {
--#{$about-modal-box}__close--PaddingInlineEnd: var(--#{$about-modal-box}__close--lg--PaddingInlineEnd);
}
}

.#{$about-modal-box} {
Expand All @@ -109,6 +98,12 @@
background-position: var(--#{$about-modal-box}--BackgroundPosition);
background-size: var(--#{$about-modal-box}--BackgroundSize);

@include pf-v6-bidirectional-style (
$prop: --#{$about-modal-box}--BackgroundPosition,
$ltr-val: bottom right,
$rtl-val: bottom left
);

@media only screen and (min-width: $pf-v6-global--breakpoint--sm) {
grid-template-areas:
"brand close"
Expand All @@ -124,12 +119,6 @@
grid-template-rows: max-content max-content auto;
grid-template-columns: var(--#{$about-modal-box}--lg--GridTemplateColumns);
}

@include pf-v6-bidirectional-style (
$prop: --#{$about-modal-box}--BackgroundPosition,
$ltr-val: bottom right,
$rtl-val: bottom left
);
}

// Brand
Expand Down
8 changes: 4 additions & 4 deletions src/patternfly/components/Accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,17 +141,17 @@
}

.#{$accordion}__toggle-text {
@include pf-v6-text-overflow;

flex-grow: 1;
font-weight: var(--#{$accordion}__toggle-text--FontWeight);
color: var(--#{$accordion}__toggle-text--Color);

@include pf-v6-text-overflow;
}

.#{$accordion}__toggle-icon {
@include pf-v6-mirror-inline-on-rtl;

transition: var(--#{$accordion}__toggle-icon--Transition);

@include pf-v6-mirror-inline-on-rtl;
}

.#{$accordion}__expandable-content {
Expand Down
6 changes: 3 additions & 3 deletions src/patternfly/components/Alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
border: var(--#{$alert}--BorderWidth) solid var(--#{$alert}--BorderColor);
border-radius: var(--#{$alert}--BorderRadius);
box-shadow: var(--#{$alert}--BoxShadow);

&.pf-m-custom {
--#{$alert}--BorderColor: var(--#{$alert}--m-custom--BorderColor);
--#{$alert}__icon--Color: var(--#{$alert}--m-custom__icon--Color);
Expand Down Expand Up @@ -185,11 +185,11 @@
}

.#{$alert}__toggle-icon {
@include pf-v6-mirror-inline-on-rtl;

display: inline-block;
transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
transform: rotate(var(--#{$alert}__toggle-icon--Rotate));

@include pf-v6-mirror-inline-on-rtl;
}

.#{$alert}__icon {
Expand Down
12 changes: 6 additions & 6 deletions src/patternfly/components/BackgroundImage/background-image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,6 @@
}

.#{$background-image} {
@include pf-v6-bidirectional-style(
$prop: --#{$background-image}--BackgroundPosition,
$ltr-val: bottom right,
$rtl-val: bottom left
);

position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
Expand All @@ -28,4 +22,10 @@
background-repeat: no-repeat;
background-position: var(--#{$background-image}--BackgroundPosition);
background-size: var(--#{$background-image}--BackgroundSize);

@include pf-v6-bidirectional-style(
$prop: --#{$background-image}--BackgroundPosition,
$ltr-val: bottom right,
$rtl-val: bottom left
);
}
11 changes: 6 additions & 5 deletions src/patternfly/components/Banner/banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@
--#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
--#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);

@media (min-width: $pf-v6-global--breakpoint--md) {
--#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
--#{$banner}--PaddingInlineStart: var(--#{$banner}--md--PaddingInlineStart);
}

// banner link variables
--#{$banner}--link--Color: var(--#{$banner}--Color);
--#{$banner}--link--TextDecoration: underline;
Expand Down Expand Up @@ -55,6 +50,12 @@
--#{$banner}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
--#{$banner}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
--#{$banner}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);


@media (min-width: $pf-v6-global--breakpoint--md) {
--#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
--#{$banner}--PaddingInlineStart: var(--#{$banner}--md--PaddingInlineStart);
}
}

.#{$banner} {
Expand Down
4 changes: 2 additions & 2 deletions src/patternfly/components/Breadcrumb/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,12 @@

// Breadcrumb divider
.#{$breadcrumb}__item-divider {
@include pf-v6-mirror-inline-on-rtl;

margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginInlineEnd);
font-size: var(--#{$breadcrumb}__item-divider--FontSize);
line-height: 1;
color: var(--#{$breadcrumb}__item-divider--Color);

@include pf-v6-mirror-inline-on-rtl;
}

// Breadcrumb link
Expand Down
3 changes: 1 addition & 2 deletions src/patternfly/components/CalendarMonth/calendar-month.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,10 @@
}

.#{$calendar-month}__header-nav-control {
@include pf-v6-mirror-inline-on-rtl;

margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginInlineStart);
margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginInlineEnd);

@include pf-v6-mirror-inline-on-rtl;
}

.#{$calendar-month}__header-month {
Expand Down
4 changes: 2 additions & 2 deletions src/patternfly/components/Card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,10 +280,10 @@
}

.#{$card}__header-toggle-icon {
@include pf-v6-mirror-inline-on-rtl;

display: inline-block;
transition: transform var(--#{$card}__header-toggle-icon--TransitionDuration) var(--#{$card}__header-toggle-icon--TransitionTimingFunction);

@include pf-v6-mirror-inline-on-rtl;
}

.#{$card}__title-text {
Expand Down
4 changes: 2 additions & 2 deletions src/patternfly/components/ClipboardCopy/clipboard-copy.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,9 @@
}

.#{$clipboard-copy}__toggle-icon {
@include pf-v6-mirror-inline-on-rtl;

transition: var(--#{$clipboard-copy}__toggle-icon--Transition);

@include pf-v6-mirror-inline-on-rtl;
}

.#{$clipboard-copy}__expandable-content {
Expand Down
Loading