Skip to content
Snippets Groups Projects

Generate SCSS into individual CSS files within components_combined.

Generate SCSS into individual CSS files within components_combined.
feature/split-css into 1.0.x
2 open threads
Merged
Alan Colerequested to merge
feature/split-css into 1.0.x
2 open threads

An additional script splitcss.js was added to the npm run dist step. It runs after the existing webpack, and will build the SCSS files into their respective component folders, and adds a base.css to the components_combined/base folder for the core required styles for every component.

Some notes:

  • As this SCSS build is run independently of the webpack build, no loaders were used in the process - only features available in the npm sass package. This means any ~ imports have been replaced with a relative path to the file. (See breakpoint and reset).
  • Some mixins have been defined within a component scss file. This means if the mixin needs to be used elsewhere, it will double-import the selectors that also live with the mixin. For this reason, I have split out the mixins into the mixin folder, where we can be safe importing it without adding unwanted selectors. See background and button.
Edited by Alan Cole

Merge request reports

Pipeline #266677 passed

Stage: build
Stage: test
Stage: deploy

Pipeline passed for 816f9ab6 on feature/split-css

Approval is optional

Merged by Kristen PolKristen Pol 11 months ago (Aug 28, 2024 5:26am UTC)

Merge details

  • Changes merged into with 7d3883d9.
  • Deleted the source branch.

Pipeline #266681 passed

Stage: build
Stage: test
Stage: deploy

Pipeline passed for 7d3883d9 on 1.0.x

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Alan Cole requested review from @RichardGaunt and @kepol

    requested review from @RichardGaunt and @kepol

  • Alan Cole assigned to @alan.cole

    assigned to @alan.cole

  • Alan Cole changed the description

    changed the description

    • Kristen Pol
      Kristen Pol @kepol
      Maintainer

      I tried running this... thought I should run at top-level but that didn't work so ran in starshot_demo as I see the code is in there and got:

      kristens-mbp-2:starshot_demo kristenpol$ npm run splitcss

> splitcss
> node splitcss.js

/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/splitcss.js:11
const mixins = globSync(`00-base/mixins/**/*.scss`, { cwd: dir });
               ^

TypeError: globSync is not a function
    at Object.<anonymous> (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/splitcss.js:11:16)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
    at node:internal/main/run_main_module:28:49

Node.js v21.6.2
    • Kristen Pol
      Kristen Pol @kepol
      Maintainer

      After running npm i first, I get:

      kristens-mbp-2:starshot_demo kristenpol$ npm run splitcss

> splitcss
> node splitcss.js

undefined:3
throw error;
^

sass.Exception [Error]: Can't find stylesheet to import.
  ╷
6 │ @import '~breakpoint-sass/stylesheets/breakpoint';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  components_combined/00-base/mixins/_breakpoint.scss 6:9  @import
  components_combined/00-base/mixins/_index.scss 3:9       @import
  components_combined/00-base/_variables.base.scss 20:9    @import
  00-base/variables.scss 35:9                              @import
  - 3:11                                                   root stylesheet
    at Object.wrapException (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:2161:43)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$4$baseUrl$forImport (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:94989:19)
    at _EvaluateVisitor1._evaluate0$_loadStylesheet$3$forImport (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:95018:19)
    at _EvaluateVisitor__visitDynamicImport_closure1.call$0 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:97332:17)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$1$3 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:96465:25)
    at _EvaluateVisitor1._evaluate0$_withStackFrame$3 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:96471:19)
    at _EvaluateVisitor1._evaluate0$_visitDynamicImport$1 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:94935:19)
    at _EvaluateVisitor1.visitImportRule$1 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:94909:17)
    at ImportRule0.accept$1$1 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:100909:22)
    at ImportRule0.accept$1 (/Users/kristenpol/Sites/salsa/starshot/starshot-clean/web/themes/contrib/demo_design_system/starshot_demo/node_modules/sass/sass.dart.js:100912:19)

Node.js v21.6.2
    • Richard Gaunt
      Richard Gaunt @RichardGaunt
      Developer

      Same error need to add package to package.json or add the workspace of the parent directory perhaps?

    • Please register or sign in to reply
  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    Another note... I'm just seeing the title of the MR has "within components_combined"... note that Drupal is picking up the components directory for base theme and subtheme. So what are we using components_combined for?

  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    Just ran npm run build and it looks like it runs splitcss and I looked in both components and components_combined directories and didn't see any css files.

  • Richard Gaunt
    Richard Gaunt @RichardGaunt
    Developer

    @kepol

    In civictheme, there is a gulpfile that merges civictheme components with the sub-theme components.

    The background information to this is as folllows:

    Those directories are only for storybook due to Javascript twig implementation it doesn't work with Drupal and because nodejs could not look up above its root directory and traverse to civictheme to include its components directory directly equally symbolic links didnt work (not a nodejs expert but this was an issue we had).

    To overcome the nodejs issues the gulpfile creates two directories and provides the explanation of the following two directories:

    • components_combined - a directory of merged CivicTheme components with overrides from the current theme's components used to collect the "full" set of components for a build.
    • .components-civictheme - a copy of CivicTheme components used by Webpack to resolve inclusions of "clean" CivicTheme components when extending CivicTheme components in this theme.

    This is only for storybook though - 95% sure anyway.

    The Drupal theme does the above more elegantly described below.

    The theme and sub-theme manage that merging through the components module namespacing where we name the @atoms, @molecules, @organism namespace in the theme info file for both CT and sub-theme - and this does the role of .components-civictheme where we can add new components in sub-theme (and inherit CT components) and we can override CT components in subtheme.

    Then in the civictheme we define a second set of component namespaces of @ct-atoms @ct-molecules and @ct-organism this allows the subtheme to reference the original civictheme components and extend them.

  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    Thanks :pray: I’ll need to re-read that a few times :rofl:

    Meanwhile… we only need the css files in components directories so hopefully this is close?

  • Alan Cole added 5 commits

    added 5 commits

    • 1e2c1bc5...053a6666 - 2 commits from branch 1.0.x
    • 81c12b89 - Updating styles for splitting CSS. WIP
    • 8533b769 - Add css variables and reduce node version requirement.
    • 4952165f - Update Component CSS to output to components dir.

    Compare with previous version

    Toggle commit list
  • Alan Cole
    Alan Cole @alan.cole
    Author Developer

    @kepol - I've rebased and updated the script. It will require a clean installation to work, so, from root:

    npm ci
npm run dist
cd starshot_demo
npm ci
npm run dist
    Edited by Alan Cole
  • Alan Cole added 1 commit

    added 1 commit

    • e9f55616 - Share the same splitcss file between theme and subtheme.

    Compare with previous version

  • Kristen Pol added 1 commit

    added 1 commit

    • 178b7601 - Temporary add dist/base css to component css.

    Compare with previous version

  • Kristen Pol added 1 commit

    added 1 commit

    • 816f9ab6 - Add dist/base.css to libraries for when XB is fixed.

    Compare with previous version

  • Kristen Pol
    Kristen Pol @kepol
    Maintainer

    Tested this along with:

    https://www.drupal.org/project/experience_builder/issues/3469856

    I added a hack to include dist/base.css in every component until XB loads the theme libraries:

    https://www.drupal.org/project/experience_builder/issues/3469856#comment-15740980

  • Kristen Pol merged

    merged

Please register or sign in to reply