Development Mode CSS using own barceloneta-based theme

plone / Products.CMFPlone

The core of the Plone content management system

https://plone.org

GNU General Public License v2.0

243 stars 186 forks source link

Development Mode CSS using own barceloneta-based theme #3840

Open wkbkhard opened 11 months ago

wkbkhard commented 11 months ago

BUG/PROBLEM REPORT

Developing CSS for own barceloneta-based theme seems to not fully work as expected - in development-mode (registry) and with a development-client it won't show the split up CSS files in development tools in browsers etc.

What I did:

Installed a new Plone 6.0.6
Installed the newest ploncecli
created an addon with plonecli
created an theme based on the barceloneta-theme with plonecli
npm run watch and added some variables in the .scss
adding the development-css attribute in the manifest.cfg in my theme

What I expect to happen:

development tools will use the not compressed CSS file/map to show where exactly CSS attributes are set and can be overwritten

What actually happened:

the normal compressed CSS shows up (theme.css) and no division happens between all those SCSS files it was build from

What version of Plone/ Addons I am using:

Plone 6.0.6 Classic UI Barceloneta based
Only Addon in this installation is EasyForm (4.1.4)

wkbkhard commented 11 months ago

Addendum

It seems that if you change back to the barceloneta theme (over design configuration) the development-css of that theme will be used

wkbkhard commented 11 months ago

Thoughts

I played around a bit and checked the different files - something I stumbled upon is the "sources" and "sourceRoot" in the css Files. Maybe those can't be read by the development tools or something like that... still shouldn't be a thing if you use official tools. Will investigate some more and update here if I find something

wkbkhard commented 11 months ago

Update

Okay - it seems there are 2 problems. First one is the ignorance of the "development-css" in the manifest as I described above and therefore still a CMFPlone Problem I guess.

The other one is that the compilation of the CSS files and maps seems to be off. After some research and a lot of help I added a postcss.config.js with the following code in my theme:

module.exports = { map: false, }

Now the Source Maps seem to be okay when I have the manifest.cfg updated to:

production-css = ++theme++my-theme/styles/theme.css

I don't now where to put an Issue for the second problem. Any suggestions?