Feature #3725

CSS Engine

Added by Sebastian Kurfuerst about 6 years ago. Updated over 1 year ago.

Status:New Start date:2009-06-22
Priority:Could have Due date:
Assigned To:Christian Müller % Done:

0%
Category:ViewHelpers
Target version:-
Has patch:No

Description

It would be great to have a CSS engine like lesscss, or integrate css cacheer.

http://lesscss.org/index.html
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer

This idea was originally proposed by Jens Hoffmann, and I think it can be fully realized as ViewHelpers.

Greets,
Sebastian

History

#1 Updated by Christian Müller about 6 years ago

  • Assigned To set to Christian Müller

I will try to convert the CSS Cacheer into a ViewHelper. LessCSS looks nice (especially syntax) but all the features are also in CSS Cacheer and it seems easier to me, because it is already PHP. Maybe we can transfer the syntax to CSS Cacheer in a second step.

#2 Updated by Sebastian Kurfuerst about 6 years ago

  • Target version set to 1.0

Hi Christian,
that sounds really like a good plan! I'd suggest you'd develop the ViewHelper for FLOW3 first, and then we'll see if we can include it in the automatic backporting.

Greets,
Sebastian

#3 Updated by Robert Lemke about 6 years ago

  • Target version deleted (1.0)

#4 Updated by Sebastian Kurfuerst about 4 years ago

  • Tracker changed from Feature to Story
  • Priority changed from Should have to Could have

#5 Updated by Sebastian Kurfuerst about 4 years ago

  • Tracker changed from Story to Feature

#6 Updated by Jacob Floyd about 3 years ago

If you're going to make a "CSS Engine", make an interface type thing that makes it easy to implement other css pre-processors as well. I've seen both LESS and SASS used by various TYPO3 community members. Cacheer might be interesting too.

I'd imagine that the ViewHelper could either process stuff itself (allowing for inclusion of Fluid Variables and other ViewHelpers) or just pass the files off to an external processor (maybe a command line utility for less or sass), or maybe it could include a javascript file to compile the css in Developer context, but it pre-compiles the css in production context.

How would that work? I dunno. Maybe one of these (or some combination):
everything in a directory:

<f:css directory="Resource://Private/Stylesheets/less/" type="less"/>
<f:less directory="Resource://Private/Stylesheets/less/"/>
<f:sass directory="Resource://Private/Stylesheets/sass/"/>
<f:css.less directory="Resource://Private/Stylesheets/less/"/>
<f:css.sass directory="Resource://Private/Stylesheets/sass/"/>

Or per file:
<f:css resource="Resource://Private/Stylesheets/less/layout.less" type="less"/>
<f:less directory="Resource://Private/Stylesheets/less/layout.less"/>
<f:sass directory="Resource://Private/Stylesheets/sass/layout.scss"/>
<f:css.less directory="Resource://Private/Stylesheets/less/layout.less"/>
<f:css.sass directory="Resource://Private/Stylesheets/sass/layout.scss"/>

Or included directly
<f:css.cacheer>
@base(baseName)
{
    propertyName: {myCoolFluidVariable};
    propertyName: propertyValue;
    propertyName: propertyValue;
}
</f:css.cacheer>

I think I like the "css.{engine}" syntax best - it feels most FLOW3ish. css.less, css.sass, css.cacheer...

#7 Updated by Jacob Floyd about 3 years ago

Or, instead of using: 

<f:css.{engine}.../>

Perhaps this would make more sense: 
<f:style.{engine}.../>

#8 Updated by Lorenz Ulrich over 1 year ago

Has there been any progress on this feature?

#9 Updated by Christian Müller over 1 year ago

  • Has patch set to No

No this could be tackled again after the reworked resource management is merged. https://review.typo3.org/#/q/status:open+topic:resource-management,n,z

Also available in: Atom PDF