Reduce bundle size: 169kB -> 76kB (#217)

Author: bartveneman

src/index.js

@@ -1,4 +1,6 @@
-import * as csstree from 'css-tree'
+import parse from 'css-tree/parser'
+import walk from 'css-tree/walker'
+import { property as getProperty } from '../node_modules/css-tree/lib/utils/names.js'
 import { compareSpecificity } from './selectors/specificity.js'
 import { analyzeRules } from './rules/rules.js'
 import { colorFunctions, colorNames } from './values/colors.js'
@@ -66,7 +68,7 @@ const analyze = (css) => {
   let totalComments = 0
   let commentsSize = 0
 
-  const ast = csstree.parse(css, {
+  const ast = parse(css, {
     parseAtrulePrelude: false,
     parseCustomProperty: true, // To find font-families, colors, etc.
     positions: true, // So we can use stringifyNode()
@@ -96,7 +98,7 @@ const analyze = (css) => {
   const units = new ContextCollection()
   const embeds = new CountableCollection()
 
-  csstree.walk(ast, {
+  walk(ast, {
     enter: function (node) {
       switch (node.type) {
         case 'Atrule': {
@@ -141,10 +143,9 @@ const analyze = (css) => {
           })
 
           const { value, property } = node
-          const fullProperty = {
-            authored: property,
-            ...csstree.property(property)
-          }
+          const fullProperty = Object.assign({
+            authored: property
+          }, getProperty(property))
 
           properties.push(fullProperty)
           values.push(value)
@@ -192,7 +193,7 @@ const analyze = (css) => {
             }
           }
 
-          csstree.walk(node.value, {
+          walk(value, {
             enter: function (valueNode) {
               switch (valueNode.type) {
                 case 'Hash': {

src/rules/rules.js

@@ -1,4 +1,4 @@
-import * as csstree from 'css-tree'
+import walk from 'css-tree/walker'
 import { AggregateCollection } from '../aggregate-collection.js'
 
 const analyzeRules = ({ rules }) => {
@@ -13,7 +13,7 @@ const analyzeRules = ({ rules }) => {
     let selectors = 0
     let declarations = 0
 
-    csstree.walk(rules[i], {
+    walk(rules[i], {
       enter: function (childNode) {
         if (childNode.type === 'Selector') {
           selectors++

src/selectors/specificity.js

@@ -1,4 +1,5 @@
-import * as csstree from 'css-tree'
+import parse from 'css-tree/parser'
+import walk from 'css-tree/walker'
 
 /**
  * Compare specificity A to Specificity B
@@ -25,7 +26,7 @@ function compareSpecificity(a, b) {
  */
 function selectorListSpecificities(selectorListAst) {
   const childSelectors = []
-  csstree.walk(selectorListAst, {
+  walk(selectorListAst, {
     visit: 'Selector',
     enter(node) {
       childSelectors.push(analyzeSpecificity(node))
@@ -51,7 +52,7 @@ const analyzeSpecificity = (ast) => {
   let complexity = 0
   let isA11y = false
 
-  csstree.walk(ast, {
+  walk(ast, {
     enter: function (selector) {
       switch (selector.type) {
         case 'IdSelector': {
@@ -94,9 +95,8 @@ const analyzeSpecificity = (ast) => {
 
           // CSSTree doesn't parse the arguments of :is, :has and :matches,
           // so we need to create an AST out of them ourselves
-          if (['is', 'has', 'matches'].includes(selector.name)) {
-            const rawSelectorList = csstree.find(selector, ({ type }) => type === 'Raw')
-            const childAst = csstree.parse(rawSelectorList.value, { context: 'selectorList' })
+          if (['is', 'has', 'matches', '-webkit-any', '-moz-any'].includes(selector.name)) {
+            const childAst = parse(selector.children.first.value, { context: 'selectorList' })
             const selectorList = selectorListSpecificities(childAst)
             const [topA, topB, topC] = selectorList[0].specificity
             A += topA
@@ -157,8 +157,7 @@ const analyzeSpecificity = (ast) => {
           // The specificity of a :where() pseudo-class is replaced by zero,
           // but it does count towards complexity.
           if (selector.name === 'where') {
-            const rawSelectorList = csstree.find(selector, ({ type }) => type === 'Raw')
-            const childAst = csstree.parse(rawSelectorList.value, { context: 'selectorList' })
+            const childAst = parse(selector.children.first.value, { context: 'selectorList' })
             const childSelectors = selectorListSpecificities(childAst)
 
             for (let i = 0; i < childSelectors.length; i++) {

src/values/font-families.js

@@ -1,4 +1,5 @@
-import * as csstree from 'css-tree'
+import walk from 'css-tree/walker'
+import generate from 'css-tree/generator'
 import { CountableCollection } from '../countable-collection.js'
 
 const systemKeywords = {
@@ -69,7 +70,7 @@ const analyzeFontFamilies = ({ fontValues, fontFamilyValues }) => {
 
     const parts = []
 
-    csstree.walk(value, {
+    walk(value, {
       reverse: true,
       enter: function (fontNode) {
         if (fontNode.type === 'String') {
@@ -87,7 +88,7 @@ const analyzeFontFamilies = ({ fontValues, fontFamilyValues }) => {
       }
     })
 
-    all.push(parts.map(csstree.generate).join(''))
+    all.push(parts.map(generate).join(''))
   }
 
   return all.count()

src/values/font-sizes.js

@@ -1,4 +1,4 @@
-import * as csstree from 'css-tree'
+import walk from 'css-tree/walker'
 import { CountableCollection } from '../countable-collection.js'
 
 const sizeKeywords = {
@@ -47,7 +47,7 @@ const analyzeFontSizes = ({ stringifyNode, fontSizeValues, fontValues }) => {
     let operator = false
     let size
 
-    csstree.walk(fontNode, {
+    walk(fontNode, {
       enter: function (fontNode) {
         switch (fontNode.type) {
           case 'Number': {